Color Contrast.

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

Foreground color

Background color



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:

{R0=R255G0=G255B0=B255{if R0<=0.03928 then RsRGB=R012.92 else RsRGB=(R0+0.0551.055)2.4if G0<=0.03928 then GsRGB=G012.92 else GsRGB=(G0+0.0551.055)2.4if B0<=0.03928 then BsRGB=B012.92 else BsRGB=(B0+0.0551.055)2.4L=0.2126R+0.7152G+0.0722B \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:

{L1=max(L1,L2)L2=min(L1,L2)C=L1+0.05L2+0.05 \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}


This tool was created with the help of and the WCAG website.