Color Contrast Checker
Color Contrast Checker text background contrast ratio AA AAA color test foreground readability checkJudge the actual typeface and size too.
17.40:1
Check text against its intended background
Type or paste foreground and background colors, or choose them with the color pickers, then select Check contrast. The result shows their WCAG contrast ratio and current Level AA and AAA outcomes for normal and large text. Use the sample to confirm that the colors were assigned in the right order.
Current WCAG 2.2 thresholds
WCAG 2.2 Contrast (Minimum) requires at least 4.5:1 for normal text and 3:1 for large text at Level AA. Contrast (Enhanced) requires 7:1 for normal text and 4.5:1 for large text at Level AAA. W3C defines large-scale text as at least 18 point, or at least 14 point when bold. Ratios are compared before display rounding, so 4.499:1 does not pass a 4.5:1 threshold.
How the ratio is calculated
Each 8-bit sRGB channel is normalized and converted to linear light using the WCAG relative-luminance formula. Luminance weights are 0.2126 for red, 0.7152 for green, and 0.0722 for blue. With the lighter luminance as L1 and darker as L2, contrast is (L1 + 0.05) / (L2 + 0.05). Foreground and background order therefore does not change the numeric ratio.
Worked example
For black #000000 on white #ffffff, relative luminances are 0 and 1. The calculation is 1.05 divided by 0.05, producing 21:1, the maximum possible ratio. It passes all four text checks. A medium gray such as #777777 on white is about 4.48:1, which passes AA for large text but misses AA for normal text.
Contrast is one accessibility check
A passing pair does not establish full accessibility or WCAG conformance. Review font weight, size, spacing, states, focus indicators, non-text controls, images, gradients, disabled elements, and content behind transparency. Do not use color alone to communicate status. Real pages also need keyboard, zoom, reflow, semantics, labels, and assistive-technology testing.
Limitations and privacy
Both colors stay in this browser. The checker accepts opaque sRGB literals only; it does not sample screenshots, resolve CSS variables, blend alpha, inspect gradients, evaluate font anti-aliasing, simulate color vision, or certify a page. Displayed ratio is rounded to two decimals, while pass/fail comparisons use the unrounded value.
Contrast Checker FAQ
Does AAA replace AA?
AAA is the stronger contrast target. A pair that passes AAA also passes the corresponding AA check, but complete AAA conformance covers much more than contrast.
Do logos need these text ratios?
WCAG's text-contrast criteria exempt text that is part of a logo or brand name.
What if text crosses a photo?
Test the least contrasting area behind the text, or provide a reliable solid backing treatment.