Today, we’re hearing more and more about ADA compliance and how people should strive to make their websites more accessible. Designers now have a plethora of accessible resources for free to help facilitate compliance through design.
Website accessibility has been a popular subject here at Brown Bag. It’s also been a favorite topic and challenge of mine—how can I create an impressive design that follows the client’s brand guidelines and be accessible to all?
Here are my top 5 resources that have helped our team create websites that are on brand and ADA compliant.
Why I love it: The plugin highlights the problem areas for accessibility. It even gives you explanations to help you better understand why those areas can be an issue for users.
A little more detail: This is a great tool if you’re looking to make updates to your website that improve accessibility but don’t necessarily know how to get started. It’s a free Chrome tool extension that can be used to evaluate any website and will call out the problem areas you can improve such as color contrast.
Why I love it: You get a bird’s-eye view of how colors should – and shouldn’t – be used together.
A little more detail: If you get the opportunity to create a color palette from scratch, it’s the perfect time to build in accessible colors! With this tool, you can add up to five different colors that’ll generate different combinations with text and colored backgrounds. When a gray box appears, that means that the text color combined with the background color isn’t compliant and should be avoided.
Tip: This tool is also great if you’re working with a styleguide that doesn’t include accessible colors for web, and you need a visual way of explaining to your client why you can’t use certain colors and color combinations. Show them how their palette can be improved by giving them colors that are close to the original color—and accessible. And the next tool on our list will help get you there!
Why I love it: It gives new color options that are in the range of the original color and also compliant.
A little more detail: This tool allows you to input your foreground and background color to check the contrast between the two. As you can see, the lightest green color I inputted (where the arrow is) has a ratio of 2.4 against a white background—too low of a contrast to be accessible. Below my original color, the tool generated a range of compliant colors that are within the same color range. Unfortunately, you can see the difficulty for designers to remain true to brand colors in a digital space—the suggested options are much darker than the original.
Tip: If the suggested compliant colors are too different from the original, we’ve suggested to our clients that these colors only be used for decorative purposes, such as in illustrations or icons.
Why I love it: This tool evaluates text over imagery and gives you a pass/fail percentage based on each compliant level. It’s an easy way to see what you need to adjust based on the results given.
A little more detail: How many websites have you seen with important information placed over images that are difficult to read? I’ve seen plenty. And most of the time, it’s a paragraph-long message. This can be frustrating to your user if there is an important direction to follow … but they have to squint to read it. This text and image contrast checker is great to test text over your images before you upload them to your site.
Tip: Any text over an image will most likely need a dark overlay on it. I will typically add this to the image before I upload it to test the contrast.
(5) Hacking Digital Styleguides for Accessibility (Skillshare Course)
Why I love it: Most styleguides provided have yet to be adapted to work in digital applications. This course explains how you can take an existing styleguide and adjust it to make it accessible for your users.
A little more detail: I hate to play favorites, but … this Skillshare course has been my favorite. It’s a great introductory course that gives you tips on how to improve your designs for accessibility as well as best practices when the website goes into development.
There are many resources out there that can help you create more accessible designs. Did you find any of the ones I listed helpful to you? Or do you have any tools that are your favorite? Let us know in the comments!