Colour contrast checker — WCAG AA and AAA pass or fail

How to use the contrast checker

1. Set the Text colour with the picker or by typing any CSS colour.
2. Set the Background the same way.
3. Read the Contrast ratio and the Pass or Fail next to each WCAG level.
4. If normal text fails AA, look at the suggested swatches: the nearest text colours that reach AA and AAA while keeping the same hue.
5. Check the preview, and use the swap button to test the colours the other way round.

What it does and when to use it

Low contrast is one of the most common accessibility problems on websites, and pale grey text on white is a classic cause. This checker tells you whether a colour pair meets the WCAG 2.2 contrast rules, which many accessibility laws and policies point to. Use it before you fix a brand palette, when picking placeholder or caption colours, or when a design review flags text as hard to read.

It reports six results: AA and AAA for normal text, AA and AAA for large text, and the 3:1 rule for non-text elements such as icons and input borders. To test many colour pairs at once, try the contrast grid. To check a specific text size and weight, the WCAG checker takes those into account. Need a colour’s codes first? Use the colour picker.

How it works

Each colour is turned into relative luminance L, a measure of how bright it looks:

1. Convert each RGB channel to 0–1, then undo the sRGB gamma: if the value c ≤ 0.04045, use c ÷ 12.92, otherwise ((c + 0.055) ÷ 1.055)^2.4.
2. L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
3. Contrast ratio = (L of the lighter colour + 0.05) ÷ (L of the darker colour + 0.05).

The result runs from 1:1 to 21:1. A semi-transparent text colour is first blended onto the background, because that is the colour people actually see. The suggested fixes keep the hue and chroma in OKLCH and move only the lightness until the pair passes, checked again after rounding to a real HEX value.

Worked examples

These are the checker’s own results.

Mid grey #777777 on white. Contrast ratio 4.48:1. AA normal text: Fail. AA large text and non-text: Pass. The checker suggests #767676 for AA (4.54:1), one step darker, and #595959 for AAA.

Slate #64748b on white (the default pair). Contrast ratio 4.76:1. It passes AA for normal text and AAA for large text, but fails AAA for normal text, which needs 7:1.

Limits and tips

• Change lightness, not hue. Swapping blue for purple rarely helps; making the text darker or the background lighter does.
• Text over images or gradients needs checking against the lightest area behind the text, not an average.
• Hover and disabled states need checking too. WCAG exempts disabled controls, but users still need to read them.
• The ratio is a minimum. Comfortable reading for long text often needs more than 4.5:1.