Graphs have been around for ages and online there have been many different ways that developers have attempted to display this information by using the most effective, semantic markup while also insuring that graphs remain accessible.

But what about the visual presentation of a graph? With particular attention focussed on colour blindness, what are best practices with regards to what colours can be best distinguished from each other when placed side-by-side in a bar chart, a pie graph or a simple line graph?

Let’s think of a few colour combinations and figure out:

Are there key colour combinations we should stick to?

Are there key colour combinations we should avoid?

Does it really matter? Do most graphs turn out OK with most colours?

I will use the Colour Contrast Analyser tool to simulate three common forms of colour blindness.

Protanopia

A more common form of colour blindness. These people lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum

Dueteranopia

Lack medium-wavelength retinal cones and are therefore also unable to distinguish between colors in the green-yellow-red section of the spectrum.

Tritanopia

A very rare blue-yellow colour blindness.

Let’s have a quick look at Eric Meyer’s CSS Vertical Bar Graph example. I have visited this page many times in the past while exploring different ways to create a graph using CSS. How does it rate when we run a portion of this graph through our simple colour blindness simulation?

Protanopia (occurring in between 1% and 5% of males) seems to work, but it is not exactly as ideal a colour contrast as it could be. Much more obvious though, is the dueteranopia example that is barely distinguishable between the two colours.

Only Tritanopia seems to pass this test… so what can we do to make things easier for those that are colour blind in general?

A quick answer could be

Run many colour combinations through this test

Evaluate the results

Come up with a quick reference chart or a standard of colour combinations that will work

Rating these colour combinations

Running each colour variety through the simulation, then visually judging whether the colour combinations work seem to be the best way to go for this test.

Using colours for bar charts and graphs is quite different to having text on a background colour, as many colour contrast tests seem to base their results on.

With a graph, we usually have a minimum of three colours being applied (two contrasting colours and the background colour they sit on) and graphs are usually much bolder and more obvious than your standard font sizes on the web.

I would like to build a Colour Contrast Chart for Colour Blindness to see if I can come up with something that can be a quick reference for this kind of problem. Will this be useful? Well, we can only build it and see if it helps or not.

If you would like to contribute or comment on the progress or effectiveness of this chart, please feel free to comment on either page. I would love to hear if this sort of chart would be useful to anyone or if there are any inaccuracies in the actual implementation of this sort of test.