Should C40 be also sufficient for 1.4.11 Non-Text Contrast?

[kimviens]

Hi everyone!

The reason why I ask if C40: Creating a two-color focus indicator to ensure sufficient contrast with all components is because I am trying to determine if a focus indicator that fails the contrast requirement fails both 1.4.11 and 2.4.7.

Let's say we have the situation like in figure 12 of 1.4.11. See below:

In the image there is a focus but it fails non-text contrast. Therefore, would it be a failure of 1.4.11 Non-text Contrast and a pass of 2.4.7 Focus visible because the focus is there? Would it fail both because we can pretend that any non-text element that fails the contrast requirement is "invisible" to the user.

That said, the sufficient technique C40 is about ensuring proper contrast. Considering how 1.4.11 Non-text Contrast speaks about focus indicators, C40 sounds like it would also fix non-text contrast requirements.

Restatement of the questions:

1. Is a failure of non-text contrast for a focus indicator also mean a failure of focus visible?
2. Should C40: Creating a two-color focus indicator to ensure sufficient contrast with all components be also sufficient to pass 1.4.11 Non-text Contrast for focus indicators?

[patrickhlauke]

in theory, you can pass 2.4.7 Focus Visible by having a single pixel that changes by a single HEX value (because WCAG 2.0 / 2.1 don't normatively define what "visible" means) - see https://youtu.be/I0tghv881ac?t=1468 (or the less humourous, but slightly cleaner, version at https://youtu.be/n-eM7_eYuCs?t=1688)

so no, as long as there's at least one single pixel that visually changed, it can be argued that focus is "visible". and this is the original reason why we then tried to patch this loophole with 1.4.11, and now in upcoming WCAG 2.2 "third time's the charm, maybe" with 2.4.11 Focus Appearance

[patrickhlauke]

2. Should C40: Creating a two-color focus indicator to ensure sufficient contrast with all components be also sufficient to pass 1.4.11 Non-text Contrast for focus indicators?

yes, though i see nobody's updated it accordingly...

[giacomo-petri]

From C40: Creating a two-color focus indicator to ensure sufficient contrast with all components

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.

On focus:

• black background button with white background context (adjacent color)
• black outline indicator
• white box-shadow

Focus indicator is 2 colors, a light color and a dark color, but the combination of background colors used do not ensure focus visibility.

We should add some word to exclude this scenario.

[giacomo-petri]

Or maybe that's why 1.4.11 SC has not been included, because it doesn't necessary satisfy it... 😄

[giacomo-petri]

According to current WCAG 2.2 draft, it's passing 2.4.11 too (https://w3c.github.io/wcag/understanding/focus-appearance-minimum.html)

[patrickhlauke]

Or maybe that's why 1.4.11 SC has not been included, because it doesn't necessary satisfy it...

not sure i follow your reasoning here. if you have a two-tone focus indicator, either the light or the dark part of the indication should have sufficient contrast against whatever background colour you put behind it (unless you find a specific shade that results in < 3:1 contrast both against white and against black).

Focus indicator is 2 colors, a light color and a dark color, but the combination of background colors used do not ensure focus visibility.

also, focus visibility has nothing to do with contrast ratio. which is why 1.4.11 was brought in.

[kimviens]

Thank you both for the super quick replies! I will add the note about the possibility of failing 1.4.11 but passing 2.4.7, this will be important in my testing.

For C40, I see that indeed yes it should be sufficient for 1.4.11.

[giacomo-petri]

if you have a two-tone focus indicator, either the light or the dark part of the indication should have sufficient contrast against whatever background colour you put behind it (unless you find a specific shade that results in < 3:1 contrast both against white and against black).

Please, look at the example n.2 (White outline and black internal box-shadow (not visible at all)) in the attached focus-example.zip html file.

also, focus visibility has nothing to do with contrast ratio. which is why 1.4.11 was brought in.

You are right.

[kimviens]

Haha! You found a rare edge case! Maybe there can be specificities that could be added like "the outside colour must contrast with the background"?

[patrickhlauke]

Please, look at the example n.2

ah indeed, not even a single pixel changes here, so that fails 2.4.7. all other cases pass 2.4.7

also worth noting that even sufficient techniques don't necessarily always pass/cover every possible permutation. they're mostly non-exhaustive examples. don't think this needs any specific extra call-out when you can apply common-sense to ascertain that no, in this case there clearly is no visible focus indication

[giacomo-petri]

don't think this needs any specific extra call-out when you can apply common-sense to ascertain that no, in this case there clearly is no visible focus indication

Of course in this example I've exaggerate the behaviour, but in general, reading the C40 sufficient technique, I would think that this solution is enough safe to say that, regardless the combination of colors I'm using on my website, the use of focus indicators that include both dark and light outlines ensure 2.4.7 SC (and 2.4.11 SC) to pass.
This might be true for the 90% of cases in my website and testing few pages + the assumption of C40 makes me think it's always working, but in reality, in some case it might not work.

if you have a two-tone focus indicator, either the light or the dark part of the indication should have sufficient contrast against whatever background colour you put behind it (unless you find a specific shade that results in < 3:1 contrast both against white and against black).

This is even more relevant in 2.4.11 (WCAG 2.2).
If you look at example 1 (Black outline and white external box-shadow (partially visible, especially if there is just one operable button in the scrolled window)), it is indeed not passing 2.4.11 according to

Has a contrast ratio of at least 3:1 against adjacent colors.

and it doesn't fall under the exception due to

has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

but according to C40 (listed as sufficient technique), it should pass.

That's why I think we should add some language to avoid discrepancies between guidelines/understanding and sufficient techniques.

[GreggVan]

+1 Gregg Vanderheiden ***@***.***

…

On Aug 9, 2022, at 9:20 AM, kviens ***@***.***> wrote: Haha! You found a rare edge case! Maybe there can be specificities that could be added like "the outside colour must contrast with the background"? — Reply to this email directly, view it on GitHub <#2575 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACNGDXTEPDADI4SCRJTNHDTVYKAN3ANCNFSM56A6ZPGQ>. You are receiving this because you are subscribed to this thread.

[dbjorge]

I've included notes in #3112 's rewrite of C40 which should help clarify the conditions where the two-color indicator might not meet the requirements and hopefully address this concern.

[alastc]

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