WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Alastair Campbell
Date: Dec 4, 2018 3:40PM

Jared Smith wrote:
> 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.

Yes, however, the paragraph was intended to say that you could use a
change of contrast as a method of showing a change of state. Not the
only method, but a method.

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

Not under 1.4.1, but that SC was referenced as a potential method for
meeting 1.4.11, not a requirement.

> A default <button> provides absolutely no visual change on mouse
> hover.

That might depend on your browser, I see a subtle background change
from grey to light blue in FF & Edge on windows, but it isn't
particularly noticeable.

This key thing for 1.4.11 is that you can perceive the control in any
state (as you suggested), then with 2.4.7 Focus styles, there is a
combined requirement for a visible focus indicator (now better defined
with 1.4.11). Mike Gower put it well here:
"one must perceive the difference between focused and unfocused state
in order to meet 2.4.7 Focus Visible, so the two states must meet the
minimum contrast requirements of 3:1. In other words, having
established this minimum contrast for non-text contrast, I think it is
both logical and consistent that "visible" in the sense of 2.4.7 must
be a differentiation between the focused and non-focused states."
https://github.com/w3c/wcag/issues/541#issuecomment-443749529

There are multiple ways to provide an indicator, a *change* of colour
of something already there would need to meet the contrast ratio, but
an additional element / change of the component shape is another way.

A contrasting change (like in the Understanding doc) works, as does an
outline. I put together a little scratch page to show some different
methods specifically for buttons:
https://alastairc.ac/tests/wcag21-examples/ntc-focus-styles.html

That was the starting point to a technique that is basically about
"changing the shape of the component". Talking about the adjacent
colours is difficult when you've multiple sides for things, and adding
a dark outline around a dark border does have good visibility. When
you get down to it, shapes are made of contrasting colours, so it
should be a useful distinction. See examples 4 & 5, where 5 uses a
colour that contrasts with the dark border, but not the background.


> whether hover states for buttons must indeed present a 3:1
> contrast ratio difference from their default state.

There are a remarkable number of states, especially for links [1], so
differentiating all states from each other is not feasible. The
intended scope was that the component is perceivable in all it's
states, including the things that define what that component is:
"Visual information required to identify user interface components and
states". For example, the toggle in a toggle button. The other aspect
was focus state, where it was intended to build on top of 2.4.7.

Hope that helps, thanks to JF for the nudge, I don't get to follow
email lists much these days!

-Alastair

1] http://blog.selfthinker.org/2011/07/10/trick-question-how-many-link-states-can-be-defined-in-css/