Color Contrast Checker WCAG AA & AAA Live Ratio — Text, Large Text & UI Components
Pick any two colors using the live color pickers or enter values in HEX, RGB, or HSL format. The WCAG 2.1 contrast ratio updates in real time. All five compliance checks are shown simultaneously: AA Normal text (4.5:1), AA Large text (3:1), AA UI components (3:1), AAA Large text (4.5:1), and AAA Normal text (7:1). If a check fails, the auto-fix panel suggests the nearest foreground color that passes. Color blindness simulation shows how your pair looks to users with deuteranopia, protanopia, and tritanopia. Copy the CSS output directly into your stylesheet. All calculations run in your browser — nothing is sent anywhere.
Pick Colors — WCAG Ratio Updates Live
Use the color pickers or enter HEX, RGB, or HSL values. All 5 WCAG checks update instantly.
Approximate simulation using color vision deficiency transforms. Deuteranopia affects ~1% of males (green-blind). Protanopia ~1% (red-blind). Tritanopia ~0.01% (blue-blind).
WCAG contrast requirements quick reference
Rate this tool
Color Contrast & WCAG — Why It Matters and How It Is Measured
Color contrast is the difference in perceived brightness between two colors. When text has insufficient contrast against its background, it becomes difficult or impossible to read for users with low vision, color blindness, or visual fatigue. According to WebAIM’s 2024 Million report, color contrast is the single most common accessibility failure on the web — present on 83.6% of all websites tested. It is simultaneously the most impactful and easiest accessibility improvement you can make.
The WCAG 2.1 contrast ratio formula
WCAG (Web Content Accessibility Guidelines) defines contrast mathematically using relative luminance — a perceptual measure of how bright a color appears to the human eye, expressed as a value between 0 (absolute black) and 1 (absolute white). The formula first linearizes the sRGB values to remove gamma encoding, then weights the three channels by their contribution to human luminance perception: 0.2126 for red, 0.7152 for green, 0.0722 for blue. The extremely high green weight reflects that the human eye is most sensitive to green wavelengths in its M-cone cells.
The contrast ratio is then: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The +0.05 offset prevents division by zero for absolute black and anchors the scale. The ratio ranges from 1:1 (identical colors, no contrast) to 21:1 (black #000000 on white #FFFFFF).
The five WCAG compliance checks explained
| Check | Ratio required | Applies to | Standard |
|---|---|---|---|
| AA Normal text | 4.5:1 | Body text, UI labels, links (text below 18pt / 24px regular, or 14pt / 18.5px bold) | WCAG 2.1 §1.4.3 |
| AA Large text | 3:1 | Heading text at 18pt+ regular (24px+) or 14pt+ bold (18.5px+) | WCAG 2.1 §1.4.3 |
| AA UI components | 3:1 | Button borders, input field borders, icons, focus indicators — non-text elements | WCAG 2.1 §1.4.11 |
| AAA Large text | 4.5:1 | Same as AA Large text but at enhanced level | WCAG 2.1 §1.4.6 |
| AAA Normal text | 7:1 | Same as AA Normal text but at enhanced level | WCAG 2.1 §1.4.6 |
Color Contrast Reference — Common Color Combinations & Their Ratios
Click any pair in the preset buttons above the calculator to load them instantly.
| Foreground | Background | Ratio | AA Normal | AA Large | AAA |
|---|---|---|---|---|---|
| #000000 (Black) | #FFFFFF (White) | 21:1 | PASS | PASS | PASS |
| #FFFFFF (White) | #000000 (Black) | 21:1 | PASS | PASS | PASS |
| #595959 | #FFFFFF (White) | 7.0:1 | PASS | PASS | PASS (AAA!) |
| #767676 | #FFFFFF (White) | 4.54:1 | PASS | PASS | FAIL |
| #999999 | #FFFFFF (White) | 2.85:1 | FAIL | FAIL | FAIL |
| #0066CC | #FFFFFF (White) | 5.74:1 | PASS | PASS | FAIL |
| #1D4ED8 | #EFF6FF | 7.04:1 | PASS | PASS | PASS (AAA!) |
| #6366F1 | #FFFFFF (White) | 4.47:1 | FAIL (just!) | PASS | FAIL |
| #FFFFFF | #6366F1 | 4.47:1 | FAIL (just!) | PASS | FAIL |
| #000000 | #FBBF24 (Amber) | 11.67:1 | PASS | PASS | PASS (AAA!) |
Note: Our brand color #6366f1 (indigo-500 in Tailwind) has a 4.47:1 ratio on white — just barely failing AA for normal text. This is a known characteristic of indigo-500 — use it as an accent or heading color, not for body text on white.
Color Contrast & the Law — ADA, EAA, Section 508
How to Fix Color Contrast Accessibility Issues
The auto-fix suggestions above are the fastest starting point. Here is the broader strategy.
LazyTools vs Other Color Contrast Checkers
| Feature | LazyTools | WebAIM | Coolors | colourcontrast.cc |
|---|---|---|---|---|
| Live visual color picker | ✅ Both colors | ✅ Yes | ✅ Yes | ✅ Yes |
| HEX + RGB + HSL input | ✅ All 3 formats | ⚠ HEX/RGB only | ⚠ HEX/RGB only | ⚠ HEX/RGB |
| All 5 WCAG checks simultaneously | ✅ AA+AAA text+large+UI | ⚠ 4 checks (no UI) | ⚠ 4 checks | ✅ Yes |
| Auto-fix suggestion | ✅ Nearest passing color | ⚠ Lightness slider | ❌ None | ❌ None |
| Color blindness simulation | ✅ 4 types with ratio | ❌ None | ❌ None | ❌ None |
| CSS output | ✅ Copy-ready | ❌ None | ❌ None | ❌ None |
| Relative luminance shown | ✅ Both colors | ❌ No | ❌ No | ❌ No |
| No account required | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
Color Contrast FAQ
WCAG Level AA: 4.5:1 for normal text, 3:1 for large text (18pt+) and UI components. WCAG Level AAA: 7:1 for normal text, 4.5:1 for large text. Enter any two colors above to check all five WCAG ratios instantly.
WCAG formula: (L1 + 0.05) / (L2 + 0.05) where L = relative luminance (0 to 1). Relative luminance = 0.2126R + 0.7152G + 0.0722B (linearized sRGB). Ranges from 1:1 (same color) to 21:1 (black on white).
AA is the minimum standard required by most laws (ADA, EAA, Section 508): 4.5:1 for text. AAA is enhanced: 7:1 for text. Most organisations target AA. AAA is recommended for healthcare, government and financial apps. Both are checked simultaneously above.
18pt (24px at 96dpi) or larger regular weight, or 14pt (18.5px) or larger bold. Large text requires only 3:1 for AA. Normal text below these sizes requires 4.5:1. Headings are often large text; body text is almost always normal text.
Use the live color pickers or enter HEX, RGB, or HSL values. Contrast ratio updates instantly. All 5 WCAG checks shown. Auto-fix suggestions find the nearest passing color. Color blindness simulation. CSS output. Free, no account, browser-side.
1. Identify text color (foreground) and background color. 2. Enter both in the pickers above. 3. Check contrast ratio against your target: 4.5:1 for AA normal text. 4. If failing, click the auto-fix suggestion to find a passing alternative.
The WCAG Level AA minimum for normal text. #767676 on white achieves exactly 4.54:1 — the minimum passing gray. Any lighter gray on white fails AA. Black on white achieves 21:1. Enter any color in the checker above to see its exact ratio.
Yes. Always measure foreground against the actual background behind it. For gradient backgrounds, check at the point of lowest contrast. For text on images, check the rendered color (darkest and lightest parts). Semi-transparent overlays require checking the composited color.
Perceptual brightness 0-1. Formula: 0.2126R + 0.7152G + 0.0722B (linearized). The high green weight (71.52%) reflects human color sensitivity. Shown for both colors above the ratio in this checker.
On white (#FFF), colors need relative luminance ≤ 0.18 for 4.5:1. Dark blues, dark greens, dark reds pass. #767676 is the minimum passing gray. Light colors (yellow, light pink, light blue) all fail on white. Enter any color to test instantly.
Shows how your color pair appears to users with color vision deficiencies: Deuteranopia (green-blind, ~1% of males), Protanopia (red-blind, ~1%), Tritanopia (blue-blind, ~0.01%). A pair passing normal contrast may look very different to colorblind users. Check all 4 views in the simulation section above.
1. Darken foreground color (reduce HSL lightness). 2. Lighten background towards white. 3. Use the auto-fix button — it finds the nearest passing color. 4. Consider a different hue with better contrast properties. 5. Use large text where possible (requires only 3:1).
In many jurisdictions, yes. US: ADA (WCAG AA interpreted as standard), Section 508 (federal). EU: European Accessibility Act (WCAG 2.1 AA mandatory from June 2025). UK: Public sector must meet WCAG 2.1 AA. Private sector: Equality Act applies.
WCAG 2.2 (2023) did not change the contrast ratio requirements. They remain 4.5:1 (AA normal), 3:1 (AA large/UI), 7:1 (AAA normal). WCAG 2.2 added focus indicator contrast requirements and other criteria, but the core luminance formula and thresholds are unchanged from 2.1.
#767676 has exactly 4.54:1 on white — the minimum gray that passes WCAG AA for normal text. Any lighter gray fails AA on white. Click the "Min AA" preset button above to see this pair instantly.
WCAG 2.1 §1.4.11 requires 3:1 for UI components. Check: button border vs page background (3:1), button text vs button background (4.5:1). The "AA UI components" check in this tool shows the 3:1 check. Enter the button border color as foreground and page background as background to verify.