Web Accessibility is an important factor in your design and development. With 56 million people with a disability in the United States alone (almost 1 in 5), and 1 billion worldwide, making your website accessible is not something to merely dismiss. Not only is it a requirement for many, it is just plain good UX, leading to your sites ability to reach a wider audience, improve SEO and site search-ability, and maybe even increase conversions. Luckily, making your site accessible is not as hard as you might think!

I will be creating this list of web accessibility recommendations in a three part series, focused each part on: Order and Tags, Content and Labels, and Color and Contrast.

Part 3 - Color and Contrast

Color Contrast and Text Clarity

Text clarity is one of the biggest obstacles a visually impaired user must face on a regular basis. It is one of the easiest areas for us to take measures to ensure the text on our websites and projects remains clearly readable. Text color across our site should contain enough color contrast from its background that any type of visually impaired user can comfortably read it. Along with color choice, font size and line spacing can play a factor in readability. Color contrast does not stop at text usage, but should be a factor considered in any usage of color that directly conveys a message.

What to do
Use recommended color contrast ratios for text across your site to ensure readability for all viewers.

• WC3 Color Contrast Recommendation: 4.5 to 1 to meet AA conformance level
• Font size should be at least 16pt, or 14pt bold
• Line spacing should be at least 25% of font size
• The use of re-sizing font based on screen size is encouraged

Resources

• CSS-Tricks: Understanding Web Accessibility Color Contrast Guidelines and Ratios
• Smashing Magazine: 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake
• Jxnblk Colorable: Color Contrast Checker

Don't Use Color Alone to Convey a Message

There are certain times (error messages for example) when designers use color as a visual cue to convey a message. It is important when it comes to web accessibility that color alone is not the only thing used, as there are several types of visual impairment and many people fall into the visually impaired category. Color alone cannot be relied upon to convey these sorts of messages, and additional visual cues (including an exclamation point for our example) should be included so that all users can clearly understand.

What to do
Do not rely on color alone to convey your messages. Include the use of icons, labels, patterns, or additional visual cues such as underlines or font weight to ensure all users are aware of the message that is being portrayed.

Resources

• Medium: Accessible Form Validation
• Invision Design: A guide to color accessibility in product design

Figures and Charts

Figures and charts can be an incredibly effective way of communicating data, but it is important to remember when creating them that you cannot rely on color itself. Elements within a chart still require clearly defined labels and easy to view data points, and often times when color contrast is hard to meet it is recommended that patterns be used to further distinguish the data elements. If in question about having enough contrast within data points, a good trick is to view the chart in black and white and see if you can easily tell things apart.

What to do
Always use labels in your figures and charts to clearly identify elements and data points. If in question about color contrast between data points, visualize them in black and white and decide if patterns should be added to better distinguish between them.

Resources

• Highcharts: Chart accessibility best practices
• Sim Daltonism: A Color Blindness Simulator

Conclusion

Awesome! I hope you found this first set of recommendations useful in your journey into web accessibility. Web accessibility is always evolving and improving, and I am still trying to learn more about all of the requirements, options, and nuances available do designers and developers. Remember, making your website accessible opens doors to new users and is just plain good UX design, so implementing the basics is a great start. Please respond with any comments or additional resources I can include that readers might find useful!

Additional Resources

Below are some additional web accessibility resources, tools and guidelines for your site or project.

• W3C Web Content Accessibility Guidelines (WCAG) 2.1
• UX Collective: Designing for accessibility is not that hard
• UX Pin: 8 Website Accessibility Best Practices to Improve UX
• Invision Design: A guide to color accessibility in product design
• Inclusive Components: A library of ideas for making components accessible
• Vox Media: Accessibility Checklist for Designers, Engineers, and Project Managers

Additional Tools

• AXE: Web Accessibility Testing Chrome Extension
• Jxnblk Colorable: Color Contrast Checker
• Sim Daltonism: A Color Blindness Simulator
• SilkTide: Disability Simulator for the Web

View Part 1
View Part 2