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:

• Colour Contrast Check
• Colour Contrast Analyser

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.

Posted on January 6, 2006 in Accessibility

• Previous post: Use CSS background images responsibly
• Next post: CSS 3 selectors explained