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 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.
- 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.
- 1.4.1 – Use of Colour
- 1.4.3 – Contrast (Minimum)
- 1.4.6 – Contrast (Enhanced)
- Understanding Success Criterion 1.4.11 (W3C)
Free Developer Resources
Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.