WCAG Colour Contrast: How to Check Your Design

Low-contrast text is hard to read for everyone, especially in bright light, and impossible for some people with low vision. The Web Content Accessibility Guidelines (WCAG) give clear numeric targets so you do not have to guess.

The ratios to know

• Normal text: at least 4.5 to 1 against its background (level AA).
• Large text (about 24 px, or 19 px bold, and up): at least 3 to 1.
• Interface elements such as input borders and icons that convey meaning: at least 3 to 1.
• For the stricter AAA level, 7 to 1 for normal text.

How to test

Pick your text colour and background in the WCAG Contrast Checker; it reports the ratio and whether it passes AA and AAA. If you have a whole palette, Batch Contrast Checker tests many combinations at once. Use Color Picker or Photo Color Picker with Magnifier to read exact values from an existing design or image.

Common failures

• Light grey text on white, popular for "subtle" captions.
• White text on a bright mid-tone button (yellow, light blue, orange).
• Placeholder text in form fields that is too faint.
• Text placed over photos without an overlay.

Fixing a failing colour

You rarely need to change the whole brand colour. Darken the text colour a few percent or lighten the background until the ratio passes, then check again. For brand colours that must stay bright, use them for large shapes and put dark text on top instead.

Do not rely on colour alone

About one in twelve men has some form of colour-vision deficiency. Do not use colour as the only way to show an error or a status; add text or an icon. The Colour Blindness Simulator shows how an image looks to different kinds of colour blindness.

Build a palette from the start

Color Palette Generator and Color Converter help you create consistent colours in HEX, RGB and HSL formats, and testing each text and background pair early saves redesign work later.

Frequently asked questions

Is AA enough or should I aim for AAA?

AA is the common legal and practical target for most websites. AAA is stricter and not always achievable for every colour pair, but is worth using for long body text.

Do logos and decorative images need to pass?

Logos and purely decorative elements are generally exempt, but any text or icon that conveys information must meet the ratio.

What about dark mode?

Check contrast in both light and dark themes separately; a combination that passes in one may fail in the other.

How do I check text over a photo?

Sample the lightest and darkest areas behind the text. Adding a semi-transparent overlay behind the text is the most reliable fix.

Key takeaways

• Aim for 4.5 to 1 for normal text and 3 to 1 for large text.
• Test every text and background pair.
• Do not rely on colour alone to convey meaning.