Accessibility and SVG Text

Question

We are receiving accessibility validation errors from worldspace / fireeyes for color contrast on some of our text that is over a semi transparent background or over a gradient background.

In interest of keeping our web design intact, a solution seems to be to use SVG text in these cases. W3C seems to be good with it, and it passes on FireEyes.

However, I don't know if I'm cheating or not. Graphically it would still look the same on the page, including contrast.

• Does color contrast not matter as much with SVG's? Is it ok to be below the 4.5:1 contrast ration on SVG text?
• Are accessibility tools somehow able to deal with SVG's more easily
  than typical text?
• Are there other concerns unique to SVG text that may arise if we switch?

We are not worried about having to deal with older browsers so early IE is not an issue.

Answer 1

Yes you are cheating. But if you think that it's because FireEyes (or another tool) can't handle the exact background of your text perfectly (because of transparency, or gradient background), it may not be necessary.

Switching to SVG will still imply that you have enough contrast, and it's not because some tool will tell you that your site is OK, that it will be accessible.

You are not doing accessibility to satisfy a tool, but to serve people.

Answer 2

I am in charge of the FireEyes product at Deque Systems. FireEyes does handle background gradients and background images (although there can be false positives when complex images with many different colors are behind text).

FireEyes does not handle SVG text. But SVG text is not well supported by assistive technologies. So you can assume that SVG text is, by definition, not accessible.

The SVG image background is not supported by FireEyes. Could you create jsfiddles of your examples and maybe we can update the product to support these cases better.