Color Contrast Checker - WCAG Accessibility Ratio Tool

Color contrast checker for WCAG AA and AAA. Check the contrast ratio of two colors, preview text, and apply an accessible fix.

Color Contrast Checker measures the contrast ratio between any two colors and instantly shows whether the pair meets WCAG AA and AAA requirements. Pick two colors, read the X.XX:1 value, and watch the pass/fail badges update live. Low contrast is the most common accessibility failure on the web. This color contrast checker turns the WCAG contrast rules into a one-second routine: open the popup, enter two hex codes, and know at once if your palette is readable. Every calculation happens locally in your browser — no account, no tracking, no network requests. ✨ WHAT THIS COLOR CONTRAST CHECKER DOES 🎨 Two synchronized inputs per color: a visual picker and a hex field (#rgb or #rrggbb) 📐 Contrast ratio computed by the official WCAG 2.x formula ✅ Four pass/fail badges for normal and large text at both levels 👁️ Live preview at body and headline sizes 🔄 Swap button to flip text and background in one click 🛠️ Suggested fix: a nearby accessible color that passes, applied in one tap 💾 The color contrast checker remembers your last pair for quick re-checks 🌍 Interface available in 33 languages, works completely offline HOW TO USE THE COLOR CONTRAST CHECKER 1. Click the toolbar icon — the color contrast checker opens instantly. 2. Set text and background with the pickers or hex fields. 3. Read the ratio and the AA/AAA badges; glance at the live preview. 4. If it fails, press Apply on the suggested fix. HOW THE CONTRAST RATIO IS CALCULATED, STEP BY STEP Step 1: Each hex color is split into red, green and blue channels. Step 2: Channels are linearized with the sRGB transfer curve, exactly as WCAG 2.x defines. Step 3: Relative luminance is computed (white = 1.0, black = 0.0) and the contrast ratio is derived — from 1:1 for identical colors up to 21:1 for black on white. Step 4: The color contrast checker grades the ratio against every WCAG threshold. WCAG LEVELS EXPLAINED • AA — at least 4.5:1 for normal text and 3:1 for large text (from 24 px, or 18.7 px bold) • AAA — at least 7:1 for normal text and 4.5:1 for large text, the enhanced level These thresholds come from WCAG 2.1 and 2.2, the standard behind the European Accessibility Act (EAA) and Section 508. Running a color contrast checker before shipping is far cheaper than an audit finding after launch. WHO KEEPS A COLOR CONTRAST CHECKER PINNED • Designers validating palettes, design tokens and brand colors for color accessibility • Front-end developers checking contrast while writing CSS • Accessibility specialists who want a fast accessibility checker beside a full audit suite • Content teams making sure text over brand backgrounds stays legible • Students and educators learning how relative luminance and WCAG contrast work THE SUGGESTED FIX, EXPLAINED When a pair fails AA, this color contrast checker does more than report a failure — it searches for the closest variant of your text color that passes. Hue and saturation stay untouched; only lightness shifts, step by step, until the pair clears 4.5:1. Your brand character survives; the readability problem does not. Press Apply and the corrected color is in place. FREQUENTLY ASKED QUESTIONS Q: Does this accessibility checker send my colors anywhere? A: No. Everything runs on your device. The extension requests a single permission — local storage — used only to remember your last color pair. Q: Which formats can I enter? A: Three-digit (#2c7) and six-digit (#22cc77) hex values, with or without the leading #; picker and hex field stay in sync. Q: Is the math really WCAG-accurate? A: Yes. The color contrast checker implements the relative luminance and contrast ratio definitions from the WCAG 2.x specification, including sRGB linearization — the same formula browser DevTools use. Q: Can the color contrast checker fix a failing background instead of the text? A: Press Swap to exchange the colors, apply the fix, then Swap back. Q: Why use a color contrast checker instead of judging by eye? A: Perception adapts and monitors differ. A color contrast checker gives the objective number auditors and legislation rely on. WHY COLOR ACCESSIBILITY PAYS OFF Readable text reaches visitors with low vision, users on dim screens, anyone reading in sunlight. Checking pairs with a color contrast checker during design — not after release — keeps fixes cheap and brands consistent. Install Color Contrast Checker, test the pair you are working on right now, and ship interfaces every visitor can read.