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:
RsRGB <= 0.03928then
R = RsRGB/12.92else
R = ((RsRGB+0.055)/1.055) ^ 2.4
GsRGB <= 0.03928then
G = GsRGB/12.92else
G = ((GsRGB+0.055)/1.055) ^ 2.4
BsRGB <= 0.03928then
B = BsRGB/12.92else
B = ((BsRGB+0.055)/1.055) ^ 2.4
RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255