1.4.11 – Non-text Contrast
High-Level Description
This criterion ensures that UI components, such as buttons, toggles, checkboxes, as well as graphical objects, such as charts and icons, have at least 3:1 contrast against adjacent colours. It supports users with low vision or contrast sensitivity.
Detailed Description
Non-text elements that convey meaning, such as visual controls and states (focus, selected, hover), must have adequate colour contrast. This applies to both active and inactive UI components.
What this means:
- All applicable non-text elements have a contrast ratio of at least 3:1
- States (focus, hover, selected, etc.) must also meet 3:1 contrast against the background
Applies to:
- Non text elements that convey meaning
- UI components e.g. buttons, inputs, toggles, sliders
- Graphical elements that convey meaning
Indicators of Non-Compliance:
- Checkbox, input field or toggle switch borders blend with background.
- Focus outlines are too light to be seen.
- Icons or indicators lack visual distinction.
Real-World Examples
| Scenario | Compliant | Non-Compliant |
|---|---|---|
| Buttons changing on hover | When hovering on a button, it darkens while maintaining a 3:1 contrast ratio against the background | When hovering on the button it changes to a lighter colour, blending with the background and fails the 3:1 contrast requirement |
| Toggle Switch State | The toggle switch uses a clearly differentiated state- e.g., a dark thumb on a light track or vice versa- providing at least 3:1 contrast between the selected and unselected states | The toggle switch is light grey on white with no perceivable visual change when selected, failing to provide the required contrast for component states |
| A review with a star rating | The stars have a black border around them which passes the requirement | The stars are light yellow on a white background with a low colour contrast of 1.2:1, failing the requirement |
Disability Impact
| Disability Group | Without Sufficient Contrast | With Sufficient Contrast |
|---|---|---|
| Low Vision | UI controls are indistinct from the background | Strong contrast improves perception |
| Colour Blindness | Low contrast makes components indistinguishable from the background | Clear differentiation of components regardless of hue |
| Elderly Users | Age-related contrast sensitivity is an issue | Easier to identify components across devices and environments |
| All Users | Sunlight glare or poor screens affect usability for components with low contrast | Strong contrast works universally |
Supporting Documentation
Remediation Strategies
1 - Use high-contrast colour combinations for UI elements
Select colours for borders, icons, controls, and indicators that provide a strong visual contrast against their backgrounds.
2 - Ensure high-contrast for all states
For default, on hover, toggled etc ensure all states have at least 3:1 colour contrast.