Making a Palette Accessible

How to test a legacy colour palette for accessibility and persuade a corporation to adopt changes to it.

Colin Shanley
Design + Sketch
6 min readJul 28, 2020

--

Palette matrix of foreground and background colour combinations.

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 existing palette for accessibility testing.

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.

Animation of comparison of the existing palette with all colour combinations, and with combinations that fail WCAG removed.

That certainly got the stakeholders’ attention. Even some foreground/background combinations that passed, barely did so. I knew matters would become worse once I revised the matrix to that as viewed by the colour-blind. So I created three further versions of the matrix as viewed by those with:

  • protanopia
  • deuteranopia
  • tritanopia

This revealed further points of failure, as the contrast in some instances dropped below the minimum, depending on the type of colour blindness in question.

The existing palette viewed by users deuteranopia, protanopia and tritanopia.

I presented all these variations of the matrix as an interactive PDF. Clicking buttons (not shown in these animations) allowed the stakeholders to navigate between them and immediately understand the impact.

By now, the horses — talking or otherwise — were well and truly frightened.

The Proposed New Palette

Dramatic changes to the palette was never going to fly — I had already been told that at the outset. So I identified those colours that caused most problems and tweaked them by increasing saturation and/or decreasing lightness just enough to bring the contrast into compliance (including for the colour-blind).

I presented the proposed palette (on the right, in the figure below) alongside the existing one (on the left). No changes to the five greys were necessary.

The existing and proposed palette — no changes made to greyscale.

As it turned out, only four of the seven colours needed adjustment (and the change to the orange was barely perceptible). I was then able to remap the matrix, this time with the proposed new palette and showing only the foreground/background combinations that met with the WCAG AA contrast requirements, shown below.

The proposed palette with combinations that meet WCAG standard.

The Result

In my presentation, I compared the matrices of the existing colour palette with the proposed one, as shown below. If you look closely, you will see that the proposed palette yielded more accessible colour combinations than the existing one. This delighted the client which, by now, had fully accepted that the palette needed to change.

Matrix comparison of the existing and the proposed palettes with only colours conform to WCAG.

The result? The company did indeed change its corporate palette to the one I recommended, worldwide. I really cannot overstate what a big deal that is for a multinational. At a later time, over lunch, the head of digital inclusion told me that is was the way in which my analysis was presented that did the trick — it simply couldn’t be ignored.

A conflation of contrast analysis, an understanding of how to subtly shift colours through saturation and lightness in HSL, and a blow-them-away interactive presentation. That’s all it took to move a mountain.

Colin Shanley has been a designer and author for more than 30 years. This article is abstracted from his book Colour in User Interface Design, available on Amazon or for direct purchase of the ePUB.

--

--

Colin Shanley
Design + Sketch

Colin has been a non-fiction writer and author for more than 30 years. His commissions include banking and financial, AI and programming, pharmaceuticals, etc.