WCAG Contrast Checker

Calculate WCAG text contrast ratio from two colors and check AA/AAA thresholds for normal and large text.

Check WCAG color contrast

Enter foreground and background hex colors to calculate the relative-luminance contrast ratio and text thresholds.

Foreground

Background

Contrast preview: readable text matters.

Contrast ratio—

AA normal text—

AA large text—

AAA normal text—

AAA large text—

WCAG contrast ratio calculator

WCAG 2.2 uses relative luminance to compare a text color with its background. For Success Criterion 1.4.3, normal text needs at least 4.5:1 contrast and large-scale text needs at least 3:1. Enhanced (AAA) text contrast uses 7:1 for normal text and 4.5:1 for large text. W3C Contrast (Minimum) guidance.

How contrast is calculated

Each sRGB channel is linearized, weighted into relative luminance, and the lighter and darker luminances are used in (L1 + 0.05) ÷ (L2 + 0.05). WCAG notes that threshold values should not be rounded upward for pass/fail decisions, so this tool compares the full precision value even though it displays two decimals.

What counts as large text?

Large-scale text is not simply anything that looks like a heading. WCAG defines it by rendered size and, for lower sizes, font weight. Check the current W3C definition for the exact CSS/point equivalents and do not apply the 3:1 threshold to ordinary body text.

Contrast is only one accessibility check

This calculator does not assess gradients, background images, transparency, hover/focus states, non-text contrast, font rendering or whether color is the only means of conveying information. Test the final rendered component and all interaction states.

Frequently asked questions

What contrast ratio does WCAG AA require?

For text under WCAG 2.2 SC 1.4.3, normal text requires at least 4.5:1 and large-scale text at least 3:1, subject to the criterion exceptions.

Why should contrast ratios not be rounded for compliance?

W3C explicitly notes that computed values should not be rounded to meet a threshold. The checker compares the raw value and only rounds the display.

Does this checker test button boundaries and icons?

No. Non-text UI components and graphical objects are evaluated under separate non-text contrast requirements.

Can I use 8-digit hex or transparency?

This version accepts solid 3- or 6-digit hex colors. Composite transparent colors against their actual background first.