Using colour and contrast

Publication date: August 13, 2019

Good colour contrast is essential for people to read and understand content. It helps people with different types of vision and makes content easier to read on different devices and in different types of lighting.

Who does this affect?

Mei has astigmatism which causes blurred vision. Light coloured text on a white background is difficult for her to read.
Amari is colour blind. They have difficulty seeing links that are blue but not underlined. Underlining links makes them easier to find and use.
As part of his work, Jeff often needs to read content on the fly, including outdoors. Glare from sunlight can make low-contrast text difficult to read. Higher-contrast text makes it easier for him to access information quickly and accurately.

Contrast requirements

Consider if there's enough contrast between the text and the background. Light coloured text on a white background may look nice, but it's difficult to read. To meet accessibility requirements, the contrast ratio between text and background must be at least:

4.5:1 for normal text
3:1 for large text (about 18pt or larger, or 14pt or larger when text is bold)

Check your contrast

Check contrast early on in the design process and whenever colours are reused in new contexts. To measure the contrast between text and background colours use a tool like WebAIM’s Colour Contrast Checker. Test contrast in all states, including hover, focus, active and disabled states.

Colour is not just for text

Colour contrast also applies to icons, buttons, form fields, charts and other visual elements that convey meaning or require user interaction. The minimum contrast ratio for these elements is 3:1 when they convey meaning or require user interaction.

Keyboard focus

Make sure keyboard focus indicators have at least a 3:1 contrast ratio. Focus styles should be clearly visible and not rely on colour alone.

Text over images

Use text over images sparingly. If you must place text over an image, add a solid background behind the text or apply a dark or light overlay to the image to ensure sufficient contrast across all screen sizes.

Branding

Text that's part of a logo does not have a minimum contrast requirement. However, when logo or brand colours are reused in content for headings, links or buttons, the text colour must meet contrast requirements. This may involve adjusting the colours or developing a separate set of brand colours to use for text.

Do not rely on colour alone to convey a message

Do not use colour alone to convey meaning. Consider if the colour was removed, would people still understand the message? For example, are you using colour alone (such as blue text) to indicate a hyperlink without also underlining it? There must be more than one visual cue. This applies to:

Links
Errors
Required fields
Status indicators
Charts and graphs

More topics