SVG Accessibility Checker

An SVG can be perfectly well formed, valid XML, a correct viewBox, no security issues, and still be completely inaccessible to someone using a screen reader. Structural validity and accessibility are different concerns entirely, one asks whether a browser can render the file correctly, the other asks whether every person, including someone who cannot see the graphic at all, can understand what it communicates. This tool checks specifically for the accessibility side: an accessible name, appropriate ARIA wiring, and whether the graphic's colors meet recommended contrast guidelines.

Every meaningful SVG needs an accessible name

Unlike an img tag, which has a well known alt attribute for its accessible name, SVG's accessible name comes from a title element as its first child, or an aria-label attribute on the root svg element. Without either, a screen reader encountering a meaningful icon or illustration has nothing to announce, the graphic effectively does not exist for someone relying on assistive technology, even though it renders perfectly visually. This is the single most common SVG accessibility gap, and the first thing this tool checks for.

Decorative or meaningful: SVG needs to declare which

Not every SVG needs an accessible name, a purely decorative flourish that adds no information beyond what surrounding text already conveys should actually be hidden from screen readers entirely, using aria-hidden="true", rather than forcing an accessible name onto something with no real meaning to describe. The problem is the ambiguous middle ground: an SVG with neither an accessible name nor aria-hidden leaves assistive technology to guess, and that guess varies inconsistently across different browser and screen reader combinations. This tool explicitly flags that ambiguous state as its own distinct issue, since the fix is different depending on which side of the line a particular graphic actually falls on: add a title if it's meaningful, add aria-hidden if it's decorative.

Why role="img" matters even with a title present

Without role="img", some assistive technology may treat an SVG's internal elements, its individual paths and groups, as separately navigable content rather than as one single image, which can mean a screen reader user tabs through or is announced a confusing stream of internal shape descriptions instead of hearing the graphic's title once as a coherent whole. Adding role="img" to the root svg element tells assistive technology to treat the entire graphic as a single, atomic image, the same way a photo behaves, which is almost always the intended behavior for an icon or illustration.

Color contrast for graphics follows a different threshold than text

WCAG's well known 4.5:1 contrast requirement applies specifically to normal-sized text. Graphical objects and meaningful UI components, which is what most SVG icons and illustrations are, fall under a separate, slightly more lenient guideline recommending at least 3:1 contrast against their background, still enough to ensure someone with low vision can distinguish the shape from what's behind it. This tool checks every hex fill and stroke color found in the SVG against a background color you choose, reporting the single lowest contrast ratio found, since that weakest link is what actually determines whether the graphic reads clearly as a whole.

How this differs from the SVG Viewer & Validator

Our SVG Viewer & Validator checks structural correctness and security, well-formed XML, a valid viewBox, no embedded scripts. This tool checks a genuinely separate concern, whether the graphic communicates its meaning to everyone, including screen reader users and people with low vision. A file can pass one check and fail the other entirely independently, which is exactly why they're separate tools rather than one combined report. Everything here runs entirely in your browser, nothing you paste or upload is sent to a server. Fixes uncovered here can be applied directly in our SVG Code Editor, part of the same SVG & Design Tools collection this tool belongs to.