How to make your colour palette usable for accessibility

Colour palettes are the building blocks of visual design. Having a practical palette makes a world of difference when creating accessible experiences. But how can we make our palettes as usable as possible?

What does WCAG say about colour and contrast

The Web Content Accessibility Guidelines (WCAG) mentions two contrast ratios. There’s 4.5∶1. That’s the minimum contrast requirement for regular text as mentioned in WCAG Success Criterion 1.4.3 Contrast (Minimum). This means that when you measure the contrast of regular text on a background, it should have a contrast of at least 4.5∶1.

You can measure this contrast in the developer tools of your favourite browser like Firefox or Chrome. You can also measure it inside Figma. If your software can’t measure contrast, then there are external tools like the Colour Contrast Analyser.

The other contrast ratio that WCAG mentions is 3∶1. This is the minimum for large text, which is defined as text that is 14 points (about 18.5 pixels) and bold, or 18 points (24 pixels). It is also mentioned in WCAG Success Criterion 1.4.11 Non-text Contrast. It is the minimum contrast for User Interface Components (things like form elements, buttons and links) and Graphical Objects (like icons and parts of charts).

Note 1: Every state of a component (like a focused button or a visited link) should have enough contrast with the background. States do not need to contrast with other states of the same component.

Note 2: When discussing User Interface Components, the part that makes the component recognizable is the part that has contrast requirements. For example, a button with a light gray outline on a white background might be very low contrast. But if it contains contrasty dark gray text that makes it recognisable as a button, then it meets contrast requirements.

How to simplify WCAG-compliance for designers

For many designers, their colour palette is like a toolkit. It helps when they’re not severely limited in the tools they can pick. And it helps when they know when each tool can be used or applied. To translate this to WCAG-compliance: It helps when designers have a clear selection of colours, with guidance on when they can use which.

Visualizing the usability of a palette

My favourite tool for achieving these goals is Contrast Grid by Directed Edges (formerly, EightShapes). In this tool, you can enter a set of colours. It will generate a grid (hence the name) with those colours. It will show the contrast ratios of all combinations of colours. If you enter a palette of 6 colours. It will generate a grid of 36 (6 times 6) squares. It will show you the contrast of each of those 6 colours, when combined with one of the others (and itself).

See for yourself: Contrast Grid with white, off-white, light gray, medium gray, dark gray and black.

What does it say?

From top to bottom in the column with white on top. Off-white on white gives a very low contrast of 1.1∶1. Medium gray gives 4.5∶1, which is enough for complying with regular text. Dark gray gives a respectable 7.4∶1 on white. Black on white gives the maximum contrast of 21∶1. Taking off-white as a background gives slightly lower values, as the contrast is worse on a less bright background. Besides the numbers, the grid also has labels. DNP means Does Not Pass. This combination is low contrast and is not usable in any situation. AA18 means the contrast is enough to comply with WCAG for large text (3∶1 or more). This is also sufficient for user interface components. Anything marked AA can be used for regular text. AAA means it’s sufficient for regular text following the stricter AAA-level of WCAG.

What we can do with this part 1: improve

When you generate a grid like this, and see a lot of DNP, that means your designers have very few combinations to work with. This is where the tool will help you out. If you see some shades just below the minimum for compliance (2.8? 2.9?), you can change them slightly and improve contrast. Of course, 3∶1 is a minimum set by WCAG, but you’re free to have your own goals here. The same goes for regular text. Maybe you can improve it to work not only on a white background, but also that off-white you’re using everywhere, or that slightly colourful bright background you’re using. It’s also possible to see shortcomings in your selection of shades. If you have white, off-white, and your next darkest colour is medium gray at 4.6∶1, maybe add something in between for more flexibility. Getting this visual representation of your palette and the useful combinations can really help you understand how rich or poor your toolkit is. It’s not impossible to have a very large grid with very few usable combinations. And with just a bit of fine tuning, this can be changed a lot.

What we can do with this part 2: share

Now that you have your ideal palette, it’s time to put it into action. The tool can help with this as well. Take the output of the tool, and put it somewhere where designers are. The data can be put in an Excel. But it might get overlooked. Maybe you have a shared Figma- or Penpot-file where this information would be fitting. Or you have a Design System with an extensive page on the colours you use. It would be perfect there. And in addition, you can even encode it in your Design System and its tokens. Don’t tell people what they can’t do, but make it clear what options they do have. And showing all usable combinations is doing just that!

I’ve followed the steps, am I now WCAG-compliant?

WCAG is more than contrast, and contrast is more than having a useful palette. But this does help a lot. Having a useful palette is the foundation of an inclusively designed brand. You can’t expect people to build inclusive experiences when their building blocks have issues. The most common contrast issues that still pop up with a proper palette include: Low-contrast placeholders in input fields: don’t use placeholders. Custom form elements: sticking to native makes life easier. Be prepared to thoroughly test when you don’t. Non-default states with low contrast: design and test beyond the happy flow. Images being used as background: avoid text over images. External tools, vendors and embeds that deviate: good luck. A challenge in tight process management and communication. Non-consistent implementation of the palette: this might be a challenge beyond accessibility.