Re: 1.4.11 - non-text-contrast and controls

Thanks Patrick,

Very helpful as ever, and thanks for such a quick response. I need to
justify changes to existing UX.

Best

Mike

On Fri, Nov 17, 2023 at 1:42 PM Patrick H. Lauke <redux@splintered.co.uk>
wrote:

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