c0debabe creates

Tool of the Day

An attempt at blogging more regularly by sharing knowledge in small bits.

Today: Color Contrast Grid

Color Contrast Grid

https://contrastgrid.com is a tool for checking the color contrast of all the colors in your design palette against one another.

If you're not familiar with color contrast as an design or accessibility concept, color contrast is the ratio of luminance between to colors. Basically, how easily can you distinguist one from the other.

In practical web design terms, can you the text on the page if one color is the text color and the other color is the background color.

For the Math Nerds

If you really wanted to calculate this yourself you can!

Color Contrast Ratio is (L1 + 0.05) / (L2 + 0.05) where

• L1 = relative luminance of lighter color
• L2 = relative luminance of darker color

Relative luminance is calculated as

L = (0.2126 × R) + (0.7152 × G) + (0.0722 × B) where R, G and B are defined as:

• if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
• if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
• if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

where

• RsRGB = R8bit/255
• GsRGB = G8bit/255
• BsRGB = B8bit/255