WCAG Color Contrast Ratio Checker
About Contrast Ratio Calculator
The WCAG 2.1 Color Contrast Ratio ($CR = \frac{L_1 + 0.05}{L_2 + 0.05}$) Calculator tests foreground and background colors for WCAG Level AA and Level AAA compliance, auto-suggesting nearest compliant color adjustments with real-time text previews.
How to Use Contrast Ratio Calculator
Step 1
Enter or pick Foreground (Text) and Background colors.
Step 2
Review computed contrast ratio ($X:1$) and WCAG AA/AAA pass/fail badges.
Step 3
If failing, click "Auto-Fix" to generate the closest accessible compliant color shade.
Step 4
Click "Copy CSS Colors".
Practical Use Cases for Contrast Ratio Calculator
Brand Identity & Web Style Guide Accessibility Audits
Verify that corporate brand colors, call-to-action buttons, and form inputs meet mandatory WCAG 2.1 contrast ratios.
Dark Mode UI Theme Contrast & Readability Verification
Calculate contrast ratios between muted secondary text and dark slate/black surface cards to prevent eyestrain.
Input & Output Examples
Testing `#4F46E5` (Indigo) on `#FFFFFF` (White)
Foreground: `#4F46E5`, Background: `#FFFFFF`
Contrast Ratio: `8.56:1` | WCAG AA Normal (4.5:1): `PASS` | WCAG AAA Normal (7:1): `PASS` | WCAG Large (3:1): `PASS`
Key Features & Performance
- ✓WCAG 2.1 Relative Luminance Algorithm: computes exact mathematical contrast ratio from $1:1$ to $21:1$.
- ✓Smart Color Auto-Fixer: adjusts foreground lightness slider automatically to hit the nearest $4.5:1$ or $7:1$ compliant shade.
- ✓Live Typography Preview: renders sample regular, bold, small, and UI component previews against chosen background.
- ✓100% Client-Side memory execution.
- ✓1-Click Copy CSS color rules.
Key Terminology & Definitions
Contrast Ratio ($CR$)
The ratio of the relative luminance of the lighter color ($L_1$) to the darker color ($L_2$), defined as $CR = (L_1 + 0.05) / (L_2 + 0.05)$, ranging from $1:1$ (no contrast) to $21:1$ (black on white).
WCAG Level AA Requirement
The standard accessibility benchmark requiring a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text and graphical UI components.