Bug report

In high contrast mode/light color background, the checkbox icon (for ticked checkboxes) is not visible against the background.

Steps to reproduce

1. Go to demo checkbox page at https://material-components.github.io/material-components-web-catalog/#/component/checkbox
2. Activate high contrast mode / light background (Windows HCM with High Contrast White theme, or Chrome Devtools Rendering mode to emulate HCM with forced-colors:active and prefers-color-scheme:light)

Actual behavior

Unticked and ticked checkboxes appear the same (black box outline, no apparent icon for ticked checkbox)

Expected behavior

Ticked checkboxes have a checkmark icon clearly visible inside the box.

Your Environments:

Additional context

This issue does not occur when using a dark background HCM theme; the icon clearly shows up as white against a dark background. It also does not occur on Windows/Firefox under either light or dark HCM themes.

Possible solution

The checkbox SVG has color:#fff set, and Chromium browsers do not change this value based on HCM theme. Using fill: currentColor and setting a color on the parent element is often recommended so that HCM will change the color value based on the HCM theme.

This issue does not occur for indeterminate state checkbox, as the horizontal bar appears to be made with a border style and not an SVG, and border colors are automatically adjusted in HCM.

Windows/Firefox does not have this issue as it appears to apply HCM color settings to the SVG.