Does a two-color focus indicator pass SC 2.4.11 if it contrasts itself?

[jonathanjakimon]

Success Criterion 2.4.11 Focus Appearance (Minimum) (Level AA): When a user interface component has keyboard focus, the focus indicator:

• Encloses the visual presentation of the user interface component;
• Has a contrast ratio of at least 3:1 between its pixels in the focused and unfocused states;
• Has a contrast ratio of at least 3:1 against adjacent colors.

In the screen below you can see a button with an outer focus indictor composed of:

• 2px width blue #3E95FA
• 1 px width white

One of the requirement is: has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

With the grey background example the contrast of the blue or white rings is not high enough. However the blue and white constituent parts of the indicator contrast themselves which ensures this state change is always highly distinguishable for users.

Does this combination of contrasting colors for the focus indicator allow this UI component to pass the requirements for success criteria 2.4.11 regardless of the background color?

[JAWS-test]

If I understand the new SC correctly, your two-color focus indicator would not satisfy the SC. If the contrasts between the two colors were higher (e.g. black and white in the indicator) the SC would always be fulfilled.

[awkawk]

Maybe it is an anti-aliasing effect but when I look at these closely none have a 1px white ring as part of the focus indicator. Even if it did, for the middle example neither of the colors gets you to a 3:1 contrast ratio for the same pixels.

[alastc]

The key part for these examples is:

Has a contrast ratio of at least 3:1 between its pixels in the focused and unfocused states;

So an indicator contrasting with itself does not intrinsically pass, because we are looking for a change of contrast.

which ensures this state change is always highly distinguishable for users

You've picked examples just on the border of the contrast threshold, so that's not really the case (at least for users with visual impairments).

If you do have a higher contrast pair, like the Chrome/Edge black and white indicator (but outside the component) then you are pretty much guaranteed to pass.

[JAWS-test]

According to the SC wording, the focus indicator is not sufficient. However, the question is why? Maybe the new SC is not good enough. After all, the focus indicator should be sufficient because it has sufficient contrasts (3:1) in itself and is thus recognizable as an object.

[alastc]

the focus indicator should be sufficient because it has sufficient contrasts (3:1) in itself and is thus recognizable as an object.

That would allow for a dark button on a white background to have a light grey outline, e.g. the first image example in this article.

[dbjorge]

I agree that per the SC wording, it's not sufficient.

I think https://w3c.github.io/wcag/techniques/css/C40 suggests otherwise incorrectly, though (emphasis mine):

Although it is possible to create individual CSS classes to address the different buttons across a site, this can be time consuming and easy to miss some types of interactive content. However, if the focus indicator is two colors - a light color and a dark color - then it will always have sufficient contrast against any background color. Currently, this can be done by combining the text-shadow property with the outline property on the focus indicator.
...
Procedure
For each focusable user interface element:

1. Check that the two-colors in the focus indicator are adjacent and have a contrast ratio that is 3:1 or greater with each other.
2. Check that the colors used contrast with the adjacent colors, or are at least 2 CSS pixels thick.

We should probably update it to be more clear that the technique doesn't guarantee a pass without consideration of the page/components it's being used with, and to overhaul its test procedure accordingly. (also s/text-shadow/box-shadow/)

[dbjorge]

I started looking into rewriting the technique to be more accurate. I didn't finish with the content update, but I did want to write down a quick proof of why I think the actual requirement for the indicator colors' contrast with one another is 9:1, rather than 3:1. I don't think the technique needs to include such a proof, but I thought it might be helpful for discussion purposes.

Note that this is only applicable for a case where the indicator is being evaluated against a single, flat background color; the wording in the technique would need be careful about applicability in cases where the indicator overlays a background with multiple colors in play (for example, image backgrounds, gradient backgrounds, indicators that are partially inset over the component being indicated).

Proof that for a two-color indicator to meet 3:1 change contrast with any single flat background color, the two indicator colors must meet 9:1 contrast with each other

Note: the proof below uses GitHub's MathML syntax; some screen readers require a plugin to announce it correctly. For example, NVDA users may need to install MathPlayer.

Suppose the two colors of a two-color indicator have relative luminance values $a$ (lighter color) and $b$ (darker color, $a > b$). Let $m$ be the "relative luminance midpoint" of $a$ and $b$, defined as the value such that the contrast ratio between colors with relative luminance $a$ and $m$ equals the contrast ratio between colors with relative luminance $m$ and $b$. This contrast ratio ($C_{midpoint}$) is completely determined by the contrast ratio between the indicator colors ($C_{indicator}$):

$$C_{midpoint} = \frac{a+.05}{m+.05} = \frac{m+.05}{b+.05}$$

$$b+.05 = \frac{(m+.05)^2}{a+.05}$$

$$C_{indicator} = \frac{a+.05}{b+.05}$$

$$C_{indicator} = \frac{a+.05}{(\frac{(m+.05)^2}{a+.05})}$$

$$C_{indicator} = \frac{(a+.05)^2}{(m+.05)^2}$$

$$C_{indicator} = (C_{midpoint})^2$$

In order for any possible background color of a page to meet 3:1 change contrast with one of the two indicator colors, it is both necessary and sufficient for $C_{midpoint} ≥ 3$, or equivalently, for $C_{indicator} ≥ 9$.

• Necessary: If $C_{midpoint} < 3$, then using the midpoint color as the background color would not meet 3:1 contrast with either indicator color
• Sufficient: Any background color will either be at least as light as the midpoint color (and thus have a contrast ratio with the darker indicator color that is at least $C_{midpoint}$), or will be at least as dark as the midpoint color (and thus have a contrast ratio with the lighter indicator color that is at least $C_{midpoint}$)

[dbjorge]

Per discussion in today's meeting, there was agreement on:

• The technique should mention 9:1 as the necessary contrast between indicator colors, but should not include a proof of that
• We should just drop dotted/dashed examples from the technique, because they are too dependent on browser implementation details
• Technique's examples can probably become:
  1. "2px solid bands of each indicator color (thick enough that adjacent contrast isn't required)"
  2. "1px solid bands of each indicator color, both with an offset (such that adjacent contrast is measured against the same background color as change contrast)"

[alastc]

Update approved: https://www.w3.org/2023/05/09-ag-minutes.html#t05