WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Contrast and Color Accessibility, Understanding WCAG 2 Contrast and Color Requirements

for

From: Jonathan Avila
Date: Dec 4, 2018 1:23PM

There were 2 github issues on the WCAG github repository discussing the question of comparing hover and other states for contrast under SC 1.4.11 non-text contrast. The links are provided below. Based on my understanding the difference between hover and non-hover states do not require 3:1 contrast as there are other indicators provided for hover such as a change in the pointer. Each state alone must have sufficient contrast for text and non-text items if the contrast of those non-text items is the only way of communicating something visually. But you don't need to compare those states to each other.

Warning -- these links are provided as the open discussion of the issue and the discussion may be confusing to some -- so I only recommend them for those who really want to dig into the theoretical discussion -- although proposed responses are provided at the end. One issue was closed while the other open -- so I would assume further clarification of the response from the Accessibility Guidelines Working group in the form of updates to the understanding document will be forthcoming.
https://github.com/w3c/wcag/issues/400
https://github.com/w3c/wcag21/issues/913

Use of contrast as the only differentiator for the focused and non-focused state is a separate issue and under discussion.

Jonathan

Jonathan Avila, CPWA
Chief Accessibility Officer
Level Access
<EMAIL REMOVED>
703.637.8957 office

Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog

Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jared Smith
Sent: Tuesday, December 4, 2018 2:42 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Contrast and Color Accessibility, Understanding WCAG 2 Contrast and Color Requirements

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


>> If a control's indicator of state (e.g., button background) varies
>> only by color this is acceptable if the luminosity contrast ratio
>> between the colors of the states differ by at least 3:1, or if there
>> is another indicator of state.
>
> For example, if a button's background color changes on hover/focus and
> there's no border change or other visual difference, there are 4
> contrast ratio requirements.

It's important to understand the context for the sentence you quoted (which is non-normative). It's in relation to "Use of Color" (1.4.1) or color reliance. So this would only apply if you are indeed only relying on color to indicate the button - the button looks exactly like the surrounding non-button text. If the button indeed looks like a button and is visually differentiated from surrounding content, then I see no requirement under 1.4.1 for the various states of that button to have a 3:1 contrast ratio to the default state.

In short, where this paragraph states "If a control's indicator of state (e.g., button background)..." it is not referring to hover/focus "states", but instead to the fact that the "state" of this element is a button rather than something else... I guess. If this is indeed referring to hover/focus states, then I believe this statement is incorrect - 1.4.1 does not cover such things. If it covers the various states of buttons, then it must also cover the various states of links, so a blue default state would have to be 3:1 from a red hover state, and that's just not the case.

Now, in the context of 1.4.11 (Non-text Contrast)...

A default <button> provides absolutely no visual change on mouse hover. This clearly would be exempted because it is a default component. However, if the author were to make even the slightest of color differences on hover, this would suggest that this hover color change must now be at 3:1 from the default color.

Is this really what this success criterion is requiring of authors? I don't know, but this seems a bit extreme for button hover states when the user must have manually triggered this state and where the default and expected behavior is no contrast change at all.

Now, for the keyboard focus state, if there is a visible focus indicator/outline, as is the default for <button> and links, then this is sufficient because color changes are no longer "required to identify" the state. So, if there's a focus indicator no change is needed, but the hover state must have a contrast ratio of 3:1 from the default state??? That just doesn't seem right to me.

If, on the other hand, there is NO focus indicator, then I agree that the 3:1 color change is necessary between the default state and the focus state. An outline would be better, but this would be sufficient to meet this success criterion.

This is why we didn't delve into the nuanced and confusing aspects of this WCAG requirement in our article - it only applies to buttons when there's no visible focus indicator. And I'm not sure whether this actually applies to hover states if the user customizes the button styles - it doesn't make sense to me that it would.

Perhaps someone involved in the authoring of this success criteria could provide some clarification as to whether hover states for buttons must indeed present a 3:1 contrast ratio difference from their default state. If it does, this should probably be clarified.

Thanks,

Jared