WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Correction for colour contrast fail in a chart

for

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

From: Dolenko, Kristen
Date: Wed, Oct 19 2022 10:21AM
Subject: Correction for colour contrast fail in a chart
No previous message | Next message →

Hello.
I'm new to the forum and am not nearly as technically adept as I probably should be to offer a11y advice to my clients. However, in the absence of other resources, I'm it.
My understanding of WCAG 2.1 AA is that graphic objects that convey meaning must always meet a contrast ratio of 3.1
If we are obligated to post a chart that fails this test, is offering a text version alternative sufficient to meet WCAG 2.1 AA?

Kristen Dolenko
Senior Web Strategist / Conseilleure principale en stratégie Web
E-Communications, Strategic Policy / DG politique stratégique
Canada Border Services Agency / Agence des services frontaliers du Canada

From: Jared Smith
Date: Wed, Oct 19 2022 10:34AM
Subject: Re: [EXT] Correction for colour contrast fail in a chart
← Previous message | Next message →

Welcome to the forum!

The Non-text Contrast success criterion in WCAG applies to "Parts of graphics required to understand the content." If you provide a text version of the content conveyed via the graphical chart, then the chart is no longer "required to understand the content", so thus is not required to provide the 3:1 contrast. Figure 20 at https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html presents a similar scenario.

With this all said, the chart and its components should be given sufficient contrast for optimal accessibility and usability, even if WCAG may not require it.

Jared

From: Dolenko, Kristen
Date: Wed, Oct 19 2022 10:36AM
Subject: Re: [EXT] Correction for colour contrast fail in a chart
← Previous message | Next message →

Thank you so much for your prompt reply, Jared.

Kristen

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Jared Smith
Sent: October 19, 2022 12:34 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] [EXT] Correction for colour contrast fail in a chart

***ATTENTION***

This email originated from outside of the Government of Canada.
Do not click links or open attachments unless you recognize the sender and believe the content is safe.
To learn more about suspicious emails and how to report them: Handling SPAM or junk emails<https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72>.


Ce courriel provient de l'extérieur du Gouvernement du Canada.
Ne cliquez pas sur le lien ni les pièces jointes sauf si vous reconnaissez l'expéditeur et que vous croyez que le contenu est sûr.
Pour en savoir plus sur les courriels suspects et comment les signaler: Comment traiter les courriels indésirables<https://que-lse-esl.isvcs.net/que/2715/articleEdit.do?method=viewArticle&id72>.


Welcome to the forum!

The Non-text Contrast success criterion in WCAG applies to "Parts of graphics required to understand the content." If you provide a text version of the content conveyed via the graphical chart, then the chart is no longer "required to understand the content", so thus is not required to provide the 3:1 contrast. Figure 20 at https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html presents a similar scenario.

With this all said, the chart and its components should be given sufficient contrast for optimal accessibility and usability, even if WCAG may not require it.

Jared

From: glen walker
Date: Wed, Oct 19 2022 11:24AM
Subject: Re: Correction for colour contrast fail in a chart
← Previous message | No next message

I'm seeing two different aspects in your question and Jared's response.
The example that Jared posted, figure 20 in the "understanding" section,
shows text values (percentages) on the pie pieces so that one doesn't
necessarily have to see where one pie piece ends and the next one starts in
order to figure out the value, although as Jared said, providing enough
contrast makes it a better experience even if not required by WCAG.

In your original question, you were asking about an alternative to the
chart itself such as a table of values. That would still satisfy the
"required to understand the content" aspect of Jared's response. That is,
if you had a table of values, then you don't necessarily need sufficient
contrast on the chart to figure out the values, although again, that would
be desirable.

Sometimes a chart can be tweaked just a little bit to give it sufficient
contrast. If you had a pie chart with all the pieces different shades of
blue, it's doubtful it would have sufficient contrast. But 1.4.11 talks
about "adjacent" colors. While the blue pie pieces adjacent to each other
might not have sufficient contrast, if you put a border around each piece,
either black or white depending on how light or dark your blue is, then the
pie piece color would be adjacent to the border color and not to its
neighboring pie piece so you'd only need sufficient contrast between the
border color and the pie piece color.

So there are several ways to satisfy contrast.