WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible Infographics Colors?

for

From: Cliff Tyllick
Date: Mar 9, 2015 11:31AM

David, in pie charts and comparable graphics, people with color deficits need to be able to tell the difference between a region that represents one subset of the data and any other region representing any other subset of the data. So these are options to consider:
—maintaining adequate contrast between all possible color pairs—not just adjacent colors. If you choose black, white, and a third color, the highest contrast possible between that color and either black or white is 4.69:1. If you choose black, white, and two other colors, the highest contrast ratio possible between any pair of most similar colors is 2.80:1. Technically, WCAG 2.0's thresholds don't apply to anything but text. As a practical matter, I still like to have contrast ratios of 3.0 or higher. Scientifically, as the size of each respective region increases, the easier it will be for anyone to tell one region from another at any given level of contrast.
—displaying text labels and the corresponding values over or next to each region.
—adding textures or patterns to further distinguish the regions from one another.

Of course, the busier you make the graphic, the more trouble it will present to people with certain forms and degrees of cognitive disability.

I used to think halos would help distinguish areas that otherwise have too low a contrast. WCAG doesn't seem to rule that out, but I don't think we've had adequate input from people who have formally studied color perception in humans. A former colleague who has studied that area informed me that a halo blurs the edges of the regions, which actually makes it harder to perceive and interpret smaller regions. Furthermore, the real question isn't whether I can tell where one region ends and the next begins, but whether I can tell which region is which. When the colors are too similar to tell apart, a border or halo tells me the boundaries of the regions, but not which region is which.

My € 0.02 worth. :-)

Cliff Tyllick

Sent from my iPhone
Although its spellcheck often saves me, all goofs in sent messages are its fault.

> On Feb 8, 2015, at 3:17 PM, Jonathan Avila < <EMAIL REMOVED> > wrote:
>
> Understanding SC 1.4.3 provides some good advice on the topic:
> http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
>
> Basically, even though SC 1.4.3 does not require sufficient contrast in this situation it is advised to provide good contrast. This can be met a number of ways and using lines/halos etcetera is one method. As others have pointed out SC 1.4.1 Use of Color does apply to labels, line, patters, etc. would be needed to make the information visually accessible to people with color perception challenges. Once again there are many ways to meet each success criteria and some methods are better than others.
>
> If the infographics contain a lot of text there could be a strong case for SC 1.4.5 Images of Text. I have seen some good examples of info graphics done up as text using CSS and images -- so in some situations the technology does allow for this.
>
> Jonathan
>
>
> --
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> <EMAIL REMOVED>
>
> 703-637-8957 (o)
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
>