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.
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.