Which is better, this or that? Improving the Color Contrast Ratio on Your Website

In a recent job interview, I was asked about designing for accessibility and how that would impact my design decisions. I replied at a minimum I’d use the following guidelines:

  1. Use alt tags with images
  2. Be aware of red/green color blindness issues
  3. And never (ever) use an image for a word on a page

I then decided to put the my portfolio design through an accessibility audit using the Accessibility Developer Tools Chrome extension.

photo of Ann Zerega "Before" Design Homepage showing Chrome Accessibility Audit Tool
Ann Zerega Design “Before” Homepage showing Chrome Accessibility Audit Tool

To my dismay, the light blue color of my navigation bar caused an audit warning of “Text elements should have a reasonable contrast ratio”. This would not be good if a potential client over the age of 40 with presbyopia were trying to hire me – so I researched how to fix the issue.

Which is better, this or that?

For my site contrast issue, I found the WebAIM color contrast checker tool invaluable. I sampled colors from my header image (cerulean was the winner) and darkened them until the contrast checker tool passed the combination of the new color with the navigation white text.

To my delight the improved contrast makes my design bolder and readable. For any future designs, I’ll be sure I conduct this audit early in the process.

Resources: