How to use the Color Contrast Checker
1. Pick a foreground color (text color) and a background color using the color pickers.
2. The contrast ratio is calculated instantly according to the WCAG 2.1 formula.
3. Check the WCAG AA and AAA pass/fail results for normal and large text to ensure accessibility.
What is it?
Color contrast is a critical accessibility requirement defined by the Web Content Accessibility Guidelines (WCAG). Low contrast between text and background makes content unreadable for users with low vision, color blindness, or who are reading in bright sunlight. WCAG 2.1 defines minimum contrast ratios that websites must meet to be considered accessible.
The contrast ratio is calculated from the relative luminance of the two colors. WCAG Level AA (the legal minimum in many countries) requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA (enhanced accessibility) requires 7:1 for normal text and 4.5:1 for large text. A ratio of 1:1 means identical colors; 21:1 is pure black on pure white.
Example
Text: #1e293b (Tailwind slate-800) Background: #f8fafc (slate-50)
Contrast Ratio: 14.3:1 AA Normal text: ✓ Pass (needs 4.5:1) AA Large text: ✓ Pass (needs 3:1) AAA Normal text: ✓ Pass (needs 7:1) AAA Large text: ✓ Pass (needs 4.5:1)
This color pair passes all WCAG levels — it's used in Tailwind UI components for body text on light backgrounds.
Benefits
Confirm WCAG AA compliance before shipping any design
4.5:1 for normal text and 3:1 for large text are the required ratios — check any color combination against both thresholds.
Catch contrast failures before accessibility audits do
WCAG contrast violations are among the most common audit findings — verify combinations early rather than after QA or user complaints.
Test text and background color combinations in real time
See the contrast ratio update instantly as you adjust colors — find passing combinations faster than trial-and-error.
Find the minimum shade adjustment needed to pass WCAG
Tweak lightness incrementally to find the closest-to-your-brand color that still meets AA or AAA requirements.
Frequently asked questions
What is large text in WCAG?
WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. Large text gets a lower contrast requirement (3:1 for AA) because it is inherently easier to read at lower contrast than small text.
My colors pass AA but fail AAA — is that acceptable?
Yes — WCAG Level AA is the standard legal requirement in most jurisdictions (including the EU, UK, and USA under ADA guidelines). AAA is an enhanced goal. If your site passes AA, it meets the baseline accessibility standard. Aim for AAA for critical text like navigation, headings, and body content.
Can I check contrast for colors with opacity/alpha?
This tool works with opaque hex colors. For colors with transparency, you need to first calculate the resulting color after blending with the background (composite the colors), then check the composited hex value.