For
designers

Making your
colours accessible

Colours can feel tricky when it comes to accessibility. You need to pick colours with a high enough colour contrast to be legible, but after all your years learning to be a designer you might just want to pick the nicest ones. Try to enjoy the challenge. It’s easy to make a nice design when you have access to the entire colour wheel, can you do it with accessibility restrictions?

Think about it

There are many different reasons to make your colours more accessible in your learning experiences.
Listed below are some examples for you to think about when working on your designs:

  • Learners with limited vision may need high contrast colours to be able to see content clearly
  • Learners with colour blindness may struggle to get information if it's only colour coded (for example; red means bad, green means good)
  • Learners that are tired may find it uncomfortable to stare at a screen with high contrast colours for long periods

Resources that can help

Adobe Color accessibility tools

You can use Adobe Color along with its built in accessibility tools to create a colour palette, and make sure it’s accessible. You can filter by what WCAG level you want to achieve, and check if your palettes are colour-blind safe.

Firefox developer edition

If you have experience with web design or development and are comfortable using developer tools in browsers, this video by Firefox covers how to use their inspector and accessibility tools to check your colour palettes in browser, and test your designs for colour blindness.