How to check colour contrast on your website

Low-contrast text was found on 83.9% of the top one million home pages in the WebAIM Million 2026 report. It hurts people with low vision, colour blindness and older eyes, and anyone reading a phone in sunlight. The good news: it is usually a few lines of CSS to fix.

The rules in one minute

• 4.5:1 for normal text (WCAG 1.4.3, level AA).
• 3:1 for large text: 24px and up, or about 19px and up when bold.
• 3:1 for non-text elements you need to see to use the page: button outlines, form field borders, icons and focus indicators (WCAG 1.4.11).
• Logos and purely decorative text are exempt.

The ratio goes from 1:1 (white on white) to 21:1 (black on white). Pure black on white is not required; dark grey like #333333 on white is about 12.6:1, which is very readable.

How to test, step by step

1. List your colour pairs

   Write down your body text, headings, links, buttons, placeholder text, footer text and any text on coloured or photo backgrounds, with the background each sits on.

2. Test each pair

   Use a free checker such as the WebAIM Contrast Checker, or the colour picker in Chrome or Firefox developer tools, which shows the ratio and a pass or fail.

3. Fix the failures in your styles

   Darken grey text (for example from #999999 to #595959 on white) or deepen a light brand colour for text use. Change it in your theme or design tokens so it updates everywhere.

4. Check text on images

   Add a dark overlay or gradient behind text on photos, and test the lightest part of the image. Check on a phone, where the crop changes.

5. Check states

   Test hover, focus, disabled and visited states, and the focus outline itself, which also needs 3:1.

6. Scan to catch the rest

   Run a scan with live browser checks to find low contrast that comes from real, computed styles on every page.

Fixes that keep your brand

You do not have to give up your colours. Most brands keep a bright colour for large shapes and backgrounds, and add a darker shade of the same colour for text and small icons. If your brand blue fails as text on white, try a shade two or three steps darker. Your designer will barely notice; your readers will.

Avoid using colour alone to show meaning. A red border on an error field also needs an icon or a message, because about 1 in 12 men has some form of colour vision deficiency.

Why a scanner sees more than you

Contrast can change on every page: a white button on a light hero, grey text in a cookie banner, a third-party chat widget. Accessible Nord checks contrast in two ways: in the page code, and in real visitors’ browsers after your styles load, so it catches problems a code check alone would miss.

Next, make sure people can see where they are when using a keyboard: read how to test your website with a keyboard.