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.

See Also

About Author

I'm Luke, I started Wuhcag in 2012 to help people like you get to grips with web accessibility. Check out my book, 'How to Meet the WCAG 2.0'.

Leave Comment