Colour accessibility and colour blindness

Intuition

If your interface says “the red ones are errors” and a user cannot tell red from green, the message never arrives. The fix is to say it twice, in two different ways.

Colour helps performance, affect and attention, until it carries the message alone

The lecture says colour is valuable for screen design: performance, affect and attention all go up. The risk is that about 2.2 billion people globally have some type of visual impairment, and it is challenging if information is portrayed by colour alone. Colour accessibility is designing digital content so it can be used effectively by people with various forms of colour-vision deficiency, and it separates good designs from bad.

The widely stated prevalence is for Europeans: about 8% of men and 0.5% of women (Birch, 2012). The slides on types of colour blindness are images and did not extract, so the named types are not listed here.

The designer is not the user, so test and add redundancy

The key challenge is that the designer is not the user. The lecture lists tools: the Coblis colour-blindness simulator, Toptal’s colour filter, the TPGi colour contrast checker, the WebAIM contrast checker and a Figma contrast plugin.

Exam detail

What to do: be aware; design in black and white and add colour sparingly; include more than hue to code differences, such as brightness and additional interface differences like outlines; add other (redundant) cues; avoid red and green combinations; allow users to control colour coding; use colour consistently across the system.

Tog’s principles: whenever you use colour to convey information, also give clear secondary cues. Test your site to see what colour-blind users see. Do not avoid colour just because not every user can see every colour. Do not strip colour cues away because of a passing graphic-design fad.

Accessible colour is both good practice and a legal requirement

Accessibility laws worldwide mandate accessible colour use, including the Americans with Disabilities Act (ADA), the European Accessibility Act (EAA), the Accessibility for Ontarians with Disabilities Act (AODA) and the Web Content Accessibility Guidelines (WCAG). Accessible colour also benefits older adults with age-related vision changes, people on low-resolution screens, and people in bright sunlight or dim light.

The lecture also notes colour is complex because meanings vary across culture, nation and gender, citing the Color-Culture Chart (Boor and Russo, 1993, via Barber and Badre, 1998). The chart itself did not extract.

Pitfall

Tog warns against both mistakes: relying on colour alone, and abandoning colour because some users cannot see it. The right answer is colour plus another cue.

Optional aside

The lecture’s before-slides on this deck are the Week 10 demonstration and poster submission rules. They are admin, not examinable content.

Recall

What is the safe way to use colour to convey information?

Use colour redundantly with another cue such as a label, pattern, icon, outline or brightness difference.