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.


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.



  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:

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

    • Dee

      Hey, that’s the grtsaete! So with ll this brain power AWHFY?

  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

    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.

    • Faiz

      Tip top stfuf. I’ll expect more now.

  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!

    • Leticia

      4 يونيو 2008 11:42 م بواسطة salehcomedy عشت طيلة حياتي ابحث عن بداية لتعلم اللغه الانجيزيه ومع كثرة بحثي وجلوسي امام النت بالساعات الحمد لله اني عثرت علي ضالتي واتمني لكم جزيل الشكر واتمني ان تمدوني بكل الخبرات التي استطيع ان اتعلم منها واستقي منها معلوماتي وجزاكم الله خير الجزاء مع الشكر والتقديروالاحترام صالح كوميدي