Accessibility level AAA: Checkbox selection not displayed in inverted colour mode

[tjsilver]

When users view the checkbox in an inverted colour scheme, they cannot see their selection within the checkbox. This is because a pseudo checkbox has been created within a span, which acts as a visual checkbox while the functioning checkbox is hidden behind.

The suggested solution involved using a media feature called -ms-high-contrast that is a) non-standard and not for use in production. There is a newer feature called forced colours that could perhaps be used instead, but this is not widely supported by browsers as it's in active development.

An alternative suggestion is to rely on the native checkbox element, and remove all instances of the visible pseudo checkbox.

Screenshots

Inverted colour mode

Default mode (for reference)