clock menu more-arrow no yes mobile

Filed under:

Accessibility design 101: How to check for contrast and legibility

I recently came across an application (thanks to our accessibility Slack room) that allows you to test the contrast levels of colors you're using with an eyedropper, rather than enter hex codes.

The problem: I have used the WAVE chrome extension before, as well as other things online that test contrast based on hex values. Those tools are great, but I've been searching for something to help me check my colors as I work in Photoshop (or whatever other program).

The solution: The Colour Contrast Analyser (CCA) allows you to check the contrast and legibility of elements in your design, without having to enter in any hex codes! There is an eyedropper that lets you quickly select any colors to test for legibility and contrast. An example in action:

colour contrast analyser with photoshop screenshot

The pop up windows over photoshop are the two CCA windows. This is an example of what using the eyedropper tool looks like.

Minimum contrast requirement is just one section of one guideline outlined in Web Content Accessibility Guidelines. A lot more goes into designing and building an accessible website than just checking contrast levels. But, this is one helpful tool for making sure you're making legible designs.

If you have any other great tools you use, please share!