WebAIM - Web Accessibility In Mind

E-mail List Archives

Retrofitting graphics for colorblind accessibility

for

From: Chase, DJ
Date: Aug 15, 2023 9:41AM

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.