WCAG Color Contrast Ratio Checker Online Free
Pick any two colors — text and background — and instantly see the WCAG 2.1 contrast ratio, pass/fail status for all four compliance levels (AA normal, AA large, AAA normal, AAA large), and a realistic multi-size text preview so you can judge readability beyond the number. Six built-in presets jump straight to common combinations, from high-contrast black on white to the classic low-contrast danger pairing that fails almost every audit.
WCAG Color Contrast Ratio Checker In-Browser Workspace
Input data or select files to begin. 100% private, client-side execution with zero server transmission.
How to Use WCAG Color Contrast Ratio Checker
- Step 1: Set the Text Color using the color picker or by typing a hex value such as #1a1a2e.
- Step 2: Set the Background Color the same way — the preview updates live as you type.
- Step 3: Read the contrast ratio and WCAG rating banner, then check each of the four pass/fail cards.
- Step 4: Use Swap Colors to invert the pair, or click a preset to load a known combination.
- Step 5: Copy the hex pair into your design system and re-check after any palette change.
About WCAG Color Contrast Ratio Checker
The WCAG 2.1 contrast formula starts by converting each sRGB channel from 0–255 to 0–1, applying either a linear divide (values ≤ 0.03928) or the (c + 0.055) / 1.055 power-2.4 curve, then combining channels with the relative luminance weights 0.2126·R + 0.7152·G + 0.0722·B. The contrast ratio itself is (Llighter + 0.05) ÷ (Ldarker + 0.05), which ranges from 1:1 for identical colors to the theoretical maximum of 21:1 for pure black on pure white. WCAG sets four thresholds: AA normal text needs 4.5:1, AA large text (18pt+ or 14pt+ bold, roughly 24px / 18.66px in CSS pixels) needs 3:1, AAA normal needs 7:1, and AAA large reuses 4.5:1. UI components and graphical objects that convey information (input borders, icon-only buttons) have a separate 3:1 non-text requirement. The tool computes the ratio on every keystroke via useEffect, so there is no submit step — designers can scrub the hue slider and watch the grade flip in real time. Because everything runs in plain JavaScript math, the numbers are identical to the WebAIM checker and every other standards-compliant tool; only the presentation differs.
Frequently Asked Questions
What is the difference between AA and AAA?
AA is the baseline legal requirement for most websites: 4.5:1 for normal text, 3:1 for large text. AAA is the enhanced tier: 7:1 for normal text and 4.5:1 for large. Many brands target AA everywhere and AAA for core reading content.
Does a passing ratio guarantee my design is accessible?
No. Contrast is one of nine WCAG principles. You also need keyboard focus visibility, semantic headings, alt text, and logical tab order. But contrast is the single most common automated failure, so fixing it first removes the bulk of issues.
Why does large text get a lower threshold?
Thicker strokes make glyphs easier to resolve at lower luminance differences. WCAG defines large as at least 18pt (24px) regular, or 14pt (18.66px) bold. Body copy at 16px always uses the stricter 4.5:1 bar.
Are 3-digit hex codes supported?
Yes. #f00 expands to #ff0000 by doubling each digit before the luminance calculation, matching how browsers interpret shorthand hex colors.
Does checking my colors upload them anywhere?
Never. The luminance formula runs entirely in your browser with local state. No color values, screenshots, or analytics are transmitted to a server.