Traffic Lights Out, Accessible Dashboards in!

The RAG (Red, Amber, Green) colour scheme has long been a favourite in Business Intelligence tools like Power BI for visualising performance metrics. It’s simple, intuitive, and instantly recognisable, borrowed from the universally understood traffic light system that originated in the 19th century. While effective for many, this approach may unintentionally exclude a significant group of users: those with colour blindness.

The Challenge: Colour Blindness in Data Visualisation

Did you know that approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) worldwide are affected by colour blindness? The most common form, red-green colour blindness, makes it difficult for individuals to differentiate between these two colours. For users with this condition, a classic RAG-based visualisation can be confusing, ambiguous, or even completely unusable.

Now, imagine relying on a dashboard that fails to communicate critical information effectively, all because of colour choice. I’ve experienced this first-hand. In the past, I designed simple data visualisations using only RAG colours, unaware that the main user of the report was colour blind. He didn’t mention it until six months later, after routinely needing my help each week to interpret the visuals and make decisions. It really hit me how even something like choosing the right colours can make a big difference in accessibility and productivity.

The Solution: Better Design Through UI and WCAG Principles

Fortunately, we can improve accessibility by making smarter design choices. By adopting UI design principles and the Web Content Accessibility Guidelines (WCAG) framework, we can ensure that our data visualisations are inclusive and effective for everyone.

Here are some ways these guidelines can help.

1. Watch the contrast!

To keep things clear and readable, WCAG suggests having a good contrast ratio between text (or visuals) and the background. Going for the widely accepted AA level of compliance is a smart move. This means having a contrast ratio of 4.5:1 for body text and 3:1 for larger text (14-point bold or 18-point regular). For graphs and icons, a contrast ratio of at least 3:1 is recommended.

2. Avoid Colour-Only Indicators

UI design best practices suggest combining colours with additional visual cues such as icons, shapes, or text labels. For example, instead of relying solely on red, amber, and green, you could pair them with symbols or icons.

3. Select Accessible Colours

Accessible colours are combinations with sufficient contrast to make layered elements, such as text or icons on a background, clearly distinguishable for individuals with visual impairments or colour vision impairments.

Additionally to colour contrast you can also run a colour blindness simulation. Tools like Adobe Colour Blindness Simulator can help you choose palettes that are both effective and accessible.

Tips on Improving RAG Visualisations

Let’s say you’re designing a KPI dashboard in Power BI. Instead of default RAG colours, you could:

• Use high-contrast colours, like blue for positive performance and orange for warnings, with accompanying text labels.
• Incorporate icons or shapes (e.g., checkmarks, exclamation points) alongside colours to provide additional clarity. If displaying line charts, also use different line strokes to differentiate the series.
• Give users the flexibility to toggle between colour and text-based visualisations or switch between different colour themes, empowering them to customise how they interpret and interact with the data.

Below you can see an example of using alternative RAG colours: dark blue (HEX code #12239E) for ‘Good performance’, cyan (HEX code #118DFF) for needs improvement, and orange (HEX code #E66C37) for ‘Bad Performance’. The chart includes a legend indicating the meaning of each colour. When we simulate these alternative RAG colours for the three types of colour blindness, it’s straightforward to identify the three different colours and their meanings.

If you are a Power BI developer or enthusiast, I would like to invite you to watch my session “Implementing Alternative Accessible Colours in Power BI Reports.” and “Beyond Red, Amber, Green: Building Colour-Accessible Dashboards.”

In these sessions, I explore the built-in accessibility features of Power BI and delve into WCAG regulations concerning colour use. I’ll demonstrate how you can start building an accessible colour palette using Adobe Colour Wheel – Accessibility Tools. Additionally, I present a solution that empowers end-users to toggle between standard and accessible views for a more inclusive reporting experience.

Watch the recording here, and stay tuned for updates on my upcoming sessions.

It’s time to rethink how we use RAG colours in data visualisations. Small design changes, guided by accessibility principles, can have a big impact on usability and inclusivity. Together, we can build dashboards and tools that empower everyone to access, understand, and act on data.

Thank you for joining me on this journey. Until next time, let’s keep crafting accessible insights that make a difference!