WCAG 1.4.1 Use of Color issue on active (toggled) and disabled controls

[Shnoulle]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

Active button use only color for difference with inactive button.

It's break Level A criterion on WCAG, and it make unusuable with forced color mode

Reduced test cases

• Codepen : https://codepen.io/team/bootstrap/pen/qBamdLj
• getbootstrap website https://getbootstrap.com/docs/5.2/components/buttons/#toggle-states
• With forced color sample

(see https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use#w_custom-font-color for firefox settings, i don't found settings for Chrome)

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.2.2

[mdo]

@patrickhlauke Do we need to address anything from this?

[patrickhlauke]

@mdo the active class should have a much stronger differentiation with the non-active class. if we're only going by a change of background, the difference between the non-active and active background should be at least a ratio of 3:1 (see the second note in https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html ... which, incidentally, i wrote)

so, for the case of the blue buttons, #052A6C for instance... (of course we'd need similar variants for all other colours, primary, secondary, etc)

I'm pretty sure I mentioned this ages ago when we looked at colour contrasts in general.

as for forced colours, that falls outside of the scope of WCAG itself. we've been discussing separately how to address this (as this will require more thought than just for toggles here) https://github.com/twbs/bootstrap/issues/35941 in the case of active/inactive, one idea would be to add an additional outline, or thicker outline, when active, but we can discuss that in the other issue

[patrickhlauke]

in principle, the same thinking about 3:1 contrast difference also applies to disabled controls, but the risk here is to make it so light that it becomes inperceptible

for instance, using #BDD8FF gives it a difference to the regular toggle of 3:1, but then fails quite miserably on its own to contrast against the page or be even borderline legible, which arguably fails as well.

for these, we can probably split the difference and find an in-between shade for disabled controls that doesn't quite have the full 3:1 ratio compared to the regular toggle, but is lighter than the current disabled style. we can then point it out in the docs, and tell authors that - depending on how they fall on the issue of "use of color" and how strictly it needs to be applied to disabled controls that also have additional hints, like not having the hand cursor when hovered (which of course doesn't count for anything on touch devices) they may choose to pick an even lighter, or different/additional, style

[patrickhlauke]

incidentally, purely from a use of color perspective (as said, leaving aside the forced colors/high contrast issue), the new styles I introduced recently for the outline toggles https://getbootstrap.com/docs/5.2/forms/checks-radios/#outlined-styles is probably the best, with its distinction between "only border" and "full background" to differentiate regular and active toggles (though doesn't tackle disabled)

[patrickhlauke]

this is likely something we want to tackle properly in v6, rather than v5 (together with a good forced color story)

[Shnoulle]

@mdo the active class should have a much stronger differentiation with the non-active class. if we're only going by a change of background, the difference between the non-active and active background should be at least a ratio of 3:1 (see the second note in https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html ... which, incidentally, i wrote)

Thank you:)

A question here about forced-color : it's not included in criterion 1.4.1: Use of Color ?

Have a solid contrast difference are OK ?

It aims to ensure that sighted users who cannot distinguish between some colors can still understand content.

[patrickhlauke]

A question here about forced-color : it's not included in criterion 1.4.1: Use of Color ?

No, 1.4.1 does not cover user adaptations like Windows High Contrast / forced contrast at this stage

Have a solid contrast difference are OK ?

As per https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html a contrast ratio of 3:1 or higher counts as not just being a "use of color" alone, so yes, solid contrast is ok.

We do plan to make additional adaptations that go beyond WCAG in #35941 but for these toggle buttons, it will likely be about adding an additional border/outline or similar (something that does not rely at all on specific backgrounds/colours)