WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Retrofitting graphics for colorblind accessibility

for

From: Nick Bromley
Date: Aug 15, 2023 2:49PM

One side effect you should consider is the potential for regular lines/patterns to trigger visual disturbances, particularly if they also involves high contrast. In severe cases, it can trigger migraines and possible even seizures.

Here's some old UK guidance for TV broadcasters on pattern usage (includes reference to static and moving images): https://www.ofcom.org.uk/__data/assets/pdf_file/0021/16248/gn_flash.pdf

I thought I'd seen some more recent/extensive guidance but I can't find it now, and maybe I'm mistakenly thinking of something else.

- - -
Nick Bromley
Director & Accessibility Consultant
Red Kite Digital Accessibility Ltd

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Chase, DJ
Sent: Tuesday, August 15, 2023 4:42 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >; <EMAIL REMOVED>
Subject: [WebAIM] Retrofitting graphics for colorblind accessibility

Hi All,

I was wondering if anyone has experience making color-coded maps and graphics accessible to colorblind people. I'm working on a system now inspired by heraldic hatching [1], so any experience or feedback would be greatly appreciated.

[1]: https://en.wikipedia.org/wiki/Hatching_(heraldry)


= Current system
The problem is that one cannot use color alone to covey meaning because many people are color blind. In most situations, this can be resolved by adding text or symbols, but that technique does not work on dense maps and other graphics, which often rely on color and value alone. I believe the solution to this is to overlay patterns on the colors, as that can be done in a way that doesn't interfere with text, borders, or icons.

My current system is based on heraldic hatching, but simplifies it and extends it so that it is both intuitive and can represent as many colors as you need it to.

The idea is to use the RYBK (red, yellow, blue, key (darkness)) color system that has long been in use when mixing paints. I chose this over other systems because it is both:
• Somewhat commonly understood
• Adding more K lines makes a color darker both in representation
and in fact.

Bellow is a table of my ideas for the color patterns:
Red (R): │ (vertical lines)
Yellow (Y): ╱ (diagonal lines going northeast to southwest)
Blue (B): ─ (horizontal lines)
Key (K): ╲ (diagonal lines going southeast to northwest)

This can be remembered because they start with a vertical line and then proceed clockwise.

The nice part is that this can be expanded to as many colors as you need by combining R, Y, and B patterns (rough version below):
Red: ││ (two R lines)
Orange: │╱ (an R line and a Y line)
Yellow: ╱╱ (two Y lines)
Green: ╱─ (a Y line and a B line)
Blue: ═ (B lines)
Magenta: ┼ (a B line and a R line)

Note that I've doubled up pure red, yellow, and blue above so that every pattern starts with the same actual darkness. This is important in situations where value is also used to convey information, but does not have to be done if value is not used.

To create a darker shade of a color, one can simply add more K lines to it. This can be used to create as dark of a shade as needed.

== Notes =
One important thing to note is that this does not have to be used as complexly as I've demonstrated here. If you just have a red and orange map, then it might make sense to just use the red and yellowpatterns, as that is a close enough approximation. The only reason I made this system capable of expressing any shade of color is for situations where specific hues do matter.

Also of note is that one *could* use their own patterns. My idea with creating a set of standard patters is that it could aid users when authors forget to specify the pattern being used. For example, in the situation where a page has a color-coded map or other graphic and a text-based analysis of the graphic, the author might occasionally forget to mention the pattern ("As we can see, the red areas...").
Having a standard pattern code for colors used across the site or across multiple sites would increase the chances that a colorblind user would be able to associate the correct pattern with that color, which would allow them to know which areas the author was talking about.

Cheers,
--
DJ Chase
Digital Accessibility Specialist, NECC
They, Them, Theirs
+1 978 556 3794

PS: Apologies if anyone gets this twice. I had issues sending it which I'm not entirely certain were resolved.