On this page:
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.
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.
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.
Many sight impaired users cannot see important controls or understand graphics if they have poor colour contrast.
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):
- 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.
See the W3C’s detailed explanation of this guideline with techniques and examples.
Check that buttons or other inputs and controls have a ratio of 3:1 or higher. This also includes their ‘state’.
Make sure parts of any graphics required to understand the content (like a warning icon) have good colour contrast.