WebAIM - Web Accessibility In Mind

E-mail List Archives

1.4.1 Use of Color clarification

for

From: Claire Forbes
Date: Sep 16, 2024 6:57AM

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://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