Read time: 40 seconds
Is there enough contrast between foreground and background colour?
- Rohit has low vision and needs content to have enough contrast to read it.
- Jonathan is red-green colourblind. Jonathan can’t make sense of information conveyed with colour alone.
- The glare from the sun makes it hard for Amari to read the phone screen on his phone. Higher colour contrast text is easier for Amari to see the content.
Steps to take
- Don’t use colour alone to convey meaning. Use icons, text, and other visual elements to reinforce the meaning of the content.
- Test contrast between foreground and background. We use Vision Australia's Colour Contrast Analyser and WebAIM's Colour Contrast Checker.
- Quickly scan for colour contrast problems. We use aXe, SiteImprove's accessibility checker, and WAVE's web accessibility evaluation tool.
- Make sure you meet Web Content Accessibility Guidelines (WCAG) AA.
- Read our information about focus visible. This includes what best practice colour combinations to use.
- Watch World Wide Web Consortium's (W3C) colors with good contrast video (1 minute 3 seconds):
Video link: https://www.youtube.com/watch?v=Hui87z2Vx8o
- Video tutorial: Meeting contrast requirements (YouTube)
- Video tutorial: How I do an accessibility check for contrast (YouTube)
- Evaluate your colour combination (accessible-colors.com)
Web Content Accessibility Guidelines
Page last updated: 15 June 2020