Colour contrast and font choice — WCAG checks and tools
🎧 Listen to every article back to back
Colour contrast and font choice are not merely design preferences. WCAG defines measurable minimums for text, user interface components and visible focus.
Why colour contrast matters
Colour-vision deficiencies and reduced contrast sensitivity affect many users. Low-contrast text can also be difficult to read for people with normal vision when a screen is used in bright sunlight.
Colour contrast is not just an accessibility question — it is a readability question. If a website needs to meet accessibility requirements, contrast, focus states and form readability should be checked as part of an accessibility audit or a broader Drupal audit.
WCAG contrast requirements
The ratios below come from the W3C explanation of WCAG 2.2 contrast requirements (opens in a new tab).
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 (opens in a new tab) — 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 be distinguishable from its background and cannot rely on colour alone unless the contrast with surrounding text and the additional interaction cue meet the relevant WCAG techniques.
Focus indicator — keyboard focus must remain visible. Author-defined indicators also need sufficient contrast against adjacent colours; WCAG 2.2 adds further focus appearance criteria at level AAA.
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) should be easy to tell apart. Inter, Roboto and Source Sans are examples of fonts with clear letterforms.
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.
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.