Color Contrast Checker | WCAG AA & AAA Accessibility
Check color contrast ratios against WCAG 2.1 AA and AAA standards for normal and large text. Enter hex, RGB, or HSL colors; get relative luminance values; preview text on background; and get automatic suggestions to fix failing contrast.
QUICK PRESETS
What Is the Color Contrast Checker | WCAG AA & AAA Accessibility?
Color contrast affects readability for the 300 million people worldwide with color vision deficiency and the 246 million with low vision. The WCAG (Web Content Accessibility Guidelines) contrast standards are legally mandated for government websites in the US (Section 508), UK (Equality Act), EU (EN 301 549), and many other jurisdictions. Failing AA compliance on a public-facing website can expose organizations to ADA lawsuits.
- ›Relative luminance is not the same as perceived brightness. The WCAG formula applies a gamma correction to linearize sRGB values before weighting by human photopic response (green contributes the most, ~71.5%; blue the least, ~7.2%).
- ›Large text is defined as text 18pt (24px) or larger, or 14pt (approximately 18.67px) and bold. Large text has a lower contrast requirement because it is inherently easier to read.
- ›UI components (form borders, icon boundaries, toggle states) must meet 3:1 for their visual indicator against adjacent color — though their text labels still need 4.5:1.
- ›AAA compliance is aspirational. WCAG explicitly notes that AAA cannot be met for all content, particularly for images of text or decorative content. Prioritize AA for all interactive and informational text.
Formula
Relative Luminance (WCAG 2.1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
where each channel is linearized: sRGB ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4
Contrast Ratio
CR = (L₁ + 0.05) / (L₂ + 0.05)
where L₁ is the lighter color and L₂ is the darker (L₁ ≥ L₂)
WCAG 2.1 Minimum Requirements
Normal text AA: CR ≥ 4.5 : 1
Normal text AAA: CR ≥ 7.0 : 1
Large text AA: CR ≥ 3.0 : 1 (≥18pt regular or ≥14pt bold)
Large text AAA: CR ≥ 4.5 : 1
UI components: CR ≥ 3.0 : 1
How to Use
- 1
Enter a foreground (text) color as hex, RGB, or HSL — or use the color picker.
- 2
Enter a background color using the same formats.
- 3
Click Check Contrast to compute the WCAG 2.1 contrast ratio.
- 4
Review the live text preview to see how the color pair looks in practice.
- 5
Check pass/fail status for normal text (AA/AAA), large text (AA/AAA), and UI components.
- 6
If failing AA, apply the suggested foreground color fix or swap colors and re-check.
- 1Enter or pick foreground color: This is the text color. Use the color picker or type any hex (#rrggbb), RGB (rgb(r, g, b)), or HSL (hsl(h, s%, l%)) value.
- 2Enter background color: The surface behind the text. Card backgrounds, page backgrounds, and button fills all count.
- 3Click Check Contrast: The tool computes relative luminance for both colors, derives the contrast ratio, and runs WCAG AA and AAA checks for all text and UI scenarios.
- 4Review the live preview: See exactly how normal body text, small labels, and large headings look at the chosen contrast ratio — before committing to a design decision.
- 5Apply the fix suggestion: If the ratio fails AA for normal text, a nearest-hue corrected foreground color is suggested. Click Apply to instantly see how it looks.
Example Calculation
Example: Brand orange (#f97316) on white (#ffffff)
Foreground: #f97316 → rgb(249, 115, 22)
R_lin = ((249/255 + 0.055)/1.055)^2.4 = 0.9418
G_lin = ((115/255 + 0.055)/1.055)^2.4 = 0.1706
B_lin = ((22/255 + 0.055)/1.055)^2.4 = 0.0057
L(fg) = 0.2126×0.9418 + 0.7152×0.1706 + 0.0722×0.0057 = 0.3228
L(bg) = 1.0 (white)
CR = (1.0 + 0.05) / (0.3228 + 0.05) = 1.05 / 0.3728 = 2.82:1
Fails AA normal text (needs 4.5:1). Passes large text AA (3.0:1).
Suggested fix: darken to ~#b45309 → 4.56:1, passes AA for normal text
Understanding Color Contrast Checker | WCAG AA & AAA Accessibility
Why 4.5:1 Is the AA Normal Text Threshold
The 4.5:1 ratio was chosen by the WCAG working group based on vision research showing that people with 20/80 visual acuity — who, when corrected to 20/40, are not legally blind — require approximately this contrast to read body-size text. The threshold also factors in typical display variation across uncalibrated consumer monitors, which can shift perceived luminance by 15–30%.
Brand Colors Almost Never Pass AAA
Most saturated brand colors — blues, greens, purples, and especially orange — do not achieve 7:1 contrast against either white or black. This is not a design failure; WCAG acknowledges that AAA for normal text is not universally achievable. The practical strategy is to use brand colors for large text, decorative elements, and interactive states where only 3:1 is required, while using dark or near-black text for body content where 4.5:1 is mandatory.
- ›Orange on white: most orange hues fall in the 2.5–3.5:1 range — large text AA only.
- ›Dark orange on white: burning orange (#c2410c) reaches 4.71:1 — just passes normal text AA.
- ›Blue on white: medium blue (#2563eb) is approximately 4.54:1 — passes AA narrowly.
- ›Gray text: the most common failure is gray body text at 60% opacity on white. Always check actual computed colors, not opacity.
WCAG 3.0 and APCA: What's Coming
WCAG 3.0 (currently in Working Draft) introduces the APCA (Advanced Perceptual Contrast Algorithm) model, which better captures the non-linearity of human contrast perception, especially for polarity (light text on dark vs dark on light), font weight, and font size. APCA produces a score from 0–108 rather than a ratio, and has different thresholds per font-size/weight combination. Until WCAG 3.0 is finalized and adopted by legislation, WCAG 2.1 AA (4.5:1) remains the compliance target for almost all professional contexts.
Frequently Asked Questions
Does contrast ratio apply to placeholder text in form fields?
- ›Placeholder text against white input backgrounds commonly fails at typical 40% opacity
- ›Solution: use fully opaque placeholder text or ensure solid color meets 4.5:1
- ›Alternatively: use visible labels above inputs (also better UX)
- ›WCAG 2.2 emphasizes focus indicator contrast as well (3:1 against adjacent colors)
What is the difference between AA and AAA compliance?
- ›Level A: catches the most critical barriers (keyboard navigation, alt text)
- ›Level AA: the legal requirement in most jurisdictions; the design target for most teams
- ›Level AAA: aspirational; required for some government and healthcare contexts
- ›WCAG 3.0 (in draft): proposes replacing the binary pass/fail with an APCA-based score
Does contrast matter for icons without text labels?
- ›Icon without label: 3:1 between icon color and background
- ›Form field border: 3:1 between border color and surrounding background
- ›Focus indicator: 3:1 between focus outline and adjacent unfocused color (WCAG 2.1 2.4.11)
- ›Charts / data visualizations: 3:1 between data segments
Are there contrast tools built into browsers?
- ›Chrome DevTools: Elements → Styles → click color chip → contrast badge with AA/AAA dots
- ›Firefox: Accessibility tab → inspect any element → Contrast column
- ›Figma: Contrast plugin or native accessibility checker in Dev Mode
- ›axe DevTools (browser extension): automated AA audit on rendered pages
You Might Also Like
Explore 360+ Free Calculators
From math and science to finance and everyday life — all free, no account needed.