WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jared Smith
Date: Dec 4, 2018 12:41PM

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