Color Contrast Checker

Frequently Asked Questions

What counts as large text for the 3:1 threshold?

WCAG defines large text as at least 18pt (24px) in normal weight, or at least 14pt (approximately 18.66px) in bold weight.

Does this cover color blindness?

Luminance contrast helps users with low vision and some types of color vision deficiency, but it does not fully address all forms. Never use color as the only way to convey meaning.

Why are there 0.05 constants in the WCAG formula?

The terms (L + 0.05) model ambient screen flare and viewing conditions so the formula matches real-world legibility and prevents the ratio from approaching infinity for very dark colors.

Is AAA required?

WCAG 2.x sets AA as the legal and widely-required minimum. AAA (7:1) is an aspirational target for body copy in long-form content, but is not mandated.

Provided by AllCalculators.io
Free online calculators for everyday. No registration required.

Estimates for informational purposes only.

Important Disclaimer: Estimates for informational purposes only.

This calculator provides estimates for informational purposes only. Results are based on assumptions and may not reflect actual outcomes. Consult qualified professionals in relevant fields before making important decisions based on these results.

JavaScript is required to use the interactive calculator above. The questions and answers below remain readable without JavaScript.

How It Works

The Web Content Accessibility Guidelines (WCAG) define text legibility in terms of the luminance contrast ratio between the text color and the background directly behind it. The ratio ranges from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white). This checker takes two hex colors, converts each to its relative luminance using the official WCAG formula, and reports the ratio alongside pass/fail badges for four conformance thresholds.

The thresholds are: 4.5:1 for normal text at WCAG AA, 3:1 for large text at AA, 7:1 for normal text at WCAG AAA, and 4.5:1 for large text at AAA. Large text means approximately 18.66px bold or 24px regular weight and above.

Use Cases

Color contrast verification is critical throughout the design and development process:

Verifying body copy, headings, and link text meet WCAG AA before shipping a design to development

Checking disabled state text, placeholder text, and caption text that designers sometimes make too light

Validating that a new brand color works on both white and a colored card background

Running automated accessibility audits and cross-referencing failures with actual ratio values

Ensuring dark-mode variants of a UI palette maintain equivalent contrast ratios

Tips

Never judge contrast by eye alone - two colors that look clearly distinct to a trichromat may fail the ratio for users with low vision or color deficiency.

Test against the actual background behind the text, not the page background; cards, overlays, and gradient backgrounds all change the effective value.

Semi-transparent text or backgrounds require resolving the actual opaque blended color before checking the ratio.

UI components (icons, form borders, focus rings) must meet 3:1 contrast against their surroundings under WCAG 1.4.11 Non-text Contrast.

Each interactive state (default, hover, focus, disabled) must independently meet its contrast requirement - a link that only passes when hovered fails for keyboard users.

FAQ

What counts as large text for the 3:1 threshold?

WCAG defines large text as at least 18pt (24px) in normal weight, or at least 14pt (approximately 18.66px) in bold weight. UI elements like headings in a site's design system often qualify, but body copy does not.

Does this cover color blindness?

Luminance contrast helps users with low vision and some types of color vision deficiency, but it does not fully address all forms. Never use color as the only way to convey meaning - always add a text label, icon, or pattern to differentiate states.

Why are there 0.05 constants in the WCAG formula?

The terms (L + 0.05) model ambient screen flare and viewing conditions so the formula matches real-world legibility. They prevent the ratio from approaching infinity for very dark colors and calibrate the formula to observed human contrast perception.

Is AAA required?

WCAG 2.x sets AA as the legal and widely-required minimum. AAA (7:1) is an aspirational target recommended for body copy in long-form content where eye fatigue matters, but it is not mandated. Many teams aim for AAA where achievable without sacrificing the design.

Color Contrast Checker

Frequently Asked Questions

Related Developer Tools Calculators