Skip to main content

BBC charts great accessibility practices

A man with a wide-eyed, shocked, and confused expression stares directly at the camera, positioned to the right of a horizontal bar chart. The chart, titled "Trump’s handling of Iran conflict," uses a colour-coded system of orange and green to denote disapproval and approval, which can be difficult for those with colour vision deficiency (CVD) to distinguish.

Accessibility isn’t about getting it right the first time every time; it’s about the vigilance to fix it when you don’t.

I was recently reviewing a BBC News article regarding public opinion on US military action, and it provided a perfect real-world lesson in digital accessibility. As someone with Colour Vision Deficiency (CVD), I initially struggled with the first version of their chart (orange and green, I think, as I am genuinely not sure). On my laptop, the colours were just about distinguishable but lacked strong contrast. However, when I switched to my mobile, the reduced graphic size and screen settings caused the two colours to "bleed" into one another, making the data nearly impossible to decode at a glance. The chart key referring to the colours in the bar chart did not provide the information in a way I could understand.

I was prepared to write a post about these common pitfalls, but then something great happened: The BBC updated the graphic. They pivoted to a new colour palette (orange and purple) with significantly better definition and contrast.

In my opinion, this is the essence of great digital accessibility. We are all prone to making mistakes in this field — even those of us who work in it every day. True accessibility requires constant vigilance and a willingness to iterate. 

The BBC team clearly spotted the issue and fixed it quickly rather than ignoring it. Kudos to them for that proactive approach.

Relying on colour alone to convey information is, of course, a significant barrier for users like me. However, in this case, adding patterns or hatches to differentiate the bars would not have been the right alternative, as complex textures would likely degrade the legibility of the percentage text overlaying the graphic. A different compromise was needed.

In the spirit of continuous improvement, I believe a few small tweaks could make this even more robust for CVD users. For example, adding a thin white dividing line between the two coloured bars would provide a clear visual break, preventing the colours from bleeding into each other. While there isn't room in every bar, adding the word "disapprove" after the 61% label would also give users the key they need to decode the rest of the graphic without relying solely on colour. 

I also noticed that in the updated legend, they used black text on an orange background, but kept white text on the bars themselves. Consistency is key here. Orange is notoriously difficult to work with; contrast checkers often demand black text, but in my experience, that combination can make text look dirty and harder to read. Personally, I find the white text clearer, but regardless of the choice, the graphic and the legend should ideally match to help the user map the information quickly.

These suggestions are really not a criticism. They are offered in the spirit of helping everyone understand a perspective they might not otherwise see. If you do not have CVD, these nuances are easy to miss.

After all, sharing knowledge leads to greater understanding — as does well designed charts.

Article by Simon Leadbetter

The Accessibility Guy at Kindera

Simon Leadbetter