Low contrast is one of the most common accessibility problems on the web, and one of the easiest to fix. It affects people with low vision, older visitors and anyone reading a phone in bright sunlight.
The WCAG contrast ratios
Contrast is measured as a ratio between the text colour and its background, from 1:1 (no contrast) to 21:1 (black on white). WCAG 2.1 Level AA requires:
- 4.5:1 for normal text
- 3:1 for large text (about 24px regular, or about 18.5px bold)
- 3:1 for user interface components and meaningful graphics, such as input borders and icons that convey information
Common mistakes
- Light grey body text on white
- White text on bright yellow, orange or light green buttons
- Text placed over busy photos without an overlay
- Placeholder text used instead of labels in forms
- Links that differ from surrounding text only by a slightly different colour
Do not rely on colour alone
Information should not depend only on colour. Links in paragraphs should be underlined or otherwise distinguished, and form errors should include text, not just a red border.
How to test
Use a contrast checker: enter the text and background colours and it reports the ratio. Browser developer tools and automated accessibility checkers can also flag low-contrast text across a page.
Fixing contrast without losing your brand
You rarely need to abandon brand colours. Use darker shades for text, reserve light brand colours for backgrounds and accents, and pair bright button colours with dark text where needed.
Contrast is checked on every site we build. Read more about WCAG 2.1 AA.
Need a hand?
TheWebsiteMakers.ca is a Toronto-based team with 19+ years of experience building websites for businesses across Canada and the US. We design accessible websites, host them on servers we manage ourselves, and look after them every month. Get a free, no-obligation quote.