Are all meaningful SVGs styled to ensure compatibility with Windows High Contrast mode?

Goal

Ensure that users on Windows High Contrast Mode can still distinguish and perceive the SVG.

Why this matters

Assuming that the SVG is meaningful content, if you don’t validate that the SVG works in High Contrast Mode, your user may not be able to see or understand the content.

How to implement

UX Designers and Developers

Review Designing charts and complex images with SVGs for recommendations to make SVGs compatible with Windows High Contrast Mode.

How to test

Prerequisite: You have a Windows based operating system and the ability to switch it into Windows High Contrast Mode.

1. Turn on High Contrast Mode.
2. View the page.
   1. Are all SVGs able to be perceived against their new background colors? Important parts of the image should be at a 3:1 ratio to their backgrounds to be perceivable according to 1.4.11 Non-text Contrast.
   2. Are all the individual pieces of the SVG able to be perceived? (If they changed color due to having their colors set by CSS, do they still make sense?)
   3. Is all text in the SVG still meeting the 4.5:1 contrast ratio for smaller text and 3:1 ratio for larger text according to 1.4.3 Contrast (Minimum).

Keep in mind that if your user is on Windows High Contrast Mode, they probably want text to comply with 1.4.6 Contrast (Enhanced).