Contrast Checker

Contrast Checker measures the contrast ratio between two colours and tells you whether the pair passes WCAG accessibility requirements. Enter a foreground and background colour and you get the ratio plus a pass or fail verdict at each conformance level.

How to use

1. Set the text colour and the background colour, by HEX value or with the picker.
2. The contrast ratio appears immediately, from 1 to 1 up to 21 to 1.
3. Check the pass or fail result for AA and AAA, at both normal and large text sizes.
4. Adjust the lighter colour until the pair clears the level you are targeting.

The thresholds you need to hit

• AA, normal text: at least 4.5 to 1. This is the level most legal requirements reference.
• AA, large text: at least 3 to 1, where large means 18.66 pixels bold or 24 pixels regular and above.
• AAA, normal text: at least 7 to 1, and 4.5 to 1 for large text.
• Interface components and meaningful graphics: at least 3 to 1 against what sits next to them.

Where designs usually fail

The most common failures are light grey placeholder text, white text over a photograph or gradient, and brand colours used for body copy rather than headings. Mid-tone colours are the hardest to place, because a mid grey can fail against both white and black. Note that the ratio is computed from relative luminance, not from how different two colours look, so two colours that feel very distinct can still fail — a saturated blue and a saturated red of similar lightness will not pass. Also remember that colour alone should never be the only way information is conveyed, since contrast rules do nothing for someone who cannot distinguish the hues at all.

Related tools

FAQ

Which colour formats does Contrast Checker support?

HEX in three, six and eight digit forms, RGB and RGBA, and HSL and HSLA. Values are converted through a common internal representation, so round-tripping between formats does not drift.

What contrast ratio do I need to pass accessibility checks?

WCAG 2.1 level AA requires 4.5 to 1 for normal body text and 3 to 1 for large text, which means 18.66 pixels bold or 24 pixels regular and above. Level AAA raises those to 7 to 1 and 4.5 to 1 respectively.

Can I paste the output straight into CSS?

Yes. The generated values are valid CSS colour syntax and can be pasted into a stylesheet, a design token file or a component's inline style without any editing.