Last year, while visiting a museum, my eyes beheld a ghastly sight.
Not from any one exhibit, but from the gallery map I had picked up in the foyer.
To my dismay, the headings were printed in bright yellow on a white background. This low colour contrast caused great difficulty for me (and I imagine many others) to read the text.
Most people only notice colour contrast when there isn’t enough. And what might be a mild annoyance for one reader can be an inaccessible obstacle for another.
Inclusive design means accommodating for everyone's needs.
Your designs can’t just align with the societal average.
Making text and graphics understandable for those with low vision impairments also improves the viewing experience for everyone else.
For words to be sufficiently legible for sighted people, a contrast ratio of 4.5:1 is recommended. This is a calculation which compares the relative brightness of a foreground and background colour.
Don’t worry, you never have to calculate this yourself. I highly recommend this Contrast Checker tool, which lets you select any pixel on your screen for comparison.
Black text on a white background has a whopping 21:1 ratio! Very legible.
The recommended contrast ratio for large text and graphical objects (e.g. arrows, buttons, bullets) is the bit more forgiving 3:1.
Unfortunately for that museum map, anything which could be classified as ‘yellow’ is very difficult to use on a white background. The best ratio I could find was 2:1. Not even suitable for a bullet point.
Finding a darker shade tends to leave you with a muddy brown, or gold at best. But to all the yellow enthusiasts out there, don’t be disheartened. Yellow makes an excellent background colour for dark text, and yellow text can be used to great effect on a black background.
Photographs also fall susceptible to poor text contrast
Rather than a flat colour, the words often contend with varying shades of high and low brightness.
Think of the relatively dark greens of foliage contrasting with a bright blue sky. Or a sea of multicoloured clothes in a crowd photo.
Definitely avoid placing text directly on a zebra.
Do not fret; your favourite photo can still be given the spotlight. The text placement just takes a bit of thought and consideration.
Here are some common practices designers use:
1. Look for an area of the photo with no/reduced visual noise. Often this can be the sky, but any spot with uniform colour will suffice.
2. Subtly darken or lighten the photo to increase contrast with text. Sometimes a gradient fade may be employed, so only the area behind the text is changed, leaving the photo’s subject as bright as ever.
3. Place text in an opaque or semi-transparent box. This is especially recommended for larger paragraphs.
the monochromatic colour-coded chart
The final cautionary tale I have for you is that of the monochromatic, colour-coded chart.
If you have never encountered such a monstrosity before, consider yourself lucky. Puzzling out the relationship between the slices and the labels is a futile guessing game which will leave you mentally exhausted and none the wiser.
This can happen when a brand’s colour palette is very limited. Sometimes unintentionally when a colourful chart is printed in greyscale. Or perhaps when a data analyst has a strong obsession with their favourite colour.
Whatever the case, the result is confusing for most sighted viewers, and downright inaccessible for those with a vision impairment.
Colour blindness, also known as CVD (colour vision deficiency), affects approximately 1 in 12 men and 1 in 200 women. Easy to distinguish colours for one viewer can be just as difficult to parse as the above example for someone with CVD.
Because of the prevalence of deuteranopia, commonly known as red-green colour blindness, colour coding with red and green should be avoided when colour is the only differentiating factor.
In a chart, you can use roughly 5 colours maximum for each to be sufficiently distinct (following the 3:1 ratio recommendation).
For larger amounts, the following improvements are recommended to make the chart more inclusive:
- Directly label the segments
- Provide a legend, such as icons or numbering, to visually connect segments to labels
- Use patterns rather than flat colours to represent different segments
Not only are you accommodating for viewers who require inclusive design, but these changes will benefit any viewer who may be situationally affected.
Low-brightness projectors, old devices, or greyscale prints are all examples of situations where contrast is reduced.
Starting with a high baseline benefits all viewers.
You can make a difference by utilising inclusive design in any work you do
Whether it be a PowerPoint in the office, an invitation to friends, or even a Post-it note for a colleague (maybe don’t use the black pen on dark blue paper), it all makes a difference.
I hope you can now be more conscious of accessible colour combinations, and call out poor contrast when you see it.
Remember the museum I mentioned at the beginning?
After my visit, I filled out a feedback form identifying the low legibility of the map. Not as a scathing criticism, but in the hope that my voice will be an additional data point in favour of inclusive design for all.
I recently revisited the museum and was delighted to see that their maps had been updated to a much more legible orange. My eyes, and those of many other museum visitors I’m sure, were very grateful for the change.
