E-mail List Archives

Search E-mail List Archives for

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

From: Claire Forbes
Date: Mon, Sep 16 2024 6:57AM
Subject: 1.4.1 Use of Color clarification
No previous message | Next message →

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

From: Jano Llorca Lis
Date: Mon, Sep 16 2024 7:05AM
Subject: Re: 1.4.1 Use of Color clarification
← Previous message | Next message →

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 ADDRESS REMOVED =

<https://ilumina-agencia-consultora-seo.business.site/>


El lun, 16 sept 2024 a las 14:57, Claire Forbes (< = EMAIL ADDRESS 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://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
>
>
> > > > >

From: Dean.Vasile
Date: Mon, Sep 16 2024 7:06AM
Subject: Re: 1.4.1 Use of Color clarification
← Previous message | Next message →

Buttons can also have a border if depressed. And a screen reader should also be able to detect the button state.

Dino
Dean Vasile
IAAP, CPACC
= EMAIL ADDRESS REMOVED =
617-799-1162

From: Mark Magennis
Date: Mon, Sep 16 2024 8:26AM
Subject: Re: 1.4.1 Use of Color clarification
← Previous message | Next message →

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 ADDRESS REMOVED = > on behalf of Claire Forbes < = EMAIL ADDRESS REMOVED = >
Sent: Monday 16 September 2024 13:57
To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] [WebAIM] 1.4.1 Use of Color clarification

[You don't often get email from = EMAIL ADDRESS 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

From: Mark Magennis
Date: Mon, Sep 16 2024 8:28AM
Subject: Re: 1.4.1 Use of Color clarification
← Previous message | Next message →

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 ADDRESS REMOVED = > on behalf of Jano Llorca Lis < = EMAIL ADDRESS REMOVED = >
Sent: Monday 16 September 2024 14:05
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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
>
>
> > > > >

From: Claire Forbes
Date: Mon, Sep 16 2024 8:53AM
Subject: Re: 1.4.1 Use of Color clarification
← Previous message | Next message →

Thank you - this is great insight and I really appreciate your helpful examples of alternatives!
Thankfully, the button does have an added thick black border after it's been selected.

From: Claire Forbes
Date: Mon, Sep 16 2024 8:53AM
Subject: Re: 1.4.1 Use of Color clarification
← Previous message | No next message

Thank you for your input! Thankfully, the button does have an added thick black border after it's been selected.