Testing Color Contrast for WCAG 1 & 2

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

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

  1. The font size isn’t part of the contrast comparison; it’s simply that large font sizes have a different boundary measurement. So although a font size of 18pts will pass where 12pts won’t, it’s not because the algorithm is different; just because the judgement is different.

    It would be interesting to experiment with incorporating the font-size directly into the algorithm, and if the guidelines specified a sliding scale that would probably be pretty reasonable; but with the guidelines having only a couple of markers, it doesn’t really make any sense to incorporate that element into the algorithm itself.

  2. I’m curious, when concerning WCAG2, the font size affects the requirements (bigger text, less contrast allowed). Is this considered? Is this possibly affecting the outcome?

  3. Interesting…it’s certainly enough of a difference that you can be reasonably sure it’s not a rounding error!

    Without seeing your spreadsheet, obviously I can’t make any practical comparisons between the two formulas – but something is clearly fishy!

  4. Christophe Strobbe; October 2, 2008 at 8:24 am

    Hi Joe,
    Thanks for posting the function. My implementation is in an ODF spreadsheet. I can’t see anything wrong in your function. And after several rechecks I can’t see anything wrong in my spreadsheet. Go figure!

    Below are a few colour combinations that I tested yesterday:
    #F0FFD2 on #006400:
    7.06:1 (Spectrum Tester),
    7.06:1 (Color Contrast Comparison),
    6.8 (my spreadsheet)
    #FFFFD2 on #006400:
    7.26:1 (Spectrum Tester),
    7.26:1 (Color Contrast Comparison),
    6.98 (my spreadsheet)
    #EEEECC on #004B2D:
    8.68:1(Color Contrast Comparison),
    8.59 (my spreadsheet)

    I discovered this while working on a WCAG 2.0 implementation. The first two combinations would meet WCAG 2 Level AAA according to your function, but would fail according to mine. Hmm.

  5. Thanks for comment, Christophe! The actual function I’m using to test relative luminance is this:

    
    function luminosity($r,$r2,$g,$g2,$b,$b2) {
    	$RsRGB = $r/255;
    	$GsRGB = $g/255;
    	$BsRGB = $b/255;
    	$R = ($RsRGB < = 0.03928) ? $RsRGB/12.92 : pow(($RsRGB+0.055)/1.055, 2.4);
    	$G = ($GsRGB <= 0.03928) ? $GsRGB/12.92 : pow(($GsRGB+0.055)/1.055, 2.4);
    	$B = ($BsRGB <= 0.03928) ? $BsRGB/12.92 : pow(($BsRGB+0.055)/1.055, 2.4);
    
    	$RsRGB2 = $r2/255;
    	$GsRGB2 = $g2/255;
    	$BsRGB2 = $b2/255;
    	$R2 = ($RsRGB2 <= 0.03928) ? $RsRGB2/12.92 : pow(($RsRGB2+0.055)/1.055, 2.4);
    	$G2 = ($GsRGB2 <= 0.03928) ? $GsRGB2/12.92 : pow(($GsRGB2+0.055)/1.055, 2.4);
    	$B2 = ($BsRGB2 <= 0.03928) ? $BsRGB2/12.92 : pow(($BsRGB2+0.055)/1.055, 2.4);
    
    	if ($r+$g+$b <= $r2+$g2+$b2) {	
    	$l2 = (.2126 * $R + 0.7152 * $G + 0.0722 * $B);
    	$l1 = (.2126 * $R2 + 0.7152 * $G2 + 0.0722 * $B2);
    	} else {
    	$l1 = (.2126 * $R + 0.7152 * $G + 0.0722 * $B);
    	$l2 = (.2126 * $R2 + 0.7152 * $G2 + 0.0722 * $B2);	
    	}
    	$luminosity = round(($l1 + 0.05)/($l2 + 0.05),2);
    	return $luminosity;
    }
    
    

    So, yes, I am actually applying that adjustment. The information posted in the article is just the definition of the ratio, not the actual formula used to derive the ratio -- it's simplified. I certainly won't claim that there can't be a bug in that function - and if you see one, by all means let me know!

    Can you give me an example of the difference you're getting?

  6. Christophe Strobbe; October 1, 2008 at 5:07 am

    My own calculations of colour contrast with the relative luminance formula from WCAG 2 generate slightly different results from what I get with the colour spectrum tester. In the last section of your article (“Color Comparison Formulas?) you list the formulas you use, but the section on the WCAG 2 formula does not mention how R, G and B are defined. WCAG 2′s relative luminance definition also says: “if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4?. You don’t mention this. Does that mean that you don’t use this in your tool?

  7. Thanks! Glad it helped you out, Gustavo.

  8. Thank you, the Color Contrast Spectrum Tester was exactly the tool I was looking for.

  9. Thank’s a lot. Glad I found this be able to be a part of conversation.

  10. It’s a problem with asides…they’re easy to ignore. But since I added it as an afterthought, I didn’t want to take the time to rewrite the article to include the information…

    But I like the tool; I’ve already adapted a stylesheet with the suggestions that it provided.

    Thanks! Glad to know it’s doing some good!

  11. Christophe Strobbe; June 16, 2008 at 9:47 am

    Curiously, I just read past the aside in the gray box.

    But I like the tool; I’ve already adapted a stylesheet with the suggestions that it provided.

  12. In fact, I said as much in the article above — granted, not in as much detail as you’ve provided here. I generally refer to them in short as WCAG 1 tests for simplicity. It’s commonly accepted that these tests are applied for WCAG 1 due to the fact that the document itself simply doesn’t contain any specific guidelines for testing at all.

    Thanks for bringing that color contrast document to my attention — it’s very interesting.

  13. Christophe Strobbe; June 16, 2008 at 6:34 am

    This is a very useful tool, but it isn’t correct to identify the first two colour comparison formulas as WCAG 1 tests, because neither WCAG 1 nor its techniques documents contain such formulas. Those formulas come from a draft for Techniques For Accessibility Evaluation And Repair Tools and there is an emphasized text above the algorithms that says: This is a suggested algorithm that is still open to change.

    Techniques For Accessibility Evaluation And Repair Tools doesn’t contain references to research that supports the requirements for colour brightness difference (125) and for colour difference (500); I assume the values in the document are high to be on the safe side. The BenToWeb project did research into several colour contrast algorithms and found that for readers without colour vision deficiencies, the thresholds for the colour brightness formula were a difference of 66.8 for readable text and a difference of 85.5 for highly readable text. See Evaluation of colour contrast module (PDF).

  14. The main use of it, from a practical perspective, would be something along the lines of identifying an acceptable base color scheme to go along with a logo you need to match or other pre-existing media objects. For that purpose, it could potentially save a lot of time!

    Thanks!

  15. Wow! Even such thing exists =D Amazing stuff. Used to do it manually to find a suitable colour to match. Thanks for the link. Bookmarked. Cheers.

  16. Interesting. Thanks for the post. :)

  17. Nice tester by the way. This will be added to the Accessites resource list.

  18. I agree — it makes a lot of sense to have different expectations based on the size of text.

    One thing that I particularly enjoyed while developing this script was being able to compare WCAG 1 and WCAG 2 compliance side-by-side in the data tables. It’s fascinating to note that in many ways WCAG 2 is more generous in what it allows (by contrast ratio) than WCAG 1 does by brightness and difference.

  19. I had to change the WCAG 2 site to a body font color of #555 from #666 just for this reason. I do like the differing requirement values between large and small fonts smart and practical. Gotta hand it to the WHATWG there. That was good.

Return to Top