Testing Color Contrast for WCAG 1 & 2

May 14, 2008

Topics: Accessibility, Web standards.

Some time ago, while pondering whether web accessibility posed limitations on design, the thought occurred to me that there are presumably some colors which simply cannot be used for text or text backgrounds in any site.

WCAG 1 does not, in fact, provide any specific guidelines concerning color contrast. The formulas commonly used to judge this were specified in Techniques For Accessibility Evaluation And Repair Tools, published in 2000. The document is intended to help authors conform to WCAG, but is not actually part of the WCAG document.

The nature of the Web Content Accessibility Guidelines (WCAG) specifications of color contrast fairly well ensures that some colors in the middle range of the spectrum (in hexadecimal, generally between #666666 and #999999) simply won’t be compatible with any other color.

When this article was initially written, this was more true than it is now. At the time, the limit for normal text contrast was a luminosity ratio of 5:1. The final version of WCAG, however, adjusted this to 4.5:1, which opened up additional possibilities. Nonetheless, if you look at your options using colors like #707070, you don’t have very many choices.

My first thought on this point was to create a chart of colors which simply couldn’t be used in these contexts. I decided against this, on the grounds that it didn’t really seem all that valuable to me. But the thought of viewing color contrast problems in a different way than most color contrast checkers stuck with me.

It seems that most color contrast checking tools work in one of two ways: they either take a webpage and check the contrast factors between text and background on that page, or they allow you to enter a pair of colors and find out how they mesh up.

Since this article was authored, I’ve created a basic tool which compares two colors, as well. Evaluate contrast between two colors.

What I’ve done instead is set up a color contrast checker which only requires you to enter one color, then displays a selection of possible color combinations using that color. It’s pretty straightforward: you can choose to view results ordered according to WCAG 1’s color brightness and color difference tests or according to WCAG 2’s contrast ratio algorithm. Either way, all three factors are displayed, providing a good sense for how the two systems differ.

The results can be quite interesting. Compare the results for #888888 under WCAG 1 and under WCAG 2, for example:

Altogether, I’m hoping that this tool provides an interesting way to approach color contrast issues and to view the differences between WCAG versions 1 and 2.

Resources:

Color Comparison Formulas

Color brightness formula: (must be greater than 125)

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Color difference formula: (must be greater than 500)

(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

Contrast Ratio with Relative Luminance formulas: (greater than 3:1 for print sizes over 14pt Bold equivalence or 18pt normal, greater than 4.5:1 for smaller text)

(L1 + 0.05) / (L2 + 0.05) where L1 = 0.2126 * R1 + 0.7152 * G1 + 0.0722 * B1 on the RGB values of the lighter color and L2 = 0.2126 * R2 + 0.7152 * G2 + 0.0722 * B2 on the RGB values of the darker color.

Have something to contribute?




« Read my Comment Policy

31 Comments to “Testing Color Contrast for WCAG 1 & 2”

  1. Thanks for the suggestion, but that’s not something I’ll elect to change. First, this is an article about color contrast, regardless of whether WCAG specifically defines that or not. Second, I feel that eliminating color would be a petty change that would serve primarily to confuse the issue.

  2. Christophe Strobbe; December 9, 2014 at 2:13 pm

    Hi Joe,

    Would it be hard for you to change “color contrast” in the page title and elsewhere in the content to “contrast”? WCAG 2.0 strictly speaking does not define “color contrast” but ratios for the “relative luminance” of foreground and background. I know that the relative luminance eventually comes down to using the RGB values of the two “colors” in a formula, but the term “color contrast” is not to be found in the WCAG success criteria.

  3. Actually, these formulas do handle testing for color blindness. The purpose of the formulas is to demonstrate that the degree of contrast between two colors has enough difference in a manner not related to hue to be readily differentiated. In pure hue difference, red and green have a great deal of similarity — but if they have enough of a difference of luminosity, then somebody with color blindness can distinguish them.

    It should be noted, however, that this is not in anyway about identifying that one color is red and the other is green — just about distinguishing that two colors are present, and the ability to distinguish the foreground from the background.

  4. Checking for different types of color blindness can also be good. I don’t think the formulas for that are on the W3C site but they mist be somewhere.

  5. Thanks for sharing it! The tool has been updated.

  6. Christophe Strobbe; July 18, 2012 at 11:16 am

    Excellent! Thanks.
    I pointed some colleagues to this tool; I hope they will use it.

  7. You know, I really thought that I had already changed that – but I guess that I changed it in my other color contrast tester, but not in this one. I’ll get that changed today. Thanks for noticing that.

  8. Christophe Strobbe; July 18, 2012 at 11:01 am

    As far as I can see, the Color Contrast Spectrum Tester assumes a threshold of 5:1 (the threshold in most of the drafts of WCAG 2.0) while the final version of WCAG 2.0 uses 4.5:1 as a threshold (see SC 1.4.3: “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for …”). Is there any chance that this will be changed?

  9. Thanks for the article, ive never really thought about evaluating the contrast on my websites. Interesting read!

  10. As mysterious as it is, it’s nice to know that I don’t have to recode anything! Glad you “solved” your problem.

    (Don’t you just love it when you “solve” problems without having the faintest idea what you might have changed?)

  11. Christophe Strobbe; October 2, 2008 at 7:49 pm

    Hi Joe,
    I redid my spreadsheet with more intermediate columns (i.e. additional columns for the sRGB values) and the discrepancies are now gone. I still don’t know what was wrong with the original version. At least you don’t need to worry about your PHP function.