E-mail List Archives
Thread: Accessible Infographics Colors?
Number of posts in this thread: 6 (In chronological order)
From: david kaplan
Date: Fri, Feb 06 2015 12:41PM
Subject: Accessible Infographics Colors?
No previous message | Next message →
Hi All,
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.
TIA!
David K
From: Krack, Joseph@DOR
Date: Fri, Feb 06 2015 12:49PM
Subject: Re: Accessible Infographics Colors?
← Previous message | Next message →
Borders would not fix it because in many instances the Legend would also
have to be considered.
Joe
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of david kaplan
Sent: Friday, February 06, 2015 11:42 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Accessible Infographics Colors?
Hi All,
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.
TIA!
David K
messages to = EMAIL ADDRESS REMOVED =
From: Susan Grossman
Date: Fri, Feb 06 2015 1:05PM
Subject: Re: Accessible Infographics Colors?
← Previous message | Next message →
I have seen a dark gray border used on the slices, and that border added
around the swatches in the legend. This was specifically for colors that
do or almost pass for large font, not for outright fails.
1st choice would be that the pie slices contrast well against each other as
you mention, including the order they're shown in the legend.
On Fri, Feb 6, 2015 at 11:49 AM, Krack, Joseph@DOR < = EMAIL ADDRESS REMOVED = >
wrote:
> Borders would not fix it because in many instances the Legend would also
> have to be considered.
>
> Joe
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of david kaplan
> Sent: Friday, February 06, 2015 11:42 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Accessible Infographics Colors?
>
> Hi All,
>
> 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.
>
> TIA!
>
> David K
> > > messages to = EMAIL ADDRESS REMOVED =
> > > >
--
*Susan R. Grossman*
= EMAIL ADDRESS REMOVED =
From: Olaf Drümmer
Date: Fri, Feb 06 2015 2:55PM
Subject: Re: Accessible Infographics Colors?
← Previous message | Next message →
Already for users without any functional limitation it is useful if there is some redundancy, that makes it secondary whether a certain aspect (e.g. colour contrast as such) is accessible or not (what if you make a B/W copy of the color graphic - why should it cease to work?). Using patterns is an option. Or using an identifying character - much simpler. And: very often some legend explains what each of the colors (or patterns, or characters,
) stands for. Unless the infographic is too complex for that - why not simply add the applicable values next to each entry in the legend?
Olaf
On 6 Feb 2015, at 20:41, david kaplan < = EMAIL ADDRESS REMOVED = > wrote:
> Hi All,
>
> 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.
>
> TIA!
>
> David K
> > >
From: John Foliot
Date: Fri, Feb 06 2015 4:51PM
Subject: Re: Accessible Infographics Colors?
← Previous message | Next message →
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
From: Jonathan Avila
Date: Sun, Feb 08 2015 2:17PM
Subject: Re: Accessible Infographics Colors?
← Previous message | No next message
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 ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of david kaplan
Sent: Friday, February 06, 2015 2:42 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Accessible Infographics Colors?
Hi All,
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.
TIA!
David K