Hi everyone,
I would be most grateful for guidance on the above with respect to toggle
switches please
My understanding of the above is that both user interface components and
state changes need to have a contrast of 3:1 against the background and 3:1
against the state change.
Below are some screenshots with case situations and question.
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?
[image: image.png]
Case B
The switch on/off color change is > 3:1 contrast (white to dark green).
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)?
[image: image.png]
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.
Case D
Are there any requirements regarding size of the control and width of the
border required? The switch can appear at different sizes.
[image: image.png]
Thanks again!
