The focus state for radios and checkboxes is currently not very visible in high contrast mode or when colours are overridden in Firefox – the only visible change is that the outer border of the radio or checkbox control thickens from 2px to 4px. This is the same as the part of the focus state change that meets contrast, but omits the yellow ‘ring’ created by the box shadow.

Add an additional transparent outline to the control. In forced colors mode, transparent borders become solid (matching the text / foreground color) and so we get an additional outline around the focused control making it clearly visible.

When explicitly in forced-color mode, we can enhance the outline further by using the Highlight system color, which matches the color used by the focus state of native controls – at least in in Edge / Chrome / Opera which are the only other browsers to support forced color mode.