WHCM -- Windows High Contrast Mode Support

[damiansian]

URL

https://demo.fileyourstatetaxes.org/

Issue

On a PC, or simulated in a browser using the rendering options, turning on Windows High Contrast Mode leads to two errors on the home page.

Issue one:

The link opens in new window icon disappears.

Issue two:

The focus indicator isn't visible.

WCAG

n/a

Important

This is a Section 508 requirement to support OS level accessibility options. Since the State of NJ is required to meet Section 508, this is a requirement.

User Impact

Users utilize Windows high contrast mode primarily to enhance the visibility and readability of text and interface elements on their screen, particularly those with visual impairments like low vision or color blindness, as it drastically increases the contrast between colors, making it easier to distinguish between different parts of the interface; essentially, it simplifies the visual display by using stark color combinations like black text on a white background or vice versa.

Screen walkthrough

WHCM.mov

Suggested fix

SVG

To fix an SVG not respecting Windows High Contrast Mode (forced colors), use the CSS property "currentColor" within your SVG elements for fills and strokes, which will automatically inherit the system color set by the user's high contrast mode settings; if necessary, you can further refine styling using media queries targeting the "forced-colors" state to ensure proper color adjustments in high contrast mode.

Visible focus indicators

@media (forced-colors: active) {
  input:focus {
    outline: 2px solid system-color:highlight;
  }

  button:focus {
    background-color: system-color:highlight;
  }
}