While WCAG 2.0 outlines specific requirements for contrast between text and background colors, these can sometimes be difficult to test.

Fortunately, there are some basic tests you can use to identify potential contrast issues.

Print the page without color

I know, noone has just a black and white printer. But printing your page without color is an excellent way to find out how it’s going to look when viewed by someone with color blindness. Alternatively, you can temporarily graysccale your site to get the same result. Just make sure you put everything back when you’re done.

Decrease your screen brightness

A second quick way to test color contrast is to look at your page with your screen brightness decreased. This is particularly helpful on mobile devices.

Take off your glasses

If you wear corrective lenses, taking them out of the picture will give you a quick and easy way to find out how a site’s going to look in regard to color contrast. If the contrast is bad, you’ll be forced to squint to get everything. If it’s good, the site will be easier to read.

Resources for checking color contrast

Finally, here are some resources you can use to either check the contrast of your site’s existing colors or to determine a good color scheme to use when designing your site.

The Color Contrast Spectrum Tester

The Color Contrast Spectrum Tester by Joe Dolson wil let you enter a color’s hex value, and then it will provide a selection of contrast colors that you can use to make sure you’re following the WCAG 1.0 or 2.0 guidelines.

Color Contrast Tester

If you want to simply test whether or not two colors are going to mesh well in regard to color contrast, this color contrast tester will let you do that. It asks for a foreground color and a background color, and tests to make sure they meet WCAG 1.0 or 2.0 color contrast success criteria.

What about color theory?

I think it’s important to note that, while accessibility is extremely important, it doesn’t mean that everything else goes out the window. For instance, if you’re a blind person trying to design a site, you need to make sure that your color scheme meets WCAG guidelines, and, if you or your client are aiming for a particular goal, like readability or sales or email subscribers, good design still matters. If you’re a sighted designer, good color contrast and general web accessibility doesn’t mean that what you create has to be ugly. You can still have functional, pleasing design while keeping it accessible and meeting your client’s goals.