14 Brilliant Tools for Evaluating Your Design’s Colors

Jul 8 2009 by Jacob Gube | 20 Comments

Making sure that you choose the appropriate colors for a design is very important for readability. In addition, ensuring that the colors you select are viewable by persons with vision deficiencies such as color blindness is a good practice to follow when thinking about web accessibility.

In this article, you’ll read about excellent free tools for checking to see if the colors you are using are consistent with standard color contrast, brightness, readability, and accessibility best practices.

1. Check My Colours

Check My Colours

Check My Colours is a web-based tool for checking your website’s foreground and background colors. It’ll check all stacked web page elements based on W3C’s WCAG recommended luminosity contrast ratio and color brightness. It’s easy to use: just plug in your web page’s URL, press "Check!", and it outputs a nice tabular report for all elements.

2. Color Oracle

Color Oracle

Color Oracle is a desktop tool available for Mac, Windows, and Linux operating systems: it simulates color vision deficiencies. The creators of the tool also have a Design Tips section on their site that shares a couple of useful whitepapers on color accessibility. Note that Windows and Linux users require Java 6.

3. Colour Contrast Visualiser

Colour Contrast Visualiser

This tool is an Adobe AIR desktop application for visualizing appropriate color combinations. It’s a wonderful tool for picking your website color palette. If you’re concerned about web accessibility, it’d be a good idea to have this tool around during the design phase of your projects.

4. Accessibility Color Wheel

Accessibility Color Wheel

This tool is a convenient way to experiment with various color combinations: it helps you rapidly envisage what color schemes look like. To test and tweak color choices, simply move your mouse around the color wheel and evaluate for readability. At the bottom of the tool’s web page, you’ll see simulations for particular forms of color blindness.

5. GrayBit

GrayBit

One way to check if a design has sufficient color contrast is by converting it to grayscale and seeing which parts are hard to read. Use GrayBit to convert a web page to grayscale; it will even convert web images on that page. It’s a great tool for visualizing a web design’s color contrast and readability.

6. Vischeck

Vischeck

Vischeck simulates what things look like to people who are colorblind. It has several options for usage: you can run it on a web page, upload an image file (like a design mockup), or download a Photoshop plugin for local testing. Vischeck’s example page clearly explains how the tool works with demonstrations to highlight what it evaluates.

7. Luminosity Contrast Ratio Analyser

Luminosity Contrast Ratio Analyser

This desktop-based tool by the Web Accessibility Tools Consortium (WAT-C) is intended for checking color combinations to determine if they provide satisfactory color visibility. This app requires the Windows operating system and it has only been tested on 2000 and XP.

8. Sim Daltonism

Sim Daltonism

Sim Daltonism is a vision deficiency simulator for the Mac OS X. The tool allows you to simulate one of the eight supported color blindness conditions such as Monochromacy and Protanopia (a dichromat condition). Please note that Sim Daltonism requires Mac OS X 10.2.8 (or later versions).

9. Colour Contrast Analyser

Colour Contrast Analyser

This Firefox add-on developed by Juicy Studio allows you to conveniently examine colors of text DOM nodes on web pages. It’s a nifty tool to add to your development workflow as you test your work. It’s also great for checking out the color contrast of other websites.

10. Color Laboratory

Color Laboratory

This uncomplicated web tool allows you to discover color combinations and how they might look like to a person with color blindness. Color Laboratory is very easy to utilize and only requires three basic steps, all of which are outlined in their quick start guide.

11. AccessColor

AccessColor

AccessColor is a web tool that checks the color contrast and color brightness of foreground text to background color. You simply place your web page’s web address into it, select whether you want to see only errors or a full report, press “Check!” and it outputs a nice table of the results.

12. Colour Contrast Analyser

Colour Contrast Analyser

This desktop application (for Windows XP and Vista) is designed for examining your foreground and background color combos for color contrast and brightness. There’s a user guide on the site to help you get started with it quickly, as well as downloads available in several languages.

13. Color contrast verification tool

Color contrast verification tool

Hewlett-Packard has a simple web tool on their site for evaluating the color contrast characteristics of two colors. You use the RGB value of your colors as inputs, and it outputs the brightness and color difference of your values are, as well as whether the combination is conformant with W3C/WCAG recommendations.

14. Luminosity Colour Contrast Ratio Analyser

Luminosity Colour Contrast Ratio Analyser

Juicy Studio has a nifty web tool for analyzing background and foreground color contrast ratio. All you need to do is key in your background and foreground color values in hexadecimal units (for example, a white background is #ffffff) and it will subsequently tell you whether the combination passes WCAG 2.0 contrast recommendations.

What’s your favorite color-checking tool?

Is your preferred tool not shown above? If not, don’t forget to share it with us in the comments and tell us what your experiences are with it. And if you use any of the tools above, we’d also love to learn about your experiences with it!

Related content

20 Comments

BryanRegencia

July 8th, 2009

Six Revisions is indeed the best resource site for Web Designers. Thanks for sharing these tools.

Cheers!

Bariski

July 8th, 2009

Thanks buddy, will surely come in handy. Bookmarked!

Zhu

July 9th, 2009

Great tools! I do think color is very important and few websites use it right.

My favorite tool is http://colorschemedesigner.com (this is not my site, not spam ;-)

ntiremedia

July 9th, 2009

its been really nice of you ppl to run the blog in suceh a nice way ill pr for your secess as its helping us…and you tip and tecniques are helpfull

Akhtar Sheikha

July 9th, 2009

its a great article with useful tools, thanks for sharing!

insic

July 9th, 2009

this is quite useful tools. but adobe PS color picker is more handy. :)

Lyndi

July 9th, 2009

I have just played around with some of the stuff you have listed here. This was quite an eye-opener. Boy, do I have a lot of changes to make to my site. Thanks for this.

joyoge

July 9th, 2009

nice useful color tools, thanks for the list..

Steve

July 9th, 2009

I love to design, make graphics, and do a lot of work with Photoshop. Luckily for me, we have all these cool tools at our disposal today 0 otherwise, a color-blind web designer would have no hope. Here’s one I use regularly; you can easily change the lightness/darkness of your selected color: http://meyerweb.com/eric/tools/color-blend/

Have fun with your shades!

cancel bubble

July 9th, 2009

Check out Contrast-A at http://www.dasplankton.de/ContrastA/

It allows users to experiment with color combinations, examine them under the aspect of accessibility guidelines and to create custom color palettes. Contrast-A checks color combinations for sufficient contrast and displays the results according to WCAG 2.0 (Luminance Ratio) as well as the results according to older accessibility guidelines, WCAG 1.0 (Difference in Brightness and Color).

Ashley Adams

July 13th, 2009

Wonderful set of tools here. In all honesty, I knew only about half of them myself. Couldn’t help but admire the humane streak in these tools. If web designers would use them more often, the Web could be even more universal.

Calgary Graphic Design

July 20th, 2009

These may be great ways to objectively test clients’ ideas!! Thanks!

Marty

August 13th, 2009

There’s a great app for the iPhone that helps colorblind people identify, match and coordinate colors. It also tries to compensate for certain color vision deficiencies. It’s a must-have for colorblind iPhone users.

HueVue also simulates common forms of color blindness and can be a useful tool for normally sighted people too.

Check out http://www.huevue.com.

designfollow

October 23rd, 2009

thanks for this great post!

Jonny

December 31st, 2009

You gave us a cool list, thanks for your post.

Satya Prakash

March 10th, 2010

so cool. I have just used one tool – checkmycolor and it was so fun. I will check all one by one.

MAK

March 24th, 2010

nice one i am searching for some tools for my website , as i am redesigning my site thanks

Craig

September 9th, 2010

I didn’t know there were tools to help take some of the head-ache out picking a colour scheme, Great resource!

Lasse Klein

February 15th, 2011

Thanks for this great list!

I have made an iPhone app for text color contrast checking that I’m adding here to complete your overview.

http://itunes.apple.com/sg/app/contrast/id413261154?mt=8

I did a bit of research before making the app, but somehow missed your page and the great tools listed here. I think #1 & #3 are my favorites of the above.

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences.

Mobify