Visual Accessibility Basics for Web Designs

Photo by UX Store on Unsplash

When I was first introduced to accessibility, I only thought about the physical world around me. It was a while before I took the digital world into account. Through my studies, I discovered various groups of people on the spectrum of human ability and how they interacted with websites. Now that I’ve been immersed in the world of digital accessibility and have passed the Certified Professional in Accessibility Core Competencies exam through the International Association of Accessibility, as a designer, I’d like to share some basic information on visual accessibility for web designs. By following these guidelines, you can ensure that your websites are accessible to users who still have some vision and can perceive web pages visually in some way.

Photo by David Pisnoy on Unsplash

Color

Naturally, let’s start with color. Color is a staple for folks who fall on the spectrum near me, who rely primarily on their vision. Without question, color is playful and amazing, especially when excellent color theory is applied, but it should not be the only way information is conveyed. Some users could have low vision or have some form of colorblindness that would prevent them from interpreting color-coded information. Here are some things to keep in mind when using color and designing with accessibility in mind.

Do’s:

Give additional information when using color to distinguish between information.

Left: We don’t know what the colors are representing. Right: Here we can see that the color means difficulty and the text helps clarify that.

Be sure to include alt text that has a description of information that the color is trying to convey by being color-coded.

For example, the chart above should have alt text that reads something like <alt=” Points scored, Period 1, Team 1, 24 points, Team 2, 89 points. Period 2, Team 1, 36 points, Team 2, 24 points.”>

Don’ts:

Don’t use color alone to make a link distinguishable. Add an underline or something for the hover state.

Left: A color blind person may not detect a link in this example. Right: The underline lets us know that this is still a link even if it did not have color.

Don’t use color alone to convey meaning. I’m sure a lot of you have seen this before. A color-blind person wouldn’t be able to see the number.

Photo by Luemen Carlson on Unsplash

Contrast

Contrast is the level of visual intensity created when light colors and dark colors are juxtaposed. The minimum contrast ratio for a single A experience as designated by the WCAG 2.1 is 3:1. Bad contrast can create a visual barrier between your content and the intended audience. Users across the spectrum of visual ability will have a hard time understanding or enjoying content that doesn’t stand out from its background. When measuring the contrast of your design, here are a few things to think about.

Do’s:

Use a color contrast checker when designing! Here are a couple of common resources.

1. WebAIM’s Contrast Checker
2. Color Review

Or if you are feeling ambitious and want to create your own contrast checker, check out “Create Your Own Color Contrast Checker” by Cameron Messinidies.

Visual Boundaries for UI components have high contrast.

Left: Unclear boundaries. Right: Clear

Don’ts:

Low contrast + Small text = a bad user experience.

In the example above, the text is difficult to read even if you have clear vision. For someone who has low-vision, this would be nearly impossible to perceive without an adjustment from a piece of assistive technology.

Visual layout

Lastly, it’s important to pay close attention when laying out information. It should be done in a logical manner. When layouts that are sporadic and unorganized, they can cause a user to lose interest in searching and feel frustrated when looking for information. Assistive tech users and users with cognitive variations will have difficulty when navigating. When thinking about visual layout, here are some things to consider.

Do’s:

White space is your friend! It can help create a natural boundary. When coding with HTML and CSS, keep the box model in mind. Using margins, and padding around content can help achieve this.

Image from W3 School’s CSS Box Model

Lead the viewer with strategic placement of elements. Think about where the user might look next. Compositional techniques, like the rule of thirds or leading lines, will be your compass.

Don’ts:

Don’t forget about the information architecture, the structural design of information, before designing. It’s vital to utilize the planned structure of the website using a sitemap as your roadmap for where information should be placed.

Avoid fonts that are hard to read the smaller they become. Decorative compositional techniques are a common culprit. They should be used for headlines and used sparingly.

Accessibility goes far deeper and touches every part of a product and not just the visual aspects. These visual accessibility tips are just the beginning of creating an excellent website and user experience for all people on the spectrum of human ability. Use these basics as a bridge into learning more about accessibility and creating a better, more human-centric design.