Switch states not visible in High Contrast Mode

Bootstrap 4.6: The states of a simple switch are not visible in Windows High Contrast Mode.

I used the following code from the documentation and enabled the High Contrast Mode with [Left-Alt]+[Left-Shift]+[Print].

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

The toggle indicator is not visible.

Here is a CodePen sample.

I believe this is a bug? Anybody knows a quick workaround?

[alpadev]

@ffoodd

In v5 the situation is somewhat better because you can see the checked state

Range sliders are invsible like in v4

[ffoodd]

Would you mind providing screenshots, please? Could help to see what happens, for non Windows user. 😃

Using system colors could help but should be scoped to high-contrast media queries, and support is not so great. Workaround would be using borders alongside background—which is the solution suggested by Adrian Roselli on his “Under-engineered toggles” post (in which he also enhances support using the high-contrast media query, too).