Inclusive Design Tip : Contrast

A visual tip

Why do it

People with visual disabilities need information that has sufficient colour contrast and information that isn’t represented only in colour.

What to do

  • Use the High Contrast display mode of your computer.
    • Windows: Use High Contrast mode. bit.ly/emplab020. Press left Alt + left Shift + Print Screen, or: Ease of Access button on the sign-in screen > High Contrast.
    • Mac OS: System Preferences > Accessibility > Display. Select Invert Colours or Use Grayscale.
  • Use Lea Verou’s Contrast Ratio Checker Lea Verou’s Contrast Ratio Checker.

Things to check

  • Is all text still visible and readable?
  • What is the contrast ratio of your site’s colours?

Things you could change

  • Use a larger font size for higher contrast of text foreground and background colours.
  • Make sure text has good foreground/background contrast. See bit.ly/emplab032 . A ratio of 4.5:1 gives you WCAG AA compliance (“you’re doing great for Web Content Accessibility”) and 7:1 for WCAG AAA compliance (“you’re doing amazing for Web Content Accessibility!”)
  • Don’t use colour alone to convey information. Use additional things like font weight, borders, icons and help text too.