A colour matrix to make visual content more accessible

By Eliza.Compton, 4 July, 2023
View
Accessible content is better content. One way to boost accessibility in visual materials is paying attention to colour contrast during the design process. Here’s a tool to make that simpler
Article type
Article
Main text

In a brightly lit lecture theatre, in a staff meeting about potential redundancies, senior leaders took us through a slide deck that used white text with a yellow background. The low-quality projector made reading this information even more difficult, and the colour choice made a tense and worrying experience much worse.

Colour is not just about branding or making graphic design appealing to the eye. Colour, and specifically contrast, can affect how clearly your message is communicated and how it is received. So, here is a technique to ensure your infographics, e-learning activities and presentations are effective and accessible.

Universities use a brand colour palette to make materials consistent with their valuable brand. Different combinations of these colours will produce a variety of contrasts and effects. When we present content such as text, the colour we choose should contrast clearly with the background colour. Yellow text on a white background, for example, is hard to read due to its low contrast. Dark-blue text on a white background is easier to read because its contrast is higher.

Low-contrast text presents a particular barrier to those with low vision or colour-vision deficiencies. Some people will skip over text that has low contrast because it can be too much of a strain to read it. These barriers can affect anyone in many everyday situations.

At the University of Southampton, we use accessibility guidelines and a colour matrix to help colleagues make accessible choices when using our brand palette.

How do we know how much contrast is sufficient?

The web content accessibility guidelines use a calculation to measure contrast. The result is a “contrast ratio” between the foreground and background colours. The higher the ratio, the better the readability. The guidelines state minimum levels of contrast for non-text content such as icons and functional graphics and for text content.

While many colour contrast checkers are available, the process still requires:

  • entering the colours that we wish to compare (this often requires us to enter an obscure set of numbers and letters)
  • understanding the results
  • repeating the process for each new set of colours.

Creating a brand accessibility matrix

The table (Figure 1) shows “G” for combinations that meet the minimum level of contrast for non-text content, “AA” for combinations that meet the minimum level of contrast for text content, and “AAA” for combinations that meet the enhanced level for text content.

Image
The web-based matrix. It responds to different device sizes such as mobile or computer. The same colours are in the same order for both the horizontal and vertical axes. Where two colours meet the table shows F, if it fails all contrast criteria. G means it can only be used for graphical objects, AA means that as well as graphical objects it can be used for text, but only at the minimum AA level, and AAA means it can be used for text at the enhanced level, as well as for graphical objects. Buttons make it simple to filter out colours that do not meet minimum or enhanced requirements for the presentation of text, as well as the formatting of the table.
Figure 1: The accessibility colour matrix allows us to check which colours from our brand palette have sufficient contrast when we want to meet web accessibility guidelines

 

This approach makes it simple to look up colour combinations and check their contrast at a glance. Some colleagues have even printed the matrix out to put on their office wall.

How can you make your own matrix?

Contrast Grid can create a simple matrix instantly. I created my own custom matrix by using WebAIM’s Contrast Checker API and the chroma.js JavaScript library.

Refine colour choices according to likely use

Does your organisation use a PowerPoint template? The background colour is often white. In fact, the background colour of many resources we create tends to be white or a shade of white. After filtering to show “AA” and “AAA” examples only (Figure 2), we find that our palette has seven colours that contrast well with white. Now we have a smaller set of colours we know we can use accessibly with this background colour. We found several colours in our brand that cannot be used with any other brand colour for the presentation of text.

Image
Single column tables of White, Plain Black, and Shamrock colours from the University of Southampton brand. They are presented alongside the full set of brand colours. White has seven possible brand colours with which text can be presented whilst meeting minimum or enhanced levels of accessibility, Plain Black has eleven, Shamrock has none.
Figure 2: As well as helping us to find accessible colour combinations, we can assess which colours give us more flexibility in terms of accessible combinations and which colours from our brand we should avoid entirely

 

Adding a feature to view all brand colour combinations with sufficient contrast helped those who were less familiar with the brand to find a combination that worked for their purpose.

Image
Three examples from a long web page showing all colour combinations from the university brand that have sufficient contrast for the presentation of text. This is expressed in the form of tables showing the foreground and background colours and their HEX codes, an example piece of text using those foreground and background colours, the contrast ratio, and the WCAG rating of AA for the minimum level or AAA for the enhanced level
Figure 3: Scrolling through examples of brand colour combinations with sufficient contrast can be easier than navigating a large table

 

A table of colours you can use is useful, but it can be more useful to view examples.

Limitations and uses of the colour matrix

Using such a matrix is most effective when you have an older brand created without accessibility in mind.

Here are five projects helped by using the matrix – creating:

  • the colour scheme for an accessible, on-brand PowerPoint template
  • a dark mode, using brand colours
  • an accessible on-brand theme for a virtual learning environment
  • a colour scheme for an infographic
  • recoloured illustrations to align with our brand.

How to reduce ‘choice overload’

To reduce potential “choice overload”, share a small set of brand colours with sufficient contrast to avoid content creators having to navigate the full range of choices. The brand accessible colour suggester (Figure 4) offers an accessible colour combination from our brand. It picks a random text colour, and three colours for graphical objects, all of which have sufficient contrast to a randomly chosen background colour.

Image
With the press of the Randomise button a set of five colours are chosen at random for background, text and three graphical objects. As well as display on screen, the colour codes, contrast ratios and WCAG ratings are explained to the user
Figure 4: Randomly choosing a set of brand colours with enough contrast may help those who find the entire palette hard to navigate

 

This allows content creators to keep selecting the “randomise” button to explore sets of colours they may wish to use. This has proved effective for creating on-brand colour schemes for infographics.

Making accessibility simpler and more approachable

Accessibility can seem complex to those starting their design journey. Universities can help to build awareness and change practice. Creating simple tools such as these for colour contrast is an example of how we can remove complexity and make it easier for our colleagues to create accessible content.

Matthew Deeprose is senior learning designer at the University of Southampton.

If you would like advice and insight from academics and university staff delivered direct to your inbox each week, sign up for the Campus newsletter.

Standfirst
Accessible content is better content. One way to boost accessibility in visual materials is paying attention to colour contrast during the design process. Here’s a tool to make that simpler

comment1

THE_comment

1 year 4 months ago

Reported
True
User Id
352805
User name
jr4014
Comment body
Always excited to hear and see of new ways to consider accessibility into my content, thank you. The nuance of visual overload it also really tricky to slice through. Starting to research these elements in multiple contexts at the moment.
jwt token
eyJhbGciOiJIUzUxMiJ9.eyJuYW1lIjoianI0MDE0IiwiZW1haWwiOiJqcjQwMTRAYnJpc3RvbC5hYy51ayIsImlkIjoiMzUyODA1IiwiaWF0IjoxNjg4NDU0NzI0LCJleHAiOjE2OTEwNDY3MjR9.mhErBt8SOkJFpJUIoOKE3gw--V4oqquRqy4lGGc2zz3ykoY5mc56-7K6KwE1rsOzNybaq1USlVD8VMUYFR8H-g
Reviewed
On