Color Contrast.

Input your colors below to check if they respect accessiblity recommendations.

Foreground color

RGB

HEX

Background color

RGB

HEX

Contrast:

1:1

A quick brown fox jumps over the lazy dog.

The fox is quicker indeed.

What is color contrast?

Color contrast is a unit which measures the difference in luminance between two overlapping colors (text and background, for example). As a unit that doesn't depend on the hue of a color but on its luminance, it helps determine the accessibility of different color combinations. WCAG (Web Content Accessibility Guidelines) requires a contrast level of at least 4.5:1 (The higher the number, the more contrasted the two colors are). You can use the tool above to test whether your foreground and background colors have adequate contrast.

How is color contrast calculated?

W3C defines the following formula to calculate the luminance of a color in RGB units:

\begin{cases} R_0 = \frac R {255}\\ G_0 = \frac G {255}\\ B_0 = \frac B {255} \end{cases}\\ \\ \begin{cases} \text{if } R_0 <= 0.03928 \text{ then } R_{sRGB} = \frac {R_0} {12.92} \text{ else } R_{sRGB} = \left(\frac {R_0+0.055} {1.055}\right) ^ {2.4}\\ \text{if } G_0 <= 0.03928 \text{ then } G_{sRGB} = \frac {G_0} {12.92} \text{ else } G_{sRGB} = \left(\frac {G_0+0.055} {1.055}\right) ^ {2.4}\\ \text{if } B_0 <= 0.03928 \text{ then } B_{sRGB} = \frac {B_0} {12.92} \text{ else } B_{sRGB} = \left(\frac {B_0+0.055} {1.055}\right) ^ {2.4}\\ \end{cases}\\ \\ L = 0.2126 R + 0.7152 G + 0.0722 B

With the luminance of the two colors, the contrast ratio is caculated with the following formula:

\begin{cases} L_1 = \max(L_1,L_2)\\ L_2 = \min(L_1,L_2)\\ \end{cases}\\ \\ C = \frac {L_1 + 0.05} {L_2 + 0.05}

Credits

This tool was created with the help of accessibility-developer-guide.com and the WCAG website.