accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email.

Back to the overview page

Non-text contrast

Your page uses visual elements (like background colours or borders) to help users identify controls, their states, and understand infographics.
→ Make sure those visual elements have enough contrast.


On this page:


Requirements

For user interface components

Common mistakes

OK
It's clear that this icon represents Facebook, because the Facebook logo uses enough colour contrast.
Fail
It's not visible enough that this icon represents Facebook, because the colour contrast between the green and the white is not sufficient.

For graphical objects (like icons, or parts of an infographics)

Common mistakes

Example: star rating
OK
The presence of the stars is indicated by their border, which is in black and has enough contrast with white.
Fail
The presence of the stars is only indicated by their background colour, which doesn't have enough contrast with white.

Why?

Many sight impaired users cannot see important controls or understand graphics if they have poor colour contrast.

Official wording in the Web Content Accessibility Guidelines

1.4.11 Non-text Contrast (Level AA): The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

See the W3C’s detailed explanation of this guideline with techniques and examples.


Guidance for Design

More guidance for design


More info

Sources

Contribute

This document is in beta. Help us by reporting issues via Github or email.