Luminosity contrast ratio
Most accessibility aware web designers will know about the need to check the colour contrast of critical design elements to make sure that foreground and background color combinations provide sufficient contrast. There are a couple of excellent online tools available that help you calculate colour contrast:
WCAG (Web Content Accessibility Guidelines) 2.0 suggests a new method of ensuring that there is enough difference between foreground and background colours: calculating the luminosity contrast ratio. To help designers understand how luminosity contrast is different from colour contrast, Gez Lemon has written an article that explains the Luminosity Contrast Ratio Algorithm. Gez has also created a Luminosity Contrast Ratio Analyser that will calculate the luminosity contrast ratio for you.
- Previous post: Internet Explorer 7 and * html
- Next post: 18 blogging lessons
Search and sponsorship
Job opportunities
Job openings from Authentic Jobs
Looking for web hosting?
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost
Comments
Colour Contrast Analyzer is an excelent utility. I have been using it for a while. You can pick color from anywhere on the screen and it will do all the calculations for you.
I use ColorZilla to pick colours from anywhere on a browser window.
This is an excellent post and an excellent tool. I've had problems with the current trend of "light on even lighter" color-scheme. I think it's fine for a personal site, and I can see why so many designers find it appealing (allbeit in a 'follow the crowd' sort of way), but its readability shortcomings become clear once you try to read a long article. It's even funny if you really think about it. You don't see this type of low-contrast settings in applications we interact with on daily basis (email, code editor, etc.) so why do we insist this is a good way to present copy on our web site?
What an excellent tool, I've been thinking of making something similar. If it provided suggestions for modifying either the foreground or background color it would be perfect.
You might also be interested in the following article I wrote, and some PHP code that produces color gradients based on a background color and automatically adjusts a foreground color to provide an accessible contrast: http://www.barelyfitz.com/projects/csscolor/
I agree with klevo...I'd recommend Vision Australia's Colour Contrast Analyser tool as a cool little app with more functionality than the online tools. Very handy.
soxiam:
I can't ;-). What's appealing with having to squint until you get a headache? Same thing with the current "light text on a dark background" trend. Completely unreadable to me.
On the one side - it's a intresting tool, but on the other hand I don't think I need a tool that tells me if I can or I can't read the text good. I think a good web developer knows that and does not need a analyser. Though, sometimes it's better to have a confirmation of you'r thoughts.
@Gustavs: while it's nice to use common sense in designing colors, often a client (or designer) provides the color choices. As a web developer it's nice to have a tool like this to use as a two-by-four to beat them into submission.
VIS 0.03
A nice program to check your site or anything on the screen for people with eye disabilty.
Best would be to actually have a minimum contrast allowed property within CSS. I guess this has been brought up in the www-style list. This would be awfully great in cases where there is a user CSS and also for authors who don't want to do the math themselves.
Sorry, comments are closed for this post.