SVG's and BADCamp | 95Visual Digital Marketing Agency

by Justyn Singer

SVG, or Scalable Vector Graphic, is a unique format for screens compared to its counterparts of PNG, JPEG, and others. An SVG is different because of the functionality offered on things such as a website or an app. The properties of an SVG can change depending on what the creator wants; it can be as simple as a height change without it becoming pixelated or for it to be animated. Even with these amazing properties, there are still possible issues that arise with ADA/WCAG compliance concerning things such as animation induced nausea and maintaining an acceptable color rating according to AA and AAA guidelines. This blog is a summary of the presentation put together by Carie Fisher, at BADCamp 2020, and her findings on how ADA/WCAG compliance affects SVG's.

Color & Contrast

Starting with her point on the color and contrast of SVG's and the content around it: Make sure that the SVG is legible to its background. Now with that said, it is fairly easy to have colors and not have them meet ADA/WCAG guidelines. That is unfortunate because now there is an audience that cannot see the SVG or its design. Depending on which spectrum of the color-blind portion of the audience cannot see can affect the rating from ADA/WCAG. Thankfully, the guidelines have a clear rule on the contrast ratio (AA or AAA ratings) so that the vast majority of people can see the SVG.

Using online tools and contrast checkers can help to keep colors within the confines of compliance so that there is not an issue. The recommended downloadable tool by Carie Fisher is the "Colour Contrast Analyser (CCA)" by The Paciello Group. This contrast tool has many useful features ranging from a visible numeric contrast ratio to whether or not the colors meet certain WCAG expectations. However, an alternative option would be this website. The base of it is the same but requires manual input of colors versus using a dropper feature to pick up the color. Both are just fine to use, free, and available to everyone so that there is no excuse in checking the colors of online items.

Lastly, for Color & Contrast would be to mention the ability to control SVG's based on the theme of the device. The importance of this is because many tech companies are starting to normalize a "dark theme" on their products. From websites to mobile devices, everything is starting to get a "dark theme" option, and this can drastically change how elements of an app or website are seen. Thankfully there are ways to help conform to this so that the "dark theme" does not have to ruin the aesthetic for any elements. What is available for front end development is the media query of "prefers-color-scheme," and this allows for the front-end developer of the site or app to dictate how items react to the "dark theme." The use of this property ensures that an icon or other elements change to use colors that keep the appropriate contrast needed whether or not a "dark theme" is enabled.

SVG Animation

The other half of the presentation was briefly on how animated SVG's work and WCAG guidelines on SVG animations. Within the impressive list of things that SVG's can do, being able to animate an image or icon is high. That said, it is important to note the somewhat strict guidelines that WCAG has in place.

One of the bigger guidelines to follow would be the time or length of the animation. As an example: if the animation is longer than five seconds, then it is important to add a play or pause button. This is so that any member of the audience that has a motion sickness issue caused by moving items can still enjoy and use the site without becoming sick. In relevance to the size of the animation: if it were to take up a lot of the viewable space in the web-browser then it should also have the option to be played or paused. All of this ensures that every person has a chance to view and use the site without becoming ill.

Just as with "Color & Contrast," Carie Fisher also pointed out a useful item for front end developers called "prefers-reduced-motion." This media query allows for an alternate version of the animation to happen. Some examples provided were: skip the animation altogether and go to what is at the end or not have it animate at all. This allows for anyone who may suffer from motion induced sickness to avoid that and still enjoy your site. Additionally, there are other means to help with this and be items such as: play and pause buttons on auto-moving slideshows or to have the item be disabled and then allowing for the user to enable it themself when they want to.

Overall this session was very informative and while there more things that Carie Fisher went over, those were the bigger points. The knowledge and understanding helped to showcase how powerful SVG’s can be when used correctly and the annoyance it can cause when done poorly. Hopefully this helps to encourage more people to use SVG’s in the right way so that websites and other web based projects can continue to grow and be intriguing.