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:28AM

Jano,

You're right in most of what you say about how to pass WCAG 1.4.1 but your last point isn't correct. Using ARIA won't help you pass because ARIA attributes aren't visible.

Mark
From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Jano Llorca Lis < <EMAIL REMOVED> >
Sent: Monday 16 September 2024 14:05
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] Re: [WebAIM] 1.4.1 Use of Color clarification

Hi Claire,

Your question pertains to WCAG (Web Content Accessibility Guidelines)
guideline 1.4.1, which states that color should not be the only visual
means of conveying information. Let's break down your situation and see if
it meets this criterion.
Analysis of the Use of Color in Your Case

In your course, the buttons change color (from dark blue to dark gray) when
a user selects them, to indicate which buttons have already been selected.
If color is the only visual means used to convey the selection state of a
button, this *does not meet* WCAG 1.4.1, as people with visual
disabilities, such as color blindness or low vision, may not effectively
perceive these color changes.
Alternative Solutions

To comply with WCAG 1.4.1, you must provide additional indicators, beyond
color, to communicate that a button has been selected. Here are some
alternatives:

1.

*Add an Additional Visual Indicator:*
- Use a border, underline, selection icon (like a checkmark or dot), or
a shape change to indicate the selected state. For example, a thicker
border or an icon next to the text could work.
2.

*Change the Button Text:*
- Modify the button text to reflect the selected state, for example,
changing “Select” to “Selected.”
3.

*Adjust the Button Style:*
- Use additional visual styles like bold, italics, or even a subtle
animation (such as a slight size increase or shadow) to indicate
the change
in state.
4.

*Use ARIA (Accessible Rich Internet Applications) Attributes:*
- Implement accessibility attributes such as aria-pressed="true" or
aria-selected="true" on buttons to indicate the selected state to
screen readers.

About the W3C Note You Mentioned

The W3C note states that using colors with a significant difference in
luminosity may be considered an additional visual distinction, provided
there is a contrast ratio of at least 3:1. However, while this may help you
meet the criterion in certain aspects, *it does not guarantee* compliance
with guideline 1.4.1, as it still requires that color not be the only means
of communicating information. The purpose of this guideline is to ensure
that information is accessible to users with different types of visual
impairments, and not all of these impairments benefit from differences in
luminosity.
Summary

Yes, using color as the only indicator of button selection *would fail*
WCAG 1.4.1. You should consider adding other visual or textual methods to
indicate that a button has been selected, ensuring that all users can
understand the information regardless of their visual abilities.

I hope this clarifies your questions and helps you improve the
accessibility of your course. If you have more questions or need further
details, I’d be happy to help!

Best regards,
Jano Llorca
Accessibility Consultant
*Jano Llorca*
Consultor SEO - SEM - Social Ads
UX - UI - Diseño y Accesibilidad Web

Teléfono: 673 346 726
<EMAIL REMOVED>

<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Filumina-agencia-consultora-seo.business.site%2F&data=05%7C02%7CMark.Magennis%40skillsoft.com%7C55da36b8f2894d9fcb1808dcd65062b8%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638620887990068673%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=Mn75EBzJ8JueTGnQMLbnfXLJzXEU0cn0HWRobpcqc8k%3D&reserved=0<https://ilumina-agencia-consultora-seo.business.site/>>


El lun, 16 sept 2024 a las 14:57, Claire Forbes (< <EMAIL REMOVED> >)
escribió:

> 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%7C55da36b8f2894d9fcb1808dcd65062b8%7C50361608aa23494da2332fd14d6a03f4%7C0%7C0%7C638620887990080685%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C0%7C%7C%7C&sdata=oerAP1ohMGKgSXZQl5k7DQylgAye1hovPziVwknOJ0g%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
>
>
> > > > >