Tool to help improve readability of your website…

Posted by Dan on Apr 3, 2009 @ 4:13 PM

One problem that can often come up when designing a web site is problems with legibility of the text on your web site. You might have issues with kerning, line spacing, font size and even the contrast between the foreground text and the background color.

The tool I'm sharing with you today is one to help ensure that you have proper contrast between the foreground text and your background color.  The color contrast tool uses the W3C has formulas developed by the W3C to detect sufficient contrast between your text and the background color.

I originally got the idea from the Color Contrast Check tool, and while it's really helpful fine tuning settings, it didn't really help through out some suggestions of colors that are close to my original but that will improve the contrast/brightness differentials.

That's what makes the Color Contrast Tester unique. If your contrast/brightness levels aren't sufficient it'll work on some variations that improve the differential. While the tool isn't perfect, I've found it extremely useful over the past 6 months since I developed it.

Using it is simple, just plug in the hex values for the foreground and background colors and it'll give you your brightness and contrast differences and then suggest some variations that pass what the W3C suggests as being appropriate.

Let me know what you think!

Color Contrast Tester

Categories: HTML/ColdFusion

Add Comment

Leave this field empty