WebAIM - Web Accessibility In Mind

WebAIM Color Contrast Checker

I decided to bring together many aspects of the various color contrast checkers out there to build one of my own that provides just the functionality that I often need.

http://webaim.org/resources/contrastchecker/

This relatively simple contrast checker:

  • allows you to enter or select foreground and background colors
  • provides functionality to lighten or darken the colors slightly to find acceptable contrast levels
  • displays the contrast ratio based on the WCAG 2.0 luminosity formula
  • indicates if the colors pass the WCAG 2.0 Level AA and Level AAA requirements for normal text and large text.
  • shows a sample of the colors specified for quick viewing

Comments

  1. Fritz Weisshart

    Hi Jared,

    well done.

    Just one observation:
    Foreground #FFFFFF and Background #676767
    outputs
    Contrast Ratio: 5.7:1
    but
    WCAG AAA: Fail

    did I miss out on any detail in the WCAG specs?

  2. Jared Smith

    Fritz,

    The AAA requirement for normal text is 7:1. 5.7 is less than 7, so your combination is indeed a AAA failure.

    Or am I misunderstanding something from your comment?

  3. Fritz Weisshart

    Hi Jared,

    Sorry – I should have looked better before 🙁
    AAA AA
    and AAA is usually out of my reach, and therefore out of my mind.

  4. Dennis at Web Axe

    Very nifty tool! Kudos again to WebAIM.

  5. Juan Pablo Tirado Tapia

    I am a 16 years old male with a diagnosis of retinitis pigmentosa. I study at the
    Loaiza Cordero Institute for visually disable persons and I need to know how can
    I install in my computer a program in which the background is
    black and the letters are white and how can I change the size of the letters
    (magnificized).

    Thanks for your help.

  6. Adam

    Ahhh…this is precisely what I was looking for. Been debating the contrast on a development site, and this will help prove my point. Thanks!

  7. Peggy

    A handy tool indeed – thanks!

  8. Todd W

    What constitutes large vs. normal text?

  9. Jared Smith

    Todd-

    The definition for large text is at http://www.w3.org/TR/WCAG20/#larger-scaledef

    It is 18 point or larger, or 14 point or larger if the text is bold – more or less.

  10. Dean Verkuehlen

    Hello Jared, it is so amazing that this thing allows me to enter or select foreground and background colors. It is one of the best things I’ve ever seen. It provides functionality to lighten or darken the colors slightly to find acceptable contrast levels — great! That it displays the contrast ratio based on the WCAG 2.0 luminosity formula is absolutely fantastic! And that it indicates if the colors pass the WCAG 2.0 Level AA and Level AAA requirements for normal text and large text is so wonderful. It also shows a sample of the colors specified for quick viewing — marvelous!!!
    Thank you Jared! More of that, please!!!

  11. michael Sommer

    A very interesting tool, it must continue testing times, there are more features on this?

    Thanks Jared!!

  12. Hahnefeld

    I found the tool, because i want to check every of my pages für good web accessibility. Good work! Greatings and best wishes from Germany!

  13. Konstruktionsbüro

    Easy to use for beginners and selfmade-man ;)! Thank you very much for your help. It is easy to use and we need no graphics application to get the rgb-codes.

  14. Dessous

    A nice tool,thanks Jared!
    good work! 😉

  15. Chris

    Hello Jared Smith, this is a great tool. I have a site for people with multiple sclerosis. I have too MS. Since I also have problems with the eyes so i can have very good test, which contrast is best suited.

    Thanks … Chris

  16. Unterhaltungskünstler

    This is the ultimate tool. I discussed a lot with my webmaster and as it seems, we’re gonna solve a lot of problems we used to have in one blow.

    Thanx a million. CHRIS

  17. Zauberer-München

    A great and almost magical tool, allowing for a perfect handling!

    thanks a lot

  18. Olaf

    This Contrast Checker is a top tool for all people, not only for people with problems with their eyes. Highly recommended.
    Best Regards
    Olaf

  19. Mike Molde

    This contrast checker is one of the best I’ve ever seen. my compliment. rather, he is the best I have ever seen.
    Mike Molde

  20. xtc-templates

    A handy tool indeed 🙂 thanks for this cool contrast checker. The best tool i have ever seen.

  21. Corina Mandel

    Is it possible to develop a new version, where a background-image can be uploaded for contrast checking? Without a Paint Shop or PhotoShop it is not possible to get the RGB codes 🙁

  22. Jared Smith

    Corina-

    We don’t have plans for an image contrast checker. However, if you open the image in Firefox, you can then use CollorZilla (http://www.colorzilla.com/firefox/) to extract the RGB color values from within the image.

  23. Klaviero

    Cool, I didn`t know about Colorzilla yet, the name itself is pretty funny tho…

  24. Nicole Friedmann

    can i use the tool also for my iphone?

  25. Werbetechnik Köln

    wow, i were looking so long for such a tool.
    very handy!
    thx for posting

  26. Marcel

    Wow Colorzilla, that is a pretty cool name indeed. Looks like a good tool

  27. Dennis

    Thanks for this great and helpfull tool!

  28. DJ Muenchen

    Oh man, that’s a perfect tool. I was spending plenty of hours in the net to find this tool.
    Thanx a lot mate!

  29. Meissen

    i looking so long for a tool like this. thanks
    its very easy…

  30. Chris

    I’ve searched for 3 months for this tool thank you very much

  31. DJ München

    What a cool tool. Thanx for opening my eyes. 🙂

  32. AW-Dessous

    A handy tool indeed thanks for this cool contrast checker. The best tool i have ever seen

  33. Massagesessel und Relaxsessel Shop

    What a great and easy to use tool. Wish I would have found this useful information earlier. Thanx 4 this article.

  34. zauberer

    Hi Jared,
    thanks for your good help to other people! I appreciate that very much. Best wishes from Germany,
    Michael

  35. Kinderbücher

    Great programm for testing the contrast, i must test my own sites with it…

  36. Lederpuschen

    Yep – I like the color-contrast checker. A very good online tool and very helpfull. I was searching for this. Thanks a lot.

  37. Suchmaschinenoptimierung

    Thanks for this great and helpfull tool!

  38. Zauberer ballonkünstler

    Very helpful tool, thanks a lot !

  39. Zauberer Weihnachtsfeier

    What a nice tool – simple but very useful – thanks for sharing it with us…

  40. Poster

    This tool is really beyond epicness 😀

  41. trotter

    nice tool, easy handling, thanks for sharing.

  42. Rentenversicherung

    Very nifty tool! Kudos again to WebAIM.

  43. Zauberer Düsseldorf

    This tool is fantastic. It helps me a lot. Thank you very much.

  44. DJ Berlin

    What a great tool. Thank you from Berlin!!

  45. Angelboot

    Hi Jared, great tool, very helpful for me. Thanks

  46. mpur

    Thank you very much for your help. It is easy to use and we need no graphics application to get the rgb-codes.

  47. Zauberei

    Some real good advice. Thank you. The issue with contrast on Websites is one to take seriously! Thanks for the useful tool.

    Dean