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.
- Turn on High Contrast Mode.
- View the page.
- 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.
- 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?)
- 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).