1.4.11 Non-Text Contrast (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.
Requirements
For user interface components
- Visual information required to identify user interface components (like the border or background of a text input field), and what state they’re in (like focused, or in error), must have a 3:1 contrast ratio against adjacent colors.
- Except for
- inactive components
- if the appearance of the component is determined by the Operating System/Web Browser, and not modified
- Except for
For graphical objects (like icons, or parts of an infographics)
- Any visual element that users need to see in order to understand the content of a page must have a 3:1 contrast ratio against adjacent colors.
Why is it important?
Many sight impaired users cannot see important controls or understand graphics if they have poor colour contrast.
Summary
- Make sure that visual information that identifies important graphics, interactive controls and their state has enough contrast against adjacent colours.
- User Interface components and graphical objects must have a contrast ratio of at least 3:1.
Common Mistakes
- A text input field doesn’t have border or background colour with enough contrast, so it’s hard to see or understand that there is a text input.
- A text input’s focus indicator doesn’t have enough contrast, so it’s hard for users to notice that the text input is selected.
- The purpose and meaning of important images that relate to page content – like if a medicine is poisonous, or other warnings – are hard to make out for a user who is sight impaired.
- The purpose or ‘state’ of a control isn’t clear to the user.
Design Guide
- Check that buttons or other inputs and controls have a ratio of 3:1 or higher. This also includes their ‘state’.
- This does not apply if inactive or if their look is made purely by the browser and not the author.
- Make sure parts of any graphics required to understand the content (like a warning icon) have good color contrast.