The Web Accessibility Handbook | Chapter 1: Colors

Designing accessible experiences is not only the right thing to do, it helps your company grow. As the WCAG guidelines can be difficult to follow, we created this handbook to explain in simple terms how to make your designs both compelling and accessible.

While accessible design has received a lot of attention, it’s surprising that many popular websites are still not fully accessible. That’s probably because creating accessible designs, especially ones that sizzle, can be challenging.

Through many deep (and sometimes heated) discussions often guided by our web accessibility certified developer, Eric Mikkelsen, we’ve learned a lot about making designs both highly inclusive and beautiful—and we’ve become very passionate about it. The purpose of this series is to share our knowledge with others, hoping that more and more people will create exciting digital experiences that don’t exclude anyone from enjoying them.

The first chapter is about how to use color so that your designs are both accessible and engaging. We’ll walk you through the basics of color contrast in addition to many of the grey areas (no pun intended), e.g. how to use color with various button states, user-interface components, etc. And we’ll share some tips and tricks for creating eye-catching designs with a more limited color palette.

Some topics we cover related to colors are:

• Color contrast for text
• Color contrast for non-text elements
• Tips for color usage
• How and when to use additional indicators

Quick disclaimer, we're not lawyers, so we can't tell you if this will keep you from getting sued. We do think it'll help you make great work even better.