Ensure that meaningful graphics and active user interface components are easily distinguishable by maintaining a contrast ratio of at least 3:1 against adjacent colors
Table of Contents
Official Requirements
Success Criterion 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):
1. 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;
2. Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
Why is it required?
Although all users benefit from a good contrast ratio between components and colors surrounding them. This criterion is especially helpful for users with visual impairments as a 3:1 contrast ratio helps them to distinguish user interface components such as buttons and controls.
How do we fix it?
- Ensure that user interface components and graphics( such as icons, graphs, etc.) have a contrast ratio of at least 3:1 to the color surrounding it
- Maintain the contrast ratio criteria even when controls change color
- Ensure that the error indicator in form fields also meets the contrast ratio criteria
Are there any exceptions?
This success criterion has a three exceptions
- When the user interface components are inactive
- When the graphics are considered essential (such as brand logos, flags, etc)
- If the graphics are representations of other things such as heat map or a screenshot of the website or diagrams of medical information
