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.

About these ads

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

  1. Wes Linda

    Excellent article, definately something that any designer should be concerned with during the development of any new site or the redesign of an existing site.

  2. Pingback: Colour Contrast Analyser Now Available for Mac OS X « Oatmeal Stout - Justin Thorp’s Web 2.0 blog

  3. dani

    Justin, I found some fail results on this page using luminosity contrast ratio of color contrast analyser on fx. I have the same problem on my other website. Should I take care of it?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s