Color Contrast Checker

What Is Color Contrast Ratio?

Color contrast ratio is a quantitative measurement of the perceived brightness difference between two colors. As defined by the WCAG (Web Content Accessibility Guidelines) 2.1 specification published by the W3C, the ratio is calculated using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is that of the darker color. The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).

This ratio is critical for web accessibility. If the contrast is too low, users — especially those with low vision, elderly users, or anyone viewing screens in bright sunlight — cannot read the content. This is not merely a design preference; it is a legal requirement in many countries under disability discrimination laws like the ADA (US), EN 301 549 (EU), and the Equality Act (UK).

WCAG AA vs AAA Conformance Levels

WCAG 2.1 defines two primary conformance levels for contrast:

• AA — Requires a minimum ratio of 4.5:1 for normal-sized text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ regular or 14pt+ bold). This is the minimum level required by most organizations and legal frameworks.
• AAA — Requires a minimum ratio of 7:1 for normal text and 4.5:1 for large text. This is the enhanced standard, especially important for medical, government, and educational websites — where readability must be guaranteed for all audiences.

Additionally, WCAG 2.1 requires a 3:1 ratio for non-text UI components such as icons, borders, and interactive controls (buttons, checkboxes, input fields). This rule applies to both default and interactive states (hover, focus).

How Relative Luminance Is Calculated

The process begins by converting sRGB values (0-255) to linear values. Each color channel (R, G, B) is divided by 255, then the inverse gamma function is applied: if the value is less than or equal to 0.04045, divide by 12.92; otherwise apply the formula ((value + 0.055) / 1.055) ^ 2.4.

After linearization, relative luminance is calculated using the weighted formula: L = 0.2126 * R + 0.7152 * G + 0.0722 * B. These coefficients reflect how the human eye perceives color — it is most sensitive to green, then red, and least sensitive to blue.

L = 0.2126R + 0.7152G + 0.0722B

Why Color Accessibility Matters

According to the World Health Organization (WHO), approximately 2.2 billion people worldwide have some form of vision impairment. About 8% of men and 0.5% of women experience color blindness — totaling over 300 million people globally. When web design fails to meet contrast standards, you inadvertently exclude a significant portion of your audience.

Beyond disabilities, poor contrast affects all users in many situations: using a phone in bright sunlight, viewing content on an old monitor with reduced brightness, or simply experiencing eye fatigue after a long workday. Good contrast design does not only help people with disabilities — it improves the experience for everyone.

How to Use This Contrast Checker

• Step 1: Pick foreground color — Enter a hex code (e.g., #E2E8F0) or click the color swatch to open your browser's color picker.
• Step 2: Pick background color — Similarly, enter a hex code or use the color picker for the background.
• Step 3: Read the results — The contrast ratio and pass/fail status for AA and AAA levels update instantly. Check both normal and large text results.
• Step 4: Preview — The text preview shows your chosen colors at multiple sizes for visual evaluation.
• Step 5: Copy results — Click the copy button to get results as text, useful for reports or sharing with your design team.

Design Tips for Good Contrast

• Don't rely on color alone — Use additional cues like icons, underlines, or bold weight to convey information. Especially important for colorblind users.
• Test dark mode separately — Many websites only check contrast in light mode. Make sure your dark mode palette also meets WCAG standards.
• Be careful with text over images — Text over images or gradients often has inconsistent contrast. Use a semi-transparent overlay or text shadow to ensure readability.
• Aim for AAA whenever possible — While AA is the minimum requirement, achieving AAA for body content significantly improves the reading experience for all users.
• Check interactive states — Buttons, links, and input fields need to meet the 3:1 standard for default, hover, focus, and disabled states.

Contrast Checking in Your Design Workflow

Contrast checking should be integrated into your design process, not treated as a final audit step. Ideally, verify contrast ratios when selecting your color palette — before designing interfaces. Many modern design systems like Material Design, Chakra UI, and Tailwind CSS ship with palettes that already meet WCAG AA standards.

During development, use automated accessibility testing tools like axe-core, Lighthouse, or pa11y in your CI/CD pipeline to catch contrast issues early. However, automated tools cannot catch everything — you still need manual testing for text over images, gradients, and dynamic components.