WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: 1.4.1 Use of Color clarification

for

From: Mark Magennis
Date: Sep 16, 2024 8:26AM

Yes, your interpretation of the note is correct. If your dark grey contrasts against the dark blue by at least 3:1 then you're fine with WCAG.

However, you may still have a usability issue. Suppose you end up with equal numbers of selected and unselected. How is the user to know whether dark blue means "selected" or dark grey means "selected"? It may not be obvious so you may have to think about adding a secondary visual cue such as tick marks.

Mark
From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Claire Forbes < <EMAIL REMOVED> >
Sent: Monday 16 September 2024 13:57
To: <EMAIL REMOVED> < <EMAIL REMOVED> >
Subject: [EXTERNAL] [WebAIM] 1.4.1 Use of Color clarification

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

Good morning,
I have a question regarding "1.4.1 Use of Color, Level A - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."

A course has several buttons that are standard colors (dark blue background/white text) and then change once the button has been selected (dark gray background/white text).
There are pages in the course where there's several buttons and the color change is meant to show which buttons on the page the user has already selected.

My question is does this FAIL use of color, as it's the only visual to show that the button has been selected - IF if does fail, what are other visual methods to convey a button has been selected?

Additionally, I have read w3.org and found this note, that reads like it should pass due to the difference in lightness:
https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG21%2FUnderstanding%2Fuse-of-color&data=05%7C02%7CMark.Magennis%40skillsoft.com%7C089c0cdeec9449f5e97a08dcd64f172e%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638620882418308662%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=HhS8ExbPO97AboOV%2FNCX6KXkMW%2Fvbi7%2BCl1aXFRi17g%3D&reserved=0<https://www.w3.org/WAI/WCAG21/Understanding/use-of-color>
"If content is conveyed through the use of colors that differ not only in their hue, but that also have a significant difference in lightness, then this counts as an additional visual distinction, as long as the difference in relative luminance between the colors leads to a contrast ratio of 3:1 or greater. For example, a light green and a dark red differ both by color (hue) and by lightness, so they would pass if the contrast ratio is at least 3:1. Similarly, if content is distinguished by inverting an element's foreground and background colors, this would pass (again, assuming that the foreground and background colors have a sufficient contrast)."

Thank you!
Claire