Re: Non-text contrast on toggle buttons

Hi Tom,

I think there are two understanding docs that have useful info. One is use
of colour, the other is non-text contrast. 1.4.11 even has as example of a
toggle switch and helpfully details what needs to be 3:1 if you scroll down
the page.

Under use of colour, you don't necessarily need text to convey on/off. A
contrast between on/off, again of 3:1 is sufficient.

Also iconography is fine too, so a tick in your circle when on would work.
Or a vertical line (like the 1 and 0 for on/off on TV remotes). I think
iconography gives the best looking results, it avoids the need for language
translation too.

Hope the above helps

best

Mike

On Thursday, November 30, 2023, Mark Magennis <Mark.Magennis@skillsoft.com>
wrote:
> Assuming the colors in the images you've posted are the true colors then
yes, the blue passes. But the white button fails because the outline of the
circle doesn't contrast against the white background enough for it to be
perceivable as a circle. Even the darkest pixels of the shadow don't reach
3:1 contrast so from a WCAG point of view this is equivalent to having no
shadow at all and what you have is just the dark grey part - a rounded
rectangle with a concave cutout on the left end. That on its own is not
perceivable as a toggle switch.
> Mark
> ________________________________
> From: Tom Shaw <tom-shaw@hotmail.com>
> Sent: Thursday 30 November 2023 13:35
> To: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>
> Subject: [EXTERNAL] Non-text contrast on toggle buttons
>
> You don't often get email from tom-shaw@hotmail.com. Learn why this is
important
> Hi all.
> Here is an exmaple of toggle switches. Grey is off, colour is on.
> Can someone kindly confirm exactly what areas of the toggle/background
should contrast with which? Thank you. I feel the grey obviously fails with
the light grey shadow of the toggle against the white background, however,
I feel the light blue colour of the toggle will pass against the white
background?
> </mail/u/0/s/?view=att&th=18c208f5fd19d494&attid=0.1&disp=emb&zw&atsh=1>
>