Improving Colour Accessibility for Students with Colour Deficiency

Image CC by Johannes Ahlmann

Did you know that approximately 1 in 12 men is colour blind? Colour blindness — or more accurately, poor or deficient colour vision — can affect a person’s ability to distinguish between certain colors, usually greens and reds, and occasionally blues. Because colour vision deficiency reduces the number of color dimensions, it can be difficult for colour blind individuals to distinguish between certain colors. To improve colour accessibility of course content, it is important to ensure adequate colour contrast and not rely on colour alone as a means of conveying information.

Colour blind friendly alternatives

Use sufficient colour contrast

Effective contrast can make the text easier to read and images easier to see for all students. To ensure text is readable it should pass accessibility guidelines based on the combination of text colour, background colour, and text size. Test contrast using the WebAIM colour contrast checker.

Colours used to convey information on diagrams, maps, and other types of images must also be distinguishable from the background. To ensure adequate contrast use a combination of light and dark background and foreground colours.

Color combinations to avoid for people with color blindness include:

• Red & green
• Green & brown
• Green & blue
• Blue & gray
• Blue & purple
• Green & gray
• Green & black

If you absolutely must use one of these combinations, adjust the contrast, making adjusting the shades so one is extremely dark, and the other extremely light.

Use colour with another cue to show emphasis or differences

Image source Smashing Magazine

Do not rely on colour alone to communicate meaning. Different patterns and textures can help colour-blind people further distinguish between different elements in charts and infographics.

Use color plus another element to emphasize a point or visually distinguish information differences. Emphasis elements include:

• Bold
• Size
• Patterns or shapes

For more information on improving the accessibility and data visualization, visit Penn State’s Charts & Accessibility web page.