Improving the traffic light system for colour blindness

[K-Meech]

Which Section of the Documentation Needs Improving?

The sections involving red/orange/green traffic lights such as the home page / pages for linting, packaging etc..

What Can be Improved About This Section

The traffic light system provides an easy to understand ranking of the different options, but presents some issues for people with colour blindness. The most common type of colour blindness (red / green) would make it difficult for people to distinguish the red/green traffic lights on colour alone, and other colour blindness types could make it difficult to distinguish all of them.

How to Improve This Section

In the tables of ranking (for example the linting one) - would it be possible to provide another way to distinguish the categories? For example, text indicating the different groups, or potentially having the traffic lights as different shapes (like a green tick, red cross...).

[samcunliffe]

I pinged UCL's Digital Accessibility team. They are going to take a general look at our pages, but in the meantime, they had some specific, signposted suggestions for this.

To answer specifically about the traffic-light indicators, the most accessible approach would be to include descriptive text as well, as best practice is to avoid having colour/shape/size as the sole means of conveying information, and using plain text is the safest way to ensure screen readers can also access it.
[...]

Our team has published guidance on visuals and use of colour, which discusses what to avoid in colour schemes, but I'll just drop in a few more links about colour and accessibility with specific suggestions included:

• Visualising Data has several ideas (including alternative colour schemes to RAG on designing data visualisations for colour-blindness
• UX Collective suggests using contrast and/or colour temperature to distinguish between reds and greens

In particular the second link has a few nice images.

Here's a good illustration of the problem:

Here's a nice option:

---

So a couple of options spring to mind...

1. Stick with emoji only but make them not be traffic light colours: ✅ ➖ ❌
2. Stick with emoji and traffic light colours but add shape: 💚🟠⛔️
3. Another set of emoji that are not traffic lights: 🙂😐☹️ or 👍👌 👎
4. Go with something like above: colours in the background of cell of the table, but also include a word describing our opinion: "Best", "Good", "Avoid"

Though technically the most fiddly (we'd have to do some CSS 😱 ) I wonder if option 4 is the best because we can use a word in plaintext

best practice is to avoid having colour/shape/size as the sole means of conveying information

And for us "amber" is actually an OK tool:

We don’t discourage using this, but it may duplicate functionality of a green tool.

So it's more of a "Best", "Good", "Avoid" kinda situation.

[samcunliffe]

I've been playing around with what JustTheDocs already provides.

Unfortunately labels which look really nice, need a newline so can't work in tables.

Here's a go with some custom HTML span, but... it doesn't play nicely with themes like I'd have hoped...

Screen.Recording.2025-04-11.at.15.41.49.mov

[paddyroddy]

Though technically the most fiddly (we'd have to do some CSS 😱 ) I wonder if option 4 is the best because we can use a word in plaintext

Why is that the best? I would prefer emojis and would work better in dark mode

[samcunliffe]

Well, "Best" == most accessible, because that's what the accessibility team said...

the most accessible approach would be to include descriptive text

But I think the point is: there's a plaintext thing that will appear if all emoji fails to render or can't be handled. (Like in screen readers for sight-impaired people)

[samcunliffe]

@all-contributors please add @K-Meech for bug, a11y, review

[allcontributors]

@samcunliffe

I've put up a pull request to add @K-Meech! 🎉