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 (Web Content Accessibility Guidelines) 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.


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

32 Comments on “Testing Color Contrast for WCAG 1 & 2”

  1. Saber si puede ser usada por personas discapacitadas

  2. 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 (Web Content Accessibility Guidelines) specifically defines that or not. Second, I feel that eliminating color would be a petty change that would serve primarily to confuse the issue.

  3. 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 (Web Content Accessibility Guidelines) 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.

  4. 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.

  5. Checking for different types of color blindness can also be good. I don’t think the formulas for that are on the W3C (World Wide Web Consortium) site but they mist be somewhere.

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

  7. Christophe Strobbe

    ; July 18, 2012 at 11:16 am

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

  8. 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.

  9. 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 (Web Content Accessibility Guidelines) 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?

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

  11. 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?)

  12. 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 (Hypertext PreProcessing) function.

  13. 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.

  14. 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?

  15. 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!

  16. 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 (Web Content Accessibility Guidelines) 2.0 implementation. The first two combinations would meet WCAG 2 Level AAA according to your function, but would fail according to mine. Hmm.

  17. 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?

  18. Christophe Strobbe

    ; October 1, 2008 at 5:07 am

    My own calculations of colour contrast with the relative luminance formula from WCAG (Web Content Accessibility Guidelines) 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?

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

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

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

  22. 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!

  23. 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.

  24. 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 (Web Content Accessibility Guidelines) 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.

  25. 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 (Web Content Accessibility Guidelines) 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 (Portable Document Format)).

  26. 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!


  27. 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.

  28. Interesting. Thanks for the post. 🙂

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

  30. 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 (Web Content Accessibility Guidelines) 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.

  31. I had to change the WCAG (Web Content Accessibility Guidelines) 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.