2015 Apr 10

Industrial has begun the age old process of redesigning its corporate website. This is always a fun challenge as you try to follow the best practices of your industry while pushing the boundary. This is a quick walkthrough of how I helped our designer develop an accessible colour palette to get things kicked off.

1. Start with a baseline you like

We started with a baseline palette chosen from our brand standards. We wanted to have a bright vibrant look to the new design, and the colours are the place to start.

Base colour palette

2. Testing

Internally we use a great tool called Colour Contrast Analyzer to run accessibility testing on our colours. I launched the tool and began the process of testing the colours in the following combinations:

  • Colour on White
  • Colour on Black
  • Black on Colour
  • White on Colour

This process allows us to figure out which of the standard combinations will pass A, AA, AAA standards.

When you find a combination that fails, the tool allows you to adjust the colours until you hit a passing combination. After doing that we ended up with a palette that looks like this.

Brand colour palette

3. Final Adjustments

After getting a palette set that passes guidelines – in this case we aimed at AA, we go back to the brand palette and grab the next closest colour that passes. From this we get our final colour guideline palette.

Final adjustments to colour palette

Why?

The main reason to go through this exercise is to build a logical set of constraints that will provide the best possible experience for all users. If you start a project by considering accessibility concerns as just another usability issue, it allows you to create beautiful and accessible designs. So give it a try on your next project.