5 Tools for Building Accessible Websites

When researching how to design accessible websites, you will probably find a lot of testers, checkers, and auditors. These are great; fantastic tools for determining how accessible a design already is. However, a major advantage a web designer can gain is the ability to design in an accessible way as they go. 

When you design with accessibility in mind the entire time, you save so much time. Accessibility is not, and should never be, an afterthought. Instead, to save time and effort, make it a built-in part of your design process. 

Here are a few of my favorite tools that allow me to prioritize accessible design as I go, not after launch.

1. The Accessible Color Palette Generator from Vengage

One of the easiest things to get wrong – and trickiest to go back and fix – is color. 

WCAG (Web Content Accessibility Guidelines) requires at least 4.5:1 for normal text and 3:1 for large text (18pt/14pt bold) for Level AA compliance. Level AAA requires even higher ratios (7:1/4.5:1) for enhanced accessibility, and interactive elements need a minimum 3:1 contrast. 

You can understand what all that means – but it’s not always easy to just look at two colors and know what ratio they have. 

So when I’m designing a color palette, I use this tool from Vengage to do it. I plug in my primary color’s HEX value and the tool provides various types of palettes (contrasting, monochrome, etc.) with details about how the colors can be used. This way, I start with colors I know work.

2. WebAim’s Contrast Checker

If I’m redesigning a site, or using an established color scheme, I’ll want to start by making sure the colors I have can be used well. I’ve got this site bookmarked so I can plug in any two colors and see their ratio.

One of my favorite things about this tool is that – if the colors aren’t accessible when used together – I can slide around their lightness until the contrast ratio is acceptable. The tool will also tell me if that combination passes when used as Normal Text (AA and AAA), Large Text (AA and AAA), and Graphical Objects and User Interface Components (AA). Using this tool, I don’t need to go back later to test my colors.

3. Unsplash for Stock Photography

Moving on from colors, let’s briefly talk about images. I love using Unsplash for a few reasons:

1. The images in the library can be downloaded at four different sizes. This saves me valuable time with resizing. It can serve images at reasonable sizes and therefor cuts down on page load time.
2. The images come with ALT tags baked in. Unfortunately they don’t populate automatically when uploaded to a site. But I can use Inspect in Google Chrome to find the ALT tag, then copy and paste it where needed. 
3. I’ve been using Unsplash for close to a decade now. Over the years I’ve noticed a significant improvement in their catalog in terms of diversity. I don’t need to hunt and search to find people of color. I’ll see folks with visual disabilities in photos where I wasn’t looking for them. I feel confident that when I’m picking images from Unsplash, I won’t need to go back later to make sure my imagery is inclusive. 

4. The Accessibility Checklist from Elsevier 

There are so many guidelines outlined in the WCAG, it’s near impossible to remember every single one as you’re building a site. So it’s worth it to have something bookmarked that enables you to check in as you work to make sure you’re on the right track. 

This checklist breaks everything down in a more approachable way. You can even download a one-page PDF for designers that explains the guidelines in plain English. This is incredibly useful and saves so much time. You don’t need to go hunting through the gigantic WCAG website and risk missing something. And if you’re checking off items as you go, you can feel much more confident when you’re testing later on.

5. Stark for Figma

This plugin for the Figma design tool gives you everything you need to keep accessibility top of mind as you’re designing. 

If you’re new to web accessibility in design, the tool helps you learn as you go with tips and suggestions. It reviews not only the colors you’re using, but typography, ALT text, focus order, touch targets, and even contains a vision simulator. One of the most powerful parts of this tool is the fact that if one issue is present in multiple places within your file or design system, you can fix them all with a single click.

To Sum Up

It’s important to know how to test for accessibility, and then repair the issues you find. But testing and remediation often takes time and budget that you may not have. When you bake in accessibility as you design, you eliminate the need for exhaustive testing (and, let’s be honest, your clients will be so impressed.)

If you’re looking for a company that knows accessibility, reach out! We’d be happy to discuss how we can help build your accessible website.