Learning About Visual Accessibility
Visual web accessibility is not something I frequently thought about until recently. I had assumed that anyone would be able to use, and navigate the products I designed, regardless of visual impairments. For too long, I subconsciously thought that my “designer eye” would be able to catch anything that people might find difficult to read or see. I’ve since learned that the best approach is to maintain a consistent practice of looking through the eyes of someone who can't look through yours. Visual web accessibility can get complex, but don’t worry, there are some simple things that we can do that can help elevate our designs so everyone can enjoy them.
What is Visual Web Accessibility?
Visual web accessibility is a standard that ensures everyone, regardless of the extent of their impaired vision, color blindness or blindness, can use a digital product with as much ease as possible. It’s the discipline of accounting for text size, color contrast, and clear CTAs, so that those who are visually imparted can use the product. A common misconception is that visually accessible websites cannot be visually stunning. On the contrary, I’ve noticed that incorporating accessibility not only elevates the usability but it’s aesthetic as well.
How do I achieve Visual Web Accessibility?
There are technically three degrees of visual web accessibility that are identified as suitable for low vision, color blindness, and blindness. The WCAG 2.0 (Web Content Accessibility Guidelines), which are recognized by the federal government and many other nationtions, give guidance to ensure that visual web accessibility is achieved. The methods of testing, and the standard we need to meet, are determined by these guidelines. Some of the most common tests analyze the contrast ratio and focus on compliance levels that cover low vision and color blindness.
Using contrast ratio as a measurement, we can determine how easy it is to distinguish text from its background. The measuring system makes sure that we are satisfying the accessibility standards for contrast, the way it works is like this. Starting at a 0 contrast ratio, this is represented by a 1:1- this is interpreted as white text on white background. Black text on white background is represented by a 21:1 ratio. All the numbers in between these ratios represents an amount of contrast a hue has against a white background.
Levels of Compliance
The compliance levels are primarily meant to address users with low vision. This refers to anyone who has difficulty reading certain font sizes, or fonts that don’t have enough contrast. In order to make sure the right contrast and font size is met, the WCAG 2.0 provides what are called the levels of compliance. There are three levels of compliance in total, and they are known as: A (lowest), AA (mid range), and AAA (highest).
The way these levels work is based on cumulation, so conformance at higher levels indicates conformance at lower levels. For example, by conforming to AA, a Web page meets both the A and AA compliance levels. Level A sets a minimum level and does not actually achieve impactful accessibility. For this reason, W3C (an organization that’s a global leader in web accessibility) recommends AA conformance for all web based information. AAA levels are typically the required standard for government, education or charity websites.
To figure out if you are using the right size and contrast of font, you can download an accessibility plug in for whatever design tool you’re using.
Most accessibility plugins not only tell you if you're meeting a certain level of compliance, but they’ll also tell you what the contrast ratio is as well. On top of that, most of these plugins have vision simulations for different types of color blindness. This is especially useful when you are using color as a status indicator, or a CTA. If you're solely relying on color for some of these indicators it might be time to re-think the UI to see if you can make it clearer for everyone. Here is a list of some very useful plugins for a variety of product design softwares.
Able - Figma This is one of the best plugins that I’ve found. It’s incredibly powerful because it constantly updates the test results as long as you select two elements that have a foreground and background. It has the ability to swap the colors so you can possibly preview a dark mode component. It also has a vision simulator for the most common color blindness symptoms.
Stark - Figma, Sketch, Adobe XD What makes this plugin so useful is that it can be added to multiple design softwares, and in my opinion, is a little bit easier to understand. I mainly use this one for contrast ratio for text, because it shows you what your target ratios are. The only thing I don’t like about this plugin is that you have to first select the two elements that you want to test in your design doc, then launch the plugin, and you have to pay for the vision simulator for color blindness. Otherwise, this is an excellent plugin.
WebAID (contrast checker) If the word plugins scares you, or you use some kind of design tool that doesn’t have an accessibility testing feature, (first off maybe it's time to upgrade) this is an excellent resource. It’s a free website that allows you to test the hex values of your components, it requires a few more steps but it gives you the same result as the plugins mentioned above.
The All Seeing Eye This topic is fascinating and learning more about it will only make you more valuable as a designer or developer. It will help you be a source of relief for those living with visual disabilities. As mentioned before, just because you’ve got great vision, doesn’t mean you’re always able to make the right calls about accessibility. Your eyes alone are not enough. Leaning on the tools and resources that are available will broaden your already perfect vision to be able to see even more.
I’ve provided some links that I used to write this article that are excellent sources to learn more, but honestly I’ve only scratched the surface. We didn’t even talk about people who are blind, or deaf, or nearly paralized, to learn more, check out our other article Accessibility in Design. There is a whole world of accessibility out there and everyone wins if we, as designers, learn more about it. Let’s make sure that everyone can appreciate how awesome our designs are, the more eyes that can see it the better.