Color Contrast Checker (WCAG 2.2)

About the Color Contrast Checker (WCAG 2.2)

Enter a text color and a background color in any CSS notation — HEX, rgb(), hsl(), oklch() or a name — and get the WCAG 2.2 contrast ratio with the results for normal text, large text and interface components at levels AA and AAA. A live preview shows your text at the size and weight you choose, and says whether that size counts as large text.

If a pair fails, the tool suggests the nearest colors that pass: it changes only OKLCH lightness, so the hue and colorfulness of your brand color stay recognizable. You can also check text that sits on a photo or illustration: open the image, select the area behind the text, and see the lowest contrast in that area and the pixel that causes it.

Common uses

• Checking brand colors, buttons, links and form fields before a design is built.
• Fixing failing color pairs reported by an accessibility audit with the smallest possible change.
• Choosing a text color for a hero image or banner photo.
• Documenting which color combinations of a design system meet AA or AAA.

How the contrast ratio is calculated

WCAG 2.2 converts each color to its relative luminance — the linearized red, green and blue channels weighted 0.2126, 0.7152 and 0.0722 — and divides the lighter by the darker, after adding 0.05 to both. The ratio runs from 1:1 to 21:1.

• AA (SC 1.4.3): 4.5:1 for normal text, 3:1 for large text.
• AAA (SC 1.4.6): 7:1 for normal text, 4.5:1 for large text.
• Non-text (SC 1.4.11): 3:1 for the visual parts of interface components (borders of inputs, focus rings) and meaningful graphics.

The thresholds are minimums: W3C’s Understanding 1.4.3 notes that values must not be rounded, so 4.499:1 does not meet 4.5:1. This tool cuts the ratio to two decimals instead of rounding it.

Transparent colors

A translucent text color is blended with the background first, exactly as the browser draws it, and the blended color is measured. A translucent background is measured on white, because WCAG assumes white when no background is specified — if your page behind it is a different color, check the color it actually appears as.

How the nearest passing color is found

The suggestion keeps the color’s OKLCH chroma and hue and searches lightness only, in both directions, for the smallest change that reaches the chosen ratio. The final color is rounded to whole RGB values and checked again, so the suggestion always passes as written. Sometimes only one direction works (white text cannot get lighter), and sometimes neither does — for example semi-transparent text that is too faint at any lightness.

Text over images

WCAG measures contrast against the background the text is shown on, and W3C’s failure technique F83 covers background images that do not give enough contrast. Because a photo is not one color, this tool measures your text color against every pixel of the area you select (images over about 4 megapixels are measured on a smaller copy, which the page tells you) and reports the worst pixel, the ratio that 95% of the area reaches, and the share of the area that passes. The worst pixel is the strict test; a few stray pixels may be acceptable if the letters remain clearly readable, but when in doubt add a solid or semi-opaque backing behind the text.

Limitations

• The WCAG 2.x formula does not model font weight or thin strokes: a thin or decorative font can be hard to read even when it passes.
• Text that is part of a logo, purely decorative, or in a disabled control is exempt from WCAG contrast requirements; the tool cannot know which applies to your text.
• Gradients are not read from CSS: open a screenshot of the area as an image instead.
• Colors are sRGB. Wide-gamut colors outside sRGB are mapped into it before measuring.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.