Level AA
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.>
Explanation
Active controls like buttons, and meaningful graphics must have a contrast ratio of at least 3:1 against their background colour. This makes content easier for everyone to use, but especially people who cannot see well.
Responsibilities
- Design
- QA
Requirements
- Active controls like buttons and form fields have a contrast of at least 3:1 against their background;
- Meaningful graphics like charts or icons have a contrast of at least 3:1 against their background;
- The keyboard focus indicator has a contrast of at least 3:1 against its background.
Common mistakes
- Active controls and meaningful graphics do not have a contrast of 3:1 or higher against their background;
- The keyboard focus indicator does not have a contrast of 3:1 or higher against its background.
Official resources
- 1.4.11 Non-text contrast
- Understanding 1.4.11 Non-text Contrast
- How to meet 1.4.11 Non-text Contrast