The contrast between user interface components, graphics and adjacent colours is at least 3:1.
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, so getting your colour choice right is essential.
How to Pass
- 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.
- 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).
- Graphics that are brand logos.
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.
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.