Re: 1.4.11 - non-text-contrast and controls

On 17/11/2023 13:19, Michael Livesey wrote:

> Case A
> The circle of the toggle has sufficient contrast, but the remainder of 
> the switch is very low contrast – does this pass 1.4.11, or does the 
> entire control need to meet 3:1 contrast so that visually impaired users 
> can perceive the entire switch as a toggle rather than just a circle? If 
> no, would iconography in the circle, such as tick or cross help making 
> it more obvious as a control? Or does the switch border need to be 3:1 
> in all eventualities?

If I just squint a bit at it, I can't tell it's a switch, all I see is a 
black circle, which gives me no indication what i'm looking at. I'd say 
yes this fails as at least the border/outline should also have at least 
3:1 contrast, so I have a better chance of perceiving the control's nature.


> Case B
> The switch on/off color change is > 3:1 contrast (white to dark green).

with 1.4.11 you don't compare the before/after colours, as they're not 
adjacent.

> However, when on a colored background, the contrast between the body of 
> the switch (excluding the circle) and the background is only 1.45:1. It 
> is required that the contrast be 3:1 against background for both states 
> (on and off)? Does the circle of the toggle control have to meet 3:1 
> against the background in both states (on and off)?

Again, I'd need to be able to tell that there's more than just a circle 
there. If there's a sufficiently contrasty border around the whole 
thing, cool. If there's no border, then yes there should be a 3:1 
contrast between the "field" of the toggle and the page background.

> Case C
> If the background is a customer branded theme color, given we are in 
> control of the switch color, do we still need to ensure we meet 3:1 
> contrast ratio – i.e. if a customer choses a theme of dark grey making 
> the control almost invisible, is it our responsibility to ensure we meet 
> the contrast rules for a common control.

Not sure of the distinction here between "we" and "customer". Ultimately 
the customer's site is what needs to be accessible. So whoever puts the 
final thing together needs to ensure the control is clearly 
distinguishable for what it is. Whether that's "you"/"we" as the 
component developer (?) or the "customer" who's using your component (?) 
depends on where these responsibilities have been divided out.

> Case D
> Are there any requirements regarding size of the control and width of 
> the border required? The switch can appear at different sizes.

Size-wise, there's the target size (minimum) / (enhanced) to take into 
consideration. Nothing about the width of the border, because it's not 
really WCAG's job to define this sort of thing (but obviously, if you 
make the border sub-pixel-sized, then you'll have a hard time setting a 
contrasty-enough border that achieves 3:1 in the real world as it'll get 
antialiased - you'll nominally be able to pass it based on CSS colours 
you set, but it'll only be a "technical" pass and not something that 
will work for actual human users).

P
-- 
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

Received on Friday, 17 November 2023 13:39:20 UTC