Check whether your foreground and background colors meet WCAG 2.1 accessibility standards. Get an instant contrast ratio, pass/fail results for AA and AAA levels, a live text preview, and an auto-generated accessible color suggestion — all in your browser.
See your exact WCAG contrast ratio the moment you pick your colors, with clear pass/fail badges
See exactly how your colors look on real UI elements — body text, headings, buttons, and badges
When colors fail, the tool automatically suggests the nearest accessible alternative and lets you apply it instantly
Pick your foreground and background colors, then instantly see whether they meet WCAG AA (4.5:1) or AAA (7:1) requirements for normal text, large text, and UI components.
Contrast Ratio
11.50:1
Passes WCAG AAA — Excellent!
| Use Case | Required Ratio | AA | AAA |
|---|---|---|---|
| Normal text (under 18pt) | 4.5:1 | Pass ✓ | Pass ✓ |
| Large text (18pt+ or 14pt bold) | 3:1 | Pass ✓ | Pass ✓ |
| UI components & icons | 3:1 | Pass ✓ | — |
The quick brown fox
Normal body text at 16px. This sentence demonstrates how readable your color combination is for everyday content.
Small text at 14px — used for captions, footnotes, and labels. Harder to read at low contrast.
Try Example Pairs
No account required — 100% free, runs in your browser
Poor color contrast is the single most common accessibility failure on the web. WebAIM's annual Million report consistently finds that over 80% of home pages have detectable contrast failures — meaning millions of users with low vision, color blindness, or age-related vision decline struggle to read everyday web content. This tool eliminates that problem before your code ships. You pick your colors, the checker does the WCAG math, and you walk away with a compliant palette in under a minute.
Color contrast describes the difference in perceived luminance between two colors — typically the foreground (text or icon) and the background it sits on. The human eye perceives luminance logarithmically, not linearly, so the difference between very dark and very light colors is not simply a matter of subtracting hex values. WCAG uses a specific formula based on relative luminance to produce a contrast ratio that correlates with real-world readability across a wide range of vision conditions.
The relative luminance formula applies a gamma correction curve to each RGB channel (converting the sRGB value to linear light), then combines the channels with weights that reflect the eye's sensitivity to different colors — green contributes 71.52%, red 21.26%, blue just 7.22%. Two colors with the same luminance value produce a ratio of 1:1 (no contrast). Pure black on pure white produces the maximum ratio of 21:1.
The Web Content Accessibility Guidelines (WCAG) are published by the W3C and define the international standard for accessible web content. WCAG 2.1 — the current widely-adopted version — organizes requirements into three conformance levels: A, AA, and AAA. Color contrast requirements live in Success Criterion 1.4.3 (Contrast — Minimum) for AA and 1.4.6 (Contrast — Enhanced) for AAA.
Minimum accessibility. No color contrast requirement at this level — only that color is not used as the sole means of conveying information.
The legal and industry standard. Required by ADA, Section 508, EN 301 549, and most government accessibility laws worldwide. Normal text: 4.5:1. Large text: 3:1.
Enhanced accessibility. Recommended for healthcare, government, and financial services. Normal text: 7:1. Large text: 4.5:1. Not required for entire sites.
Most teams target WCAG AA as their baseline — it satisfies legal requirements in the US (ADA), UK (Equality Act), EU (EN 301 549), and most other jurisdictions. AA compliance means normal text achieves a 4.5:1 contrast ratio and large text (18pt or 14pt bold) achieves 3:1.
AAA is the gold standard and the right target for interfaces where maximum readability is critical — healthcare portals, government services, financial applications, and educational platforms. At 7:1, AAA text is readable by users with 20/80 vision (moderate low vision) without additional aids. Not every color combination can achieve AAA while maintaining brand character, which is why WCAG explicitly states that AAA conformance is not required for entire sites.
This tool implements the WCAG 2.1 contrast ratio algorithm defined in Success Criterion 1.4.3 using pure JavaScript in your browser. Here is exactly what the calculation does:
((val + 0.055) / 1.055) ^ 2.4.L = 0.2126R + 0.7152G + 0.0722B using the linearized channel values.(L_lighter + 0.05) / (L_darker + 0.05) where the lighter luminance is always the numerator.The color suggestion feature walks the failing foreground color toward white or black in small RGB increments, re-running the contrast calculation at each step until it finds the nearest color that achieves a 4.5:1 ratio. This ensures the suggested color stays as close as possible to your original while achieving compliance.
Understanding contrast failures in the abstract is one thing. Seeing them on real interface patterns is another. Here are the most common contrast problems design teams encounter in production:
#9ca3af on #ffffff = 2.9:1 — FAILS AA
Use #6b7280 or darker for placeholder text. Many designers use the lightest gray they can find for placeholder styling, but anything below 4.5:1 is inaccessible.
#60a5fa on #ffffff = 3.0:1 — FAILS AA normal text
Tailwind's blue-400 fails for body text on white. Switch to blue-700 (#1d4ed8, 5.9:1) or use the lighter shade only for decorative elements and large text.
#ffffff on #2563eb = 5.9:1 — PASSES AA
White text on Tailwind's blue-600 is a reliable combination for primary buttons and call-to-action elements. It passes AA for all text sizes.
#facc15 on #ffffff = 1.7:1 — CRITICAL FAIL
Yellow on white is one of the worst contrast combinations. Never use yellow text on white backgrounds. Use yellow as a background with dark text instead: #000000 on #facc15 = 13.7:1.
A color pair that passes AA for large headings (3:1) may fail for body text (needs 4.5:1). Don't assume one ratio covers all uses — test your primary text color at every size you deploy it.
WCAG 1.4.1 states that color must not be the sole visual means of conveying information. Error states, form validation, links, and status indicators all need a secondary cue: underlines, icons, borders, or patterns.
Switching to a dark background changes every contrast ratio. A color that passes on white may fail on your dark surface color. Run every text color through this checker for both light and dark variants of your theme.
WCAG exempts disabled UI components from contrast requirements. However, if your disabled state is so low-contrast that users can't understand what the control does, you create a usability problem even if it's technically compliant.
WCAG 2.1 Success Criterion 1.4.11 requires a 3:1 contrast ratio for focus indicators against adjacent colors. Invisible focus rings are a critical barrier for keyboard and switch access users.
Test your entire design token palette upfront — not individual screens. Map out which foreground tokens are AA-compliant on which background tokens, then enforce those pairings in your design system documentation.
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold). Large text — defined as 18pt (24px) or 14pt bold (approximately 18.67px bold) — requires a minimum ratio of 3:1. UI components such as form inputs, icons, and focus indicators also require 3:1 against adjacent colors under WCAG 2.1 Success Criterion 1.4.11.
AA is the standard compliance level required by law in most jurisdictions. AAA is the enhanced level that provides greater accessibility for users with more significant visual impairments. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. AAA is not required for entire sites because some content — especially brand-critical design elements — cannot achieve 7:1 without losing visual identity.
The Americans with Disabilities Act (ADA) does not specify contrast ratios directly, but courts and the Department of Justice consistently apply WCAG 2.1 AA as the standard for website compliance with ADA Title III. Multiple major companies including Domino's, Netflix, and Winn-Dixie have faced ADA web accessibility lawsuits. WCAG AA compliance, including the 4.5:1 contrast requirement, is the legally defensible standard for US organizations.
WCAG contrast requirements apply specifically to text and meaningful graphical elements. Purely decorative images — those that convey no information — are exempt. Text within images must meet the same contrast requirements as live text. Logotypes and brand wordmarks are exempt, but accessible design practice still recommends adequate contrast for them. Meaningful icons that convey function or status (like navigation icons or status indicators) must achieve a 3:1 ratio against their background under WCAG 2.1 Success Criterion 1.4.11.
You have several options that don't require abandoning your brand palette. First, adjust the text color rather than the brand color — darkening or lightening the text often achieves compliance while preserving your background brand color. Second, add an intermediate layer: a semi-transparent dark or light overlay behind text on top of a brand-colored background can bring contrast up without changing the visible brand color. Third, increase the text size: colors that fail at 14px normal weight will often pass at 18px or 14px bold, since large text only requires 3:1. Use this tool's suggestion feature to find the nearest compliant shade to your current color.
Don't ship another interface with invisible text. Use this tool to verify every color pair in your design system before it reaches users.
Free forever · No account · WCAG 2.1 compliant algorithm
Every tool runs entirely in your browser no uploads, no servers, no accounts. Fast, private, and free forever.
Colors, typography, CSS, SVG & more
Generate beautiful color schemes using color theory algorithms monochromatic, complementary, triadic, and more.
Build stunning CSS gradients visually linear, radial, and conic and copy production-ready code instantly.
Discover expert Google Fonts combinations curated for optimal readability and aesthetic harmony.
Generate production CSS visually flexbox, grid, typography, border, and box shadow with live preview.
Upload, edit, optimize, and convert SVG files entirely in your browser. Export clean SVG or React JSX.
Images, accessibility, spacing & readability
Compress images up to 90% smaller WebP, AVIF, JPEG, PNG with filters, cropping, and rotation. 100% private.
Remove image backgrounds instantly using on-device AI no uploads, no account. Download transparent PNG.
Generate a mathematically consistent shadow elevation system and export CSS variables or Tailwind config.
Build a harmonious spacing scale based on mathematical ratios and export it as CSS or Tailwind config.
Preview and compare border radius values in real time across multiple shapes and sizes.
URLs, QR codes, tracking & security
Shorten any URL instantly with browser history, QR code export, and zero server tracking.
Custom QR codes for URLs, WiFi, vCards & more. Add colors, logo, download PNG or SVG.
Build GA4-ready UTM tracking URLs with smart presets, validation, and CSV history export.
Strip 50+ tracking parameters (UTM, fbclid, gclid, msclkid) with before/after comparison.
See how your URL appears on Twitter, Facebook, LinkedIn & WhatsApp. Check OG metadata.