🌗Contrast Checker

About this tool

Pick or paste a text colour and a background colour. You'll see the contrast ratio, pass or fail for WCAG AA and AAA (normal and large text) and for UI components, and a live sample with body text, large text and a button. If the pair fails, the tool suggests the nearest text colour of the same hue that passes, and you can apply it with one click.

Understanding WCAG contrast

Low contrast is one of the most common accessibility problems on the web. It makes text hard to read for people with low vision, colour blindness or ageing eyes, and for everyone outdoors on a phone. The Web Content Accessibility Guidelines (WCAG 2.x) measure contrast as a ratio of relative luminance, from 1:1 (identical colours) to 21:1 (black on white). Level AA, the target most laws and policies reference, including the European Accessibility Act, Section 508 and the UK public sector regulations, needs 4.5:1 for normal text. Large text (at least 24 px, or 18.66 px bold) and meaningful non-text elements such as icons, input borders and focus indicators need 3:1. Level AAA raises those to 7:1 and 4.5:1. The popular grey #6B7280 on white measures 4.83:1, so it passes AA for body text but not AAA. Ratios are truncated rather than rounded up, because 4.49:1 doesn't meet 4.5:1. When a pair fails, the suggestion keeps your hue and saturation and finds the nearest lighter or darker shade that passes, so you can stay on brand. Honest limits: contrast is necessary but not sufficient for readability. Thin fonts, small sizes, tight spacing and busy backgrounds all matter, and text over images or gradients must pass at its weakest point. The newer APCA method, proposed for WCAG 3, scores pairs differently and isn't yet a standard. The colour name finder, the colour-blindness simulator and the colour converter are related.

Frequently asked questions