How WCAG Contrast Ratios Are Calculated
WCAG 2.1 defines contrast ratio using each color's relative luminance, a measure of how bright it appears, calculated from its linearized RGB values weighted by how the human eye perceives red, green, and blue differently (0.2126, 0.7152, and 0.0722 respectively). The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's. This produces a ratio from 1:1 (identical colors, no contrast at all) to 21:1 (pure black on pure white, the maximum possible).
AA vs. AAA, Normal vs. Large Text
WCAG defines two conformance levels and two text-size categories, and the minimum ratio required depends on both. AA (the standard most legal requirements reference) needs 4.5:1 for normal text and 3:1 for large text. AAA (an enhanced standard) needs 7:1 for normal text and 4.5:1 for large text. "Large text" specifically means at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold, everything smaller counts as normal text and needs the higher ratio.
The Often-Missed "UI Components" Criterion
WCAG 2.1's Success Criterion 1.4.11 (Non-text Contrast) requires a 3:1 ratio for meaningful graphical elements: icons, input field borders, focus indicators, and UI component boundaries, separate from the text-contrast rules. Many simpler contrast checkers only test text and miss this criterion entirely, which is why this tool includes it explicitly as a fifth row in the results table.
Reading the Live Preview and Gauge
The live preview renders your actual foreground and background colors on real sample content, a bold heading, body paragraph, small caption text, and interactive UI elements, so you can see how the combination reads in context, not just as an abstract number. The gauge bar beneath the ratio plots your exact value against the 1 to 21 scale with the AA/AAA thresholds marked, giving an immediate sense of how much headroom (or how far short) your combination is.
Fixing a Failing Contrast Ratio
If a combination fails, the fastest fix is usually to darken the text or lighten the background (or the reverse, for dark backgrounds), since contrast ratio is driven entirely by the luminance gap between the two colors. Small adjustments can matter: going from a mid-gray to a slightly darker gray often crosses the 4.5:1 threshold without looking dramatically different. This tool's live preview lets you iterate on exact hex values until the WCAG table shows a pass. As a wcag contrast checker and contrast ratio calculator, it doubles as an accessibility color checker, an aa aaa contrast checker, a text contrast checker for wcag color contrast rules, a general contrast ratio tool, a web accessibility checker, and a color accessibility tool for any two hex values.