Ensure contrast between your text and your background with right colors

Recently I was looking for a tool to measure luminosity of a given color and wrote about it here. My objective was to guarantee enough contrast when defining a css color palette for text and background.

Today I came across this on-line tool that is targeted exactly for that purpose. It is called Contrast Ratio:


Hope you enjoy it! Thanks to Lea Verou for her amazing projects!

Measuring the luminosity or lightness in a color

While preparing my css templates, I find sometimes that the color I am working on needs a dark background or a light background to enhance readability.

So, how do you find out if the color you have reaches the luminosity threshold?

Use math! You can take the Hex code of the color and play with it. You can find a simple javascript code to do it here: http://stackoverflow.com/questions/12043187/how-to-check-if-hex-color-is-too-black

And an explanation of what lum is, in Wikipedia: http://en.wikipedia.org/wiki/Rec._709#Luma_coefficients