Making a Palette Accessible
By: Colin Shanley
Tags: Palette, Design Process, Colour, Accessibility, User Interface

Accessibility has always been a tough sell. Admittedly, less so than in the ‘nineties, when no prospective client was interested. But even today — more enlightened times — the majority of companies I encounter still prefer to make a lot of noise about accessibility without actually making a serious effort to address it (that is not an exaggeration, and I am talking about household names).

Creating a colour palette from scratch is not something designers — even freelancers — get to do very often. Sure, there are greenfield projects out there, but they are slightly less commonplace than talking horses. The overwhelmingly likely scenario is that you will inherit a palette created by someone else (and not necessarily by a designer — it could be the fruits of the marketing department).

Failures in the colour palette — how the colours are applied in the UI — are among the most prevalent of accessibility issues. So what happens when you know the palette you are working with has multiple points of failure? You cannot simply carry on regardless, churning out designs that you know fail accessibility requirements. To make matters worse, style guides can — and often do — call for foreground/background colour combinations that do not meet the minimum standard for contrast (particularly true when dealing with colours with opacity).

Checking a colour palette against accessibility standards and identifying failures is one thing. But selling a revised palette to your stakeholders is quite another. Getting a multinational to change anything is a tough ask at the best of times. But getting them to change their corporate colour palette is marginally less challenging than skiing a mogul field with an egg balanced on a spoon. Marketing departments will usually opt to change their designer over changing their palette.

It can be achieved, however. And, like so many things, it is all down to presentation. The best way of illustrating this is to take you through a real-life case study.

Changing a Corporate Palette

A few years back, I was approached by the global head of digital inclusion for a major international corporation in the IT sector. Discretion being the better part of valour, I shall not name the company. But suffice to say, the company has a presence in over 70 countries and more than 100,000 employees.

The head of digital inclusion knew the corporate palette failed accessibility (although had not quantified it). But despite calling for a change over some years, his pleas had fallen on deaf ears.

My brief was to quantify the points of failure in the palette (against WCAG Level AA) and propose the minimum changes necessary to bring the palette into compliance. I therefore concentrated on low-vision and colour-blind end users.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as icons, form input field borders, etc.).

The Existing Palette

The existing palette consisted of seven colours and five greys, as shown in the figure below. Whatever you may think of the colour selections (and that is probably not a lot) this is what Marketing had long-since signed off and were reluctant to change (to say the least).

The company had many hundreds of websites, portals and applications worldwide. And, in the absence of formal guidelines, the palette was applied inconsistently and, very often, in a way that breached accessibility guidelines.

My first task was to map the entire palette as a matrix of all possible foreground text and background colour combinations — a bit like a mileage chart. I then analysed all the combinations against WCAG AA and removed the points of failure. This provided an immediate impression of what worked and what didn’t, as shown in the in the animated comparison below.