1.4.11 Non-text Contrast
Official description of the success criterion
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
- Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
What to do?
Ensure sufficient contrast for user interface components and graphical objects.
Why is it important?
Makes interactive elements and important graphics distinguishable.
Common pitfalls
There are a lot of issues with contrast in general. Especially when hover and focus states are concerned. Note that the hover state has requirements only against the background. The style doesn't have to have a specific contrast when compared to the default state of the element.
Infographics generally fail several color-related criteria.
How to test for it?
Ensure that the contrast between various elements and their states is at least 3:1. Automated tools can spot some of these issues but manual testing is usually needed.
If you are unsure of the requirements, make sure to check the Understanding page for this criterion that is linked on this page. The page contains a lot of different examples and instructions.
Note: Text characters, such as 'X' or '>' are considered as non-text characters/symbols when they are used as symbols. That means they are used for their visual appearance and not expressing something in the human language. So for example a close button that has an 'X' in it, the X is considered non-text content.
How to take this criterion into account in design?
It can be beneficial to start the design in black and white. Add color once everything works. This helps with several color-related criteria.
Start by checking the color combinations for their contrast and ensure all planned combinations have at least 3:1 contrast between the element and the background.
How to take this criterion into account in development?
It is often recommended to design the layout in black and white first. Once the layout works in black and white, you can then add color. This is also a way to ensure that color alone does not communicate things. This design approach solves several color-related criteria in addition to this.
Be sure to check the contrast of all color combinations first and foremost, and make sure that the contrast between the element and the background is at least 3:1.