WCAG 2.0: Do you have enough color contrast on your Web site?

Ever go to a Web site where you feel you have to squint to read the text because the color contrast is so bad. Having appropriate color contrast on your Web site is very important. You may lose a chunk of your audience if they can’t adequately read the text because of not enough contrast between background and foreground colors.

In the W3C’s Web Content Accessibility Guidelines (WCAG) 1.0, the only thing they say about having enough color contrast is in checkpoint 2.2:

2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text].

The natural question would be, what does “sufficient contrast” mean? How can I measure that? It’s a checkpoint that I could easily shrug off an say, “Sure my sight as sufficient color contrast.”

In the latest drafts of WCAG 2.0, color contrast is a little bit more spelled out. Level AA Success Criteria 1.4.3 says:

1.4.3 Contrast (Minimum): Text (and images of text) have a contrast ratio of at least 5:1, except if the text is pure decoration. Larger-scale text or images of text can have a contrast ratio of 3:1. (Level AA)

If you’re more ambitious, Level AAA Success Criteria 1.4.5 says:

1.4.5 Contrast (Enhanced): Text (and images of text) have a contrast ratio of at least 7:1, except if the text is pure decoration. Larger-scale text or images of text can have a contrast ratio of 5:1. (Level AAA)

But what does it mean to have a contrast ratio of 5 to 1, 3 to 1, or 7 to 1? Well thats what development and evaluation tools are for. The tools can be built around the appropriate algorithms to tell us whether or not we have good color contrast on our Web site.

The Web Accessibility Tools Consortium has put out the Luminosity Contrast Ratio Analyser 1.1. This is a great tool to use at the beginning of the design process. You can enter color choices and see if there is enough color contrast to be in conformance with WCAG 2.0. Unfortunately the tool only currently works with Windows (sorry Mac designers.)

No after you have posted your site online, you should check again to make sure that all of your background and foreground colors have the appropriate contrast. Gez Lemon of Juicy Studio and participant in the WCAG Working Group has published his tool, the Colour Contrast Firefox Extension.

With the tool, you can go to any Web site and analyze all of the different background and foreground color contrast levels. A table with all of the different colors that are used will come up. It will point out exactly what needs to be fixed.