The contrast between user interface components, graphics and adjacent colours is at least 3:1.
Introduction
All users benefit from a good contrast between the components on your website and the colour around them.
Some users with visual impairments need a stronger contrast than others to fully distinguish and use components such as input fields, buttons and controls, so getting your colour choice right is essential.
How to Pass ‘Non-Text Contrast’
- Ensure user controls have a contrast of at least 3:1 to the colour around them;
- Where controls change colour on focus or use, ensure the colours used have a contrast of at least 3:1; and
- Ensure all graphics (for example icons, graphs and charts) have a contrast of at least 3:1 to the colour around them.
Exceptions
- Where a user interface component is visible but inactive (for example, a disabled button)
- A graphic is not required for understanding (for example, a chart where labels give the same information as the coloured lines or a decorative graphic)
- Brand logos
- Representations of other things, such as a screenshot of a website or a heat map
‘Non-Text Contrast’ Tips
Remember the different states a component may have and ensure they all comply.
Where form fields use an indicator (for example for missing information), use a colour that meets the contrast criteria.
Where fields or controls use a border, ensure the border meets the criteria.
For graphs, ensure each line or bar has a 3:1 contrast with both the background and the other lines or bars.
For pie charts, ensure each segment as a 3:1 contrast with both the background and the segment either side of it.
