Designing with Accessible Color Contrast on the Web

By now you probably understand that color contrast is important to a website’s accessibility. You are dutifully checking the color contrast values to make sure the color combination passes. Perhaps you’re even using a color blind simulation tool to make sure colors are discernible. You’re doing all the right things, but you find the state of your website designs frustrating. You’re left asking questions that are border-line existential. Should all colors be accessible? Does this content need to be an accessible color? What really defines an accessible color?

Have you ever played around with the contrast tool in Photoshop or some other photo editing tool and turned to the highest setting? Every color becomes simple and blown out. What was millions of colors is brought down to a handful. Adjusting the contrast levels of a display is one of the most common changes a person can make to their device. Contrast adjustment is a feature of both physical displays and operating systems. How can we use these tools to help identify and fix color contrast issues with our designs?

As I have worked to make a more accessible and well-designed web, I have learned to approach web design differently. Just like Responsive Web Design required a change to how we approached designing websites, making accessible and inclusive design requires its own adjustments to the design process. What steps can you take to design with good color contrast?

Designing accessible websites is a challenge, but it is worthwhile for everyone. Making a design accessible can be accomplished without making it bland or frustrating. The challenge with all design is working within constraints. With web design, these constraints include a particular awareness of color usage and content priority. The end goal of any design is that it communicates effectively and guides the viewer where they need to go, regardless of who they are and what needs they may have.