Visual28-Personal Blog of Mark Aplet - Design, web, and other topics

Applications to help you create more accessible designs

Back in May, I wrote an article on tips for improving your web design. One small piece of that article discussed converting your design to greyscale so that you can get an idea of your color contrast ratio. Though I believe this is important to do, it is a bit time consuming when your in a design grove, and speed is of importance. Sometimes I just want a quick preview to see where I was going or how I was doing thus far in my process.

I remember seeing an online contrast analyzer and decided to look it up to see what it was about. My search turned up quite a few helpful tools that I just had to share with the rest of you. Before I get to the tools, let me take a minute to explain why we would want tools for testing contrast ratios in our designs.

Why do we need contrast analyzers?

In a perfect world, we would all see things the same way. This of course is reality and some people are deficient in particular colors or in some cases some may only see in grayscale. Some colors when converted to grayscale do not display with enough contrast to be legible for some people. Items on a page may completely disappear from the screen. See example below. It illustrates what a typical person would see vs. someone with Typical Achromatopsia (No Red Cones) This is a great example showing why we need to check color contrast and choose colors that work well with one another as well as have enough contrast so that important elements can be seen on a page.

Just for sake of demonstration, this example has a contrast ratio of only 1.34:1 So it is very low. Understanding colors have a different contrast or luminance value, and that two completely different colors can have the same or similar contrast ratios. The closer the values get to a 1:1 ratio the more they appear nearly identical in luminance. (appear to be the same color)

What is the right contrast ratio?

The W3C says that the contrast between the foreground and background should be at least 7:1. Personally I think this ratio is a bit to high and too limiting for a lot of designers. I do try to keep my ratio as high as possible, however I think a 5:1 or higher ratio is perfectly acceptable for most situations. In my opinion, contrast ratios should be a starting point for your design and not be taken so literally that your design suffers greatly.

Too much contrast might also be bad

In researching topics on WCAG recommendations for contrast, I ran across an article that points to a problem with the WCAG recommendation of high contrast. Apparently it cases problems for users with dyslexia.  I don't want to over complicate this topic by getting into the specifics of contrast rules. I tend to think that a moderately high contrast ratio of 5:1 to 6:1 is still the best for almost all users. If you test your sites with some of the following tools, then chances are you will spot any problem areas that are obvious and make corrections.

Okay, finally the part you have been waiting for. The tools- I have broken them into two categories. Desktop tools and online tools. I tried to find apps that were mac and PC compatible so that nobody feels left out. Being a mac person, I tended to gravitate to the mac applications in my bookmarks. I did find a few sites with links to other tools available for users and listed them below in the "Additional Resources" So if you don't find something here, check these other sites as they contain other great links as well.

Desktop Tools

Sim Daltonism – Hands down my favorite and most used desktop tool for color testing. (Mac OS X only) It allows you to preview a number of color blindness situations in real time where ever your mouse pointer is located in a floating palette.

Color Contrast Analyser – (Mac and PC compatible) This is a very handy utility as you can test contrast ratio, luminosity and color blindness in real time. It's probably a better tool than Sim Daltonism but it's not as convenient.

Colour Contrast Visualiser - (Mac and PC compatible) this is a pretty cool application available as an Adobe Air application, though I could not get it to install on my version of Adobe Air. The swf version worked great though. The interactive contrast line is really handy and gives you a great visual representation on what will pass and what will not.

Vischeck – (Mac and PC compatible) This site has both a downloadable plugin for photoshop and an online version for testing. I didn't like the interface that much so I didn't try this one out. The idea of a photoshop plugin sounds interesting though.

Online Tools

Colors on the Web – I liked this online tool a lot because it provided a WCAG 1.0 and WCAG 2.0 scale and also took into account the point size of the fonts. Something the others did not. It also provides the priority level rating like AAA  that is also handy for knowing where you stand. I wished this tool had a color picker option as it would be the best choice for me.

Snook Colour Contrast Check – This is a great online tool and uses simple sliders to change the values on the fly, making it handy to adjust a color in small increments to achieve a better contrast ratio.

Firefox Colour Contrast Analyser add on – This simple plugin allows you to test sites already online.  This could be really useful if you need to upgrade or convert sites already in existence. It does not test graphics so you will have to test those individually using one of the other tools.

CSS Analyser – A multi function test for checking contrast as well as testing css validity of your CSS against the W3C's validation service.

Luminosity Contrast Ratio Analyser – Another test by juicy Studio that calculates the luminosity contrast ratio.

AccessColor – Provide a url for your site and this tool will output a report of warnings or errors, the effected text and the class or ID used for the element. This helps you isolate the exact css that you might need to edit. I wish it made a suggestion based on the luminosity difference so that it was a quick fix tool for developers. Humm… Gives me an idea for an application of my own :)

Additional Resources

WC3 – Color Contrast Recommendation Topic G17
Visual 28 – Tips for better web design
456 Berea St – 10 colour contrast checking tools to improve the accessibility of your design
WAI – Complete List of Web Accessibility Evaluation Tool

Posted by Mark Aplet on July 24, 2008 8:35 PM 3 comments

Share this: