BBC Online Football Tables

The BBC online football section uses colored status icons to display the results of the last matches. The red and green used to be indistinguishable from each other, but not anymore!

Works for the color blind
  • Color Combinations
  • Reviewed June 2012
  • Last updated April 2019

The BBC used to use colored status icons that were not usable for the colorblind. Since then, the tables have been updated to be more accessible to the colorblind.

The BBC online sports section covers the match results for several leagues & cups. These results are presented in a table that lists the current standing of each team.

Among the matches played and the points earned, the table shows how many matches in total were won, drawn, and lost. A quick recap of the last 5 match results for each team are also displayed as status icons.

Part of the Premier League results table on the BBC Sports website  

This is a very useful feature, it adds value to the table by giving you a quick insight into the history of that team. It tells the story of how they got to the position they’re in right now, while also acting as a reminder of the matches you might have watched.

In 2012, these tables used colored status icons to display the results of football matches. Only red and green were used and were are indistinguishable from each other, making that part of the table not usable by the colorblind.

Old version of the BBC Football Table
Back in 2012, the colorblind could not see the difference between the red and green used

Since then, the BBC has updated these tables to be more accessible. The last 5 match results are still displayed as status icons, but increased in size and now also display an explaining character: a green W for a win, a red L for a loss, and a grey D for matches that ended in a draw.

This is a simple but huge improvement from the way the table was displayed before. 

Left: the old icons (2012) — Right: the new icons (2018)

Contrast
The contrast between the red and green in increased. From the old 1.34 ratio which failed all standards to a little better ratio of 2.14. This still doesn’t validate the standards for good contrast, but at least it’s an improvement from before.

Size
The icons are bigger. From the very small 11 by 4 pixels to a bigger 36 by 36 pixels. It’s easier for the colorblind to tell the difference between two colors the bigger those colors are.

Information 
Before, the only information you could use was color. The addition of the W, L, and D characters allow users to use two points of information to understand the icons. The colorblind no longer have to use just color.

Review of old (2012) situation

In 2012, the table in question showed a ‘last 10 games‘ column with the results of the last 10 matches of each team.

before

A legend was shown above the table explaining the colors used. While you could argue that explaining red is a loss and green being win is a little overkill, it did add more clarification. Being clear is good, it removes any doubt you could have reading the table.

However, doubt and pure frustration were guaranteed for colorblind visitors trying to use this portion of the table. The red and green were indistinguishable from each other in the table and from the table to the legend above it.


The red and green didn’t have enough contrast between them, the icons were very small—way too small—making it impossible to see the difference to the point that a colorblind user often did not even know there were three colors used in the table.

Only when zooming in at 3200% using photoshop was I able to see the difference between the colors. But not at normal size, not so close together without any other clarification.

Color was used as the only source of information. There was nothing else, no hints, no tricks, nothing. The only clue was is the legend, but that just added to the frustration. It yells ‘there are three colors here, but you can only see two!’ at you (while also making obscene gestures).

The table was rude, and unusable. You know there is something there and you know it’s useful, but you cannot see and thus use it.