E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Chase, DJ
Date: Tue, Aug 15 2023 9:41AM
Subject: Retrofitting graphics for colorblind accessibility
No previous message | Next message →

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.

From: Nick Bromley
Date: Tue, Aug 15 2023 2:49PM
Subject: Re: Retrofitting graphics for colorblind accessibility
← Previous message | Next message →

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

From: Chase, DJ
Date: Thu, Aug 17 2023 7:50AM
Subject: Re: [Athen] Retrofitting graphics forcolorblindaccessibility
← Previous message | No next message

Thank you both; this is very useful insight. I shall have to look into the luminance difference in 1.4.11 Non-Text Contrast and create guidelines for contrast and area.

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

From: athen-list < = EMAIL ADDRESS REMOVED = > on behalf of Stager, Catherine < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, August 16, 2023 13:56
To: Access Technology Higher Education Network
Subject: Re: [Athen] [WebAIM] Retrofitting graphics for colorblind accessibility

[You don't often get email from = EMAIL ADDRESS REMOVED = . Learn why this is important at https://aka.ms/LearnAboutSenderIdentification ]

ATTENTION: This email is from an external source. Do Not click on any links or open any attachments unless you recognize the sender and know the content is safe. To report a suspicious email, please use the new phishing alert button in outlook

Seeing the London subway map may help offer clues. https://tfl.gov.uk/maps/track/tube
Harvard has a very nice resource as well... https://huit.harvard.edu/news/creating-accessible-charts-and-graphs .