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, 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.

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).
  • Graphics that are brand logos.

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.

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

Free Developer Resources

Join over 3,500 subscribers on my weekly web accessibility email and get free developer resources like WCAG 2.1 Checklists and special offers.

Powered by ConvertKit

Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.

Learn more >

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'.