Colour Contrast for Accessibility: WCAG Ratios Made Simple
3 min read4 October 2026By Muhammad Abdullah
Light grey text on a white background looks clean on a designer's bright monitor and is hard to read for a large share of real visitors: people with low vision, older eyes, a phone in sunlight or a cheap screen. Contrast ratios turn "is this readable" into a number you can check, and the targets are simpler than they look.
What a contrast ratio is
The ratio compares the brightness of the text colour with the background, from 1 to 1 for identical colours up to 21 to 1 for black on white. It is calculated from relative luminance, which accounts for the eye being far more sensitive to green than to blue, so two colours that seem equally strong can score very differently.
The numbers to hit
- Normal text: at least 4.5 to 1 for WCAG level AA, the level most laws and policies refer to.
- Large text: at least 3 to 1. Large means about 24 pixels and up, or about 18.5 pixels and up when bold.
- Buttons, form borders, icons and focus outlines: at least 3 to 1 against what is next to them.
- The stricter AAA level asks for 7 to 1 for normal text and 4.5 to 1 for large text.
#767676 on #ffffff 4.54 : 1 passes AA for normal text
#999999 on #ffffff 2.85 : 1 fails, even for large text
#ffffff on #3b82f6 3.68 : 1 large text onlyPlaces contrast is easy to miss
- White text on a brand colour. Many mid-tone blues, greens and oranges fail with white body text.
- Text over images. Contrast changes across the photo, so add a dark overlay or a solid panel behind the text.
- Dark mode. A full-white text on near-black can feel harsh, but dimming it too far fails the other way. Check both themes separately.
- Hover and focus states, which are often designed last and checked never.
Colour blindness: never colour alone
About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, most often difficulty telling red from green. A form that marks errors only by turning a border red, or a chart that separates lines only by red and green, loses that information for them.
- Pair colour with something else: an icon, a text label, a pattern or a line style.
- Write the error message, not just a red outline.
- Underline links inside body text, rather than relying on colour to set them apart.
- Preview your designs through a colour blindness simulator before shipping.
Common questions
What contrast ratio do I need for text?
At least 4.5 to 1 for normal text and 3 to 1 for large text to meet WCAG AA. AAA raises those to 7 to 1 and 4.5 to 1.
What counts as large text in WCAG?
Roughly 24 pixels and larger, or about 18.5 pixels and larger in bold.
Is good contrast enough for colour blind users?
Not on its own. Information must not depend on colour alone, so pair colours with labels, icons or patterns.