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
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?
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?
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.
Very nifty tool! Kudos again to WebAIM.
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.
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!
A handy tool indeed – thanks!
What constitutes large vs. normal text?
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.
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!!!
A very interesting tool, it must continue testing times, there are more features on this?
Thanks Jared!!
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!
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.
A nice tool,thanks Jared!
good work!
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
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
A great and almost magical tool, allowing for a perfect handling!
thanks a lot
This Contrast Checker is a top tool for all people, not only for people with problems with their eyes. Highly recommended.
Best Regards
Olaf
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
A handy tool indeed
thanks for this cool contrast checker. The best tool i have ever seen.
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
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.
Cool, I didn`t know about Colorzilla yet, the name itself is pretty funny tho…
can i use the tool also for my iphone?
wow, i were looking so long for such a tool.
very handy!
thx for posting
Wow Colorzilla, that is a pretty cool name indeed. Looks like a good tool
[...] to grab the CSS and find some nice colors that will make the color checkers at Juicy Studio and WebAIM [...]
Thanks for this great and helpfull tool!
Oh man, that’s a perfect tool. I was spending plenty of hours in the net to find this tool.
Thanx a lot mate!
i looking so long for a tool like this. thanks
its very easy…
I’ve searched for 3 months for this tool thank you very much
What a cool tool. Thanx for opening my eyes.
A handy tool indeed thanks for this cool contrast checker. The best tool i have ever seen
What a great and easy to use tool. Wish I would have found this useful information earlier. Thanx 4 this article.
Hi Jared,
thanks for your good help to other people! I appreciate that very much. Best wishes from Germany,
Michael
Great programm for testing the contrast, i must test my own sites with it…
Yep – I like the color-contrast checker. A very good online tool and very helpfull. I was searching for this. Thanks a lot.
Thanks for this great and helpfull tool!
Very helpful tool, thanks a lot !
What a nice tool – simple but very useful – thanks for sharing it with us…
This tool is really beyond epicness
nice tool, easy handling, thanks for sharing.
Very nifty tool! Kudos again to WebAIM.
This tool is fantastic. It helps me a lot. Thank you very much.
What a great tool. Thank you from Berlin!!
Hi Jared, great tool, very helpful for me. Thanks
Thank you very much for your help. It is easy to use and we need no graphics application to get the rgb-codes.
Some real good advice. Thank you. The issue with contrast on Websites is one to take seriously! Thanks for the useful tool.
Dean