WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: 1.4.1 use of color for state indicator

for

From: Murphy, Sean
Date: Mar 9, 2020 2:57AM

If you are using a button. Does the buttons have text? If so, then you could indicate bold for the selected button. Making the border of the button thicker compared to the other buttons could be another options. Using a graphic to indicate the selected button. The graphic could be an underline. Just ideas.

Sean

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Steve Green
Sent: Monday, 9 March 2020 6:35 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] 1.4.1 use of color for state indicator

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

I expect that the rationale is that people need to be able to differentiate between the states if they have overridden the stylesheet. What do those links look like when using the operating system's high contrast mode?

Steve Green
Managing Director
Test Partners Ltd



-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: 09 March 2020 06:21
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] 1.4.1 use of color for state indicator

[image: image.png]
(Image Description: Four buttons, labeled A, B, C, and D. Buttons A, B, and D have black text and a white background. Button C has white text and a black background.)

If you have a set of buttons, such as in a toolbar, and one button is selected and the others are not, and that selection is indicated by a color difference, isn't that a 1.4.1 failure?

"Color is not used as the only visual means of conveying information..."

The example in the image has the highest contrast difference between states but there isn't a requirement for contrast between states. Technically, the black selected button is only different from the other buttons by color. It's using color as the only means to convey the selected meaning.
Even if the selected button had a "pushed in" appearance, that would still only be a color difference (having the southeast button borders be a light color and the northwest borders be a darker color).

F73 (https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F73) talks about red and pink not being color differences but rather lightness differences so if my unselected buttons were red and the selected button was pink, it could technically pass, but I'm sure I agree with that.

F73 could be applied to the black and white buttons too, and as noted in "Note 1", the buttons would differ by both color and lightness so could technically pass.

This just seems weird. White is a color and black is a color and that's the only difference between the buttons and that difference has meaning, so it seems like it would fail.

I know the buttons could pass if the selected button had a bold or italic font, such this:

[image: image.png]
(the bold font of the C button is hard to distinguish)

[image: image.png]
(italic font is a little easier to spot but still not great)

Or if there was some other visual indicator to show its selection, such as an extra underline under the button such as this:

[image: image.png]

I can't think of a case where a user that has sight, even if severe color deficiencies, could not tell the difference between the buttons without the font change or underline. (Assuming aria-pressed is specified too).