Contrast Checker

The WCAG (Web Content Accessibility Guidelines) define specific contrast ratios to ensure text is readable for users with visual impairments. But how do you mathematically calculate the "contrast" between two HEX colors?

Human eyes do not perceive all colors equally. We are highly sensitive to Green light, moderately sensitive to Red, and poorly sensitive to Blue.

To calculate contrast, the algorithm first calculates the Relative Luminance (L) of both colors using a heavily weighted formula:

L = 0.2126 * Red + 0.7152 * Green + 0.0722 * Blue

Notice how Green represents 71% of the luminance calculation, while Blue is only 7%! This perfectly models human eye cones. Once the Luminance of the lighter color (L1) and darker color (L2) are found, the final contrast ratio is: (L1 + 0.05) / (L2 + 0.05).

• AA Level: Requires a contrast ratio of at least 4.5:1 for normal text and 3.0:1 for large text (18pt+ or 14pt+ bold).
• AAA Level: The strictest standard, requiring a contrast ratio of at least 7.0:1 for normal text and 4.5:1 for large text.

The most frequent accessibility failure on modern websites is low contrast on disabled buttons (light grey text on a lighter grey button) and placeholder text in input fields. While designers do this to indicate an inactive state, it often renders the element completely invisible to users with low vision.