up vote 6 down vote favorite

I just ran a contrast and colour test (using checkmycolours.com in this case) on our corporate site (www.dotblue.net; if you care) and it reports quite some failures. However, I explicitly optimized for readability on multiple screens during the design phase and don't agree with a lot of the listed failures.

My question: what is the scientific background of these tests? Should we worry about these results and change the contrasts in our website?

share|improve this question
  • As it stands now, this question is asking about a specific tool rather than general colour tests. Please make it more general as questions about tools aren't allowed on here. – JohnGB♦ May 8 '13 at 15:14
  • Somewhat ironically, the checkmycolours site uses 100% white text on 100% black. Ouch, my eyes! – DA01 May 8 '13 at 19:40
  • @JohnGB: thanks, I've changed the question. Now it only explains which specific test I used, let me know if it's still incorrect. – vincent.io May 8 '13 at 20:37
  • @VincentvanScherpenseel Much better. Now it's useful beyond just the tool. – JohnGB♦ May 8 '13 at 20:45
up vote 8 down vote accepted

CheckMyColours.com uses the Web Content Accessibility Guidelines (WCAG 2.0) contrast tests.

The validity of the tests is something to bring up with WCAG rather than checkmycolours.com.

I am unaware of the WCAG providing the research supporting their contrast ratio standards. However, my experience with those standards is that they are fairly lax. I've seen pairs of colors that meet the standard that are difficult to read (for me, at least).

One of the tests is the luminosity contrast ratio formula.

You can see how checkmycolours performs the calculations for this test by viewing the JavaScript file in which those calculations are made.

  • Open Chrome's dev tools.
  • Click on the Sources tab.
  • Open the js folder.
  • Open the ccheck_min.js file.

    I spent a few minutes looking at their code. There are recognizable parts of the WCAG 2.0 relative luminance formulas in there. For example, search for this in the file

    if(r<=.03928){o=r/12.92}else{o=Math.pow((r+.055)/1.055,2.4)}

    and you will be in the middle of their contrast calculations.

    An easier way to test their results is to calculate the contrast ratios yourself or use another ]3rd party tool like](http://juicystudio.com/services/luminositycontrastratio.php).

    Should you worry? Only if you care about people's ability to see the everything you've drawn, written, charted, etc. on your site. :)

    • share|improve this answer
    • 7
      WCAG's rationale for contrast ratios is based on third-party research studies and existing standards. – Matt Obee May 8 '13 at 15:08
    • @MattObee This is exactly what I was unaware of and improves the answer immensely. Thanks. – user1757436 May 8 '13 at 15:11
    • 1
      Many thanks for this excellent answer. Especially with @MattObee's addendum this was exactly what I'm looking for. I would like to highlight this quote from the referenced rationale: "The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision.". This makes the validity and importance of these tests very clear to me (and it explains why I found our website to be readable enough). – vincent.io May 8 '13 at 20:43
    up vote 1 down vote

    Your first question has been answered by user user1757436.

    I'd like to add something to your second question. First of all, your page is all good and designed nicely. Secondly, contrast is definitely a very important aspekt of web design.

    Should you worry about the results from the test of checkmycolours.com?

    a, checkmycolours.com

    There are many errors reported for color combinations that don't exist on your page.

    It takes part of a standard (impossible to consider everything) without any note about restrictions or validity of the results.

    b, WACG

    I think you realized yourself that the standard has limited usefulness with respect to how certain values are calculated, or what gets labeled "good" or "bad". The most misleading is probably "Color Difference".

    Therefore I would only worry if a client specificly asks for WACG compliance.

    Font size has a big impact on readability. Since your font size is bigger than normal (good) the results of the tests are not valid (it also states this in the standard).

    For future work I'd like to recommend checking your colors with this tool. If the "Lum"-difference of two colors is greater 30% you are good in general. Make it greater 40% if you really want to be sure. Remember that bigger font size lowers the requirement. The disadvantage is that you cannot present a "standards"-document...

    Finally, I would change the font color of your contact-form-send-button into white, since you used white in every other case where the cyan-blue is the background color.

    share|improve this answer
    • Thank you very much for your thorough input, appreciated :) I just don't understand your last paragraph, do you meant the button at the bottom of the page (in the Contact session)? Or the one in the "We're hiring" widget? – vincent.io May 10 '13 at 9:31
    • I meant the one at the bottom / in the contact session. Now that you say it: aesthetically I like the "We're hiring" widget as it is now. On the other hand, if I wanted to attract more clicks I'd skip the sharpen effect, or at least make an a/b test... – John May 10 '13 at 11:44
    • Maybe I'm missing something, but white on white isn't really recognizable, is it? :) – vincent.io May 10 '13 at 20:14
    • I see a cyan-blue button at the end of your contact form with the text "Send" on it. The text color of the text "Send" is #f2f2f2 (a very light gray). It's the text color I would change into white. :-) – John May 11 '13 at 8:59
    • Ah! Good point, thanks! :) – vincent.io May 11 '13 at 19:21

    Your Answer

    By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.