Colour contrast and font choice — a practical accessibility guide
Colour contrast is one of the most important and measurable aspects of accessibility. Here are the requirements, tools and common mistakes.
Why colour contrast matters
Roughly 8% of men and 0.5% of women have some form of colour blindness. Many older users also have reduced contrast sensitivity. Low-contrast text affects even people with normal vision when reading a screen in bright sunlight.
Colour contrast is not just an accessibility question — it is a readability question.
WCAG contrast requirements
Level AA (minimum):
- Normal text (below 18pt): contrast ratio of at least 4.5:1
- Large text (18pt+ or bold 14pt+): contrast ratio of at least 3:1
- UI components (buttons, input field borders): at least 3:1
Level AAA (higher standard):
- Normal text: at least 7:1
- Large text: at least 4.5:1
Contrast ratio is calculated as the luminance ratio between the lighter and darker colour. Black text on a white background is 21:1 — the maximum.
How to check contrast
WebAIM Contrast Checker (webaim.org/resources/contrastchecker) — enter two HEX colour codes and see the result immediately.
Chrome DevTools — inspect an element and the Colour section shows the contrast ratio automatically.
Colour Contrast Analyser (downloadable app) — an eyedropper tool that also works on images and PDFs.
Figma plugin: Contrast — checks automatically within design files.
Common mistakes
Grey text on a light background — "elegant" design often fails to meet the standard. #999999 grey on white is only 2.85:1 — too low.
White text on a light blue button — the button colour looks dark enough but is not: #4a90e2 with white text has a contrast ratio of only 3.14:1.
Placeholder text — placeholder text in form fields is often too light. WCAG requires 4.5:1 for placeholders too.
Link text vs background — a link must differ from both the background and the surrounding text.
Focus indicator — the focus ring on a focused element must have sufficient contrast (WCAG 2.2 added stricter requirements for this).
Font choice from an accessibility perspective
Contrast is measurable; font choice is partly subjective — but some principles apply:
Readability over originality. Decorative fonts in headings are fine, but for body text use a serif or sans-serif font with clearly distinguishable letterforms.
Distinguishable characters: I (capital i), l (lowercase L), and 1 (one) must be visually distinct. Inter, Roboto, and Source Sans are good examples. Some fonts make these identical.
Minimum font size: 16px is a comfortable minimum for body text. 14px is acceptable; below 12px is problematic.
Line height: at least 1.5 times the font size. Tight text is harder to read.
Line length: 60–80 characters per line is optimal. Very long lines cause reader fatigue.
Contrast and brand colours
"Our brand colour is a light orange — we can't change it" is a common situation. Solutions:
- Use the brand colour as a background with black or white text on it — not as the text colour itself
- Darken the brand colour slightly until it meets the standard
- Use the brand colour as an accent, not for primary body text
The brand does not need to be sacrificed — but readability is fundamental.
Need help checking your site's contrast? Contact us — we carry out accessibility audits.
Kaido Toomingas
WebPro Company OÜ
Need Drupal help?
If the article describes your situation, you do not have to read everything first. A real person will help you choose the next step.