The BBC online football section uses colored status icons to display the results of the last 10 matches. The red and green used are indistinguishable from each other, making that part of the table rather useless for the colorblind.

BBC Online Football Tables

BBC Online Football Tables

The BBC online football section uses colored status icons to display the results of the last 10 matches. The red and green used are indistinguishable from each other, making that part of the table rather useless for the colorblind.

The table in question shows the standings of each team in a certain league. A ‘last 10 matches‘ column with the results of the last 10 matches played is displayed for each team.

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.

A legend is 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 only adds more clarification. Being clear is good, it removes any doubt you could have reading the table.

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

beforeafter

The red and green don’t have enough contrast between them, the icons are very small, way too small, making it impossible to see the difference to the point that a colorblind user does not even know there are 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 is used as the only source of information. There is nothing else, no hints, no tricks, nothing. The only clue you have is the legend, but that just adds to the frustration. It yells ‘there are three colors here, but you can only see two!’ at you (while also making obscene gestures).
It’s rude, it’s unusable; it’s the number one frustration for the colorblind. You know there is something there and you know it’s useful, but you cannot see and thus use it.

*

Comments

  1. Nathan

    I had to zoom in 250% and then lean in to my computer screen to tell the difference. Why not just a check for a win, an “x” for a loss, and a – for a draw?

  2. Henny Swan

    First up great website and great resource. Colourblindness tends to slip down the list so having a site that explains the issues and gives constructive criticism is helpful.

    I work at BBC and the league tables have been the subject of much discussion. The team have tried several alternatives to improve readability with various degrees of success – and by that I mean what may work really well for one group may downgrade the experience for another.

    We tried replacing the colour blocks with ‘W’, ‘D’ and ‘L’ however these did not fare well when user tested as the table became cluttered and difficult to read.

    Since June we have had title text in place so that when you mouse over a colour you see the text ‘Win’, ‘Draw’ or ‘Lose’. We know this is not 100% full proof as there is an edge case where a user may have the type of colorblindness that affects reading this particular colour combination AND may not be able to use a mouse but we felt this would be minimal (if an issue at all).

    As such we are still looking at this. There have been further potential solutions but we’re having to balance readability across the board and usability into the mix as well. Any comments of suggestions are welcome.

    • Thomas

      I realize this post is old but the offending page appears to be in place still so I’ll take a shot.

      Instead of having the same horizontal bar shape for each type of result why not have a tall bar for a win, a horizontal bar for a draw, and a descending bar for a loss?

      Look at Tufte’s work with sparklines to get an idea.

      Here’s an example: http://media.juiceanalytics.com/images/SparklineGallery.png

      In particular the bottom left “win/loss” chart. You’d have to modify it a bit but it should cover every use case.

  3. Aaron

    Yeah this one is pretty great. That chart as it currently exists is useless to me :)

  4. Matt Doar

    You can leave a comment for the BBC about this at
    https://faq.external.bbc.co.uk/templates/bbcfaqs/emailstatic/emailPage?entryID=&id=LBA590UKOQ8RNL6HS8I73TI170&moduleID=

    They do a really good job of accessibility otherwise.

    • Tom van Beveren

      Yeah, they have a dedicated accessibility team. I’ve contacted them in the hoped they will fix it :)

  5. Andi

    A simple solution might be to change the dashes to mini-bars, retaining their current colours. A tall green bar, a medium grey bar and a short red bar.

  6. Jeroen Hulscher

    Very nice example, good to see it in a high traffic website with…let’s say a very large influence on people’s lifes :)

    Keep ‘m coming!