WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible Infographics Colors?

for

From: John Foliot
Date: Feb 6, 2015 4:51PM

david kaplan wrote:
>
> I some questions about infographics (pie charts, bar charts, etc) and
> color accessibility. Are there any guidelines or articles that you know
> of on how to make the colors in these cases accessible?
>
> What are the specific instances when the colors need to be accessible
> in a chart? For example, in a pie chart, do the colors need to be
> accessible against each other so that each slice's color contrasts
> properly against the color of the neighboring slice? Or would it be
> sufficient to just have a white (or other contrasting color) border
> between each slice?
>
> Textures and patterns are certainly an option. But, for now, I'm more
> concerned about colors and contrast.

So... interesting question.

Sadly, color contrast requirements in WCAG 2 are limited to TEXT and/or
images of text, and do not specifically extend to other visual data that is
used for key information delivery (e.g. icons, your pie-chart, etc.) Read it
and weep:

WCAG 1.4.3 Contrast (Minimum): The visual presentation of text and
images of text has a contrast ratio of at least 4.5:1, except for the
following: (Level AA)
* Large Text: Large-scale text and images of large-scale
text have a contrast ratio of at least 3:1;
* Incidental: Text or images of text that are part of an
inactive user interface component, that are pure decoration, that are not
visible to anyone, or that are part of a picture that contains significant
other visual content, have no contrast requirement.
* Logotypes: Text that is part of a logo or brand name has
no minimum contrast requirement.
(source: http://www.w3.org/TR/WCAG20/#visual-audio-contrast)

(NOTE - I am particularly concerned about the icons not being mentioned, as
icons are also specific calls-to-action, and as such critical on-screen
content, as critical as any text passage. a pale-gray print icon will likely
be missed by low-vision users for example.)



However, I think you will still need to look at textures and patterns, due
to another WCAG requirement:

WCAG 1.4.1 Use of Color: Color is not used as the only visual means
of conveying information, indicating an action, prompting a response, or
distinguishing a visual element. (Level A)
(source: http://www.w3.org/TR/WCAG20/#visual-audio-contrast)

I think the use-case of differently colored pie-slices is covered by this
Success Criteria, so using color alone to distinguish the different slices
would be a failure based upon this. No amount of outlining, etc. will
over-ride this requirement (I believe...)

HTH

JF