WCAG 2.2 Color Contrast Checker

The WCAG 2.2 Color Contrast Checker measures the contrast ratio between a foreground and a background color and reports pass or fail for AA and AAA text (SC 1.4.3 and 1.4.6) and for UI components and graphical objects (SC 1.4.11). It accepts HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() and CSS color names, previews the pair as text and as a control, and suggests the nearest accessible color when a pair fails.

1. 1.Enter or pick a foreground and a background color.
2. 2.Read the ratio and the pass/fail row for each WCAG 2.2 criterion.
3. 3.Check the normal text, large text and control previews.
4. 4.If a check fails, choose Adjust foreground or Adjust background to AA or AAA, compare the original and suggested colors, then select Apply.
5. 5.Copy the result summary or the CSS declarations.

Each color is converted to sRGB and its relative luminance is computed with the WCAG formula (linearization threshold 0.04045). The ratio is (L1 + 0.05) / (L2 + 0.05). It is shown rounded to two decimals, but every pass/fail decision uses the unrounded value, so 4.499:1 fails AA even though it displays as 4.50:1. A translucent foreground is blended over the background, and a translucent background over the backdrop color (white by default), per sRGB channel, the way browsers paint them. Colors outside sRGB, such as vivid Display P3 or OKLCH values, are clipped to sRGB before measuring, and the tool says so.

The checker measures one color pair. It does not evaluate font rendering, text over images or gradients, or other WCAG criteria; use Web Accessibility Checker to audit a full page. WCAG 2.2 large text is at least 18 point, or 14 point bold (about 24px, or 18.66px bold). Colors are processed in your browser, and the last pair is saved only in this browser's local storage.