accessibility high-contrast SVG
Accessible SVGs in High Contrast Mode
Eric Bailey
on
Sep 22, 2016
(Updated on Jun 21, 2017)
Learn Development at Frontend Masters
Making your SVG accessible includes adding extra steps to your workflow, but is well-worth it. By embracing clean, semantic markup and taking advantage of some of the less well-known features of CSS, you can create easily maintainable solutions that include considerations for low vision, a condition that affects a not-insignificant amount of the population.
Rather than writing and maintaining complicated and brittle state-managing Javascript, work with existing browser capabilities such as media queries to easily make the experience accommodate the widest range of browsing contexts, including High Contrast Mode.
SVG plays well with media queries, a feature of CSS that lets you describe how something should look under certain conditions, such as minimum applicable browser viewport size. For example, let’s take this cute SVG rocket:
Using the .rocket class, we can tell the SVG to flip around and change from red to blue when the browser’s viewport is more than 600px wide, much like styling any other HTML tag. Pretty neat, huh?
From this demo.
Media queries aren’t limited to just viewport size. Using a relatively obscure feature of CSS you can [...]