Inclusive Design Tip : Colour blindness

A visual tip

Why do it

About 8% men and 0.5% women have a colour vision deficiency.

What to do

Things to check

  • How does your site look?
  • Can you easily read your menus, text, calls to action?
  • How does your logo look? What about your main calls to action?

Things you could change

  • Find a new colour palette.
  • Improve colours on your site to be more readable for colourblind users.
  • Make sure text has good foreground/background contrast. See Web Content Accessibility Guidelines (WCAG) 2.0 on colour contrast. 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 (e.g. error or success messages). Use additional things like font weight, borders, icons and help text too.