WCAG Contrast Checker
Calculate relative luminance and test WCAG 2.1 AA/AAA text accessibility contrast ratio compliance online.
How do I use WCAG Contrast Checker?
Enter Foreground (text) and Background color codes, or click "Load Sample Data".
Inspect the real-time WCAG 2.1 contrast ratio (`1:1` to `21:1`) across AA and AAA compliance tiers.
Adjust lightness sliders or click "Swap Colors" until Normal Text, Large Text, and UI Components pass.
What features does WCAG Contrast Checker offer?
W3C WCAG 2.1 Relative Luminance & Contrast Ratio calculation
Instant compliance badges for AA Normal, AA Large, AAA Normal, and AAA Large text
Live typography preview card with custom text and background colors
100% private in-browser testing
WCAG 2.1 Relative Luminance & Contrast Ratio Thresholds
Contrast ratio is computed as $(L_1 + 0.05) / (L_2 + 0.05)$, where $L$ is linearized sRGB relative luminance ($L = 0.2126R + 0.7152G + 0.0722B$).
| Element Category | Font Size & Weight Definition | WCAG AA Minimum | WCAG AAA Enhanced |
|---|---|---|---|
| Normal Body Text | < 18pt (24px) regular, or < 14pt (18.66px) bold | 4.5 : 1 | 7.0 : 1 |
| Large Scale Text | ≥ 18pt (24px) regular, or ≥ 14pt (18.66px) bold (700) | 3.0 : 1 | 4.5 : 1 |
| UI Components & Icons | Input borders, focus rings, interactive SVG icons (SC 1.4.11) | 3.0 : 1 | 4.5 : 1 (Recommended) |
| Disabled / Decorative | Inactive controls, pure decoration, brand logotypes | Exempt (No minimum) | Exempt (No minimum) |
Frequently Asked Questions about WCAG Contrast Checker
Why does white text (`#FFFFFF`) on pure orange (`#FF6600`) fail WCAG 2.1 AA despite looking readable?
The W3C relative luminance formula weights green at `71.52%` and red at `21.26%`, causing mid-luminance orange and cyan backgrounds to score around `3.0:1` against white. Darkening the orange or switching to dark text (`#111827`) achieves `>7:1`.
What exact pixel sizes qualify as "Large Text" under WCAG 2.1?
WCAG defines large text in CSS points (`1pt = 1.333px`): at least `18pt` (`24px`) for normal weight (`400`), or at least `14pt` (`18.66px`, typically rounded to `19px`) for bold weight (`≥700`).
Do form input borders and icons require `4.5:1` contrast?
Under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), interactive UI component boundaries (like text input borders, checkboxes) and meaningful icons require at least a `3.0:1` contrast ratio against adjacent surfaces.
How are semi-transparent (`rgba`) foreground colors evaluated for contrast?
Semi-transparent text must first be alpha-composited over the background color (`C_out = C_fg * α + C_bg * (1 - α)`) before computing relative luminance $L_1$ and $L_2$.
Explore Related Developer Tools
CSS & Tailwind Glassmorphism Studio
Design frosted glass UI cards with real-time sliders for backdrop blur, opacity, border, and box-shadow.
Color Palette Generator
Generate HSL color harmonies (Monochromatic, Analogous, Complementary) and Tailwind CSS 10-shade scale palettes online.
CSS Flexbox & Tailwind Layout Visual Builder
Interactive Flexbox & CSS Grid visual layout studio. Adjust flex-direction, justify-content, align-items, and gap sliders.
Color Converter
Convert colors between HEX, RGB, and HSL formats with visual picker and quick presets.
Code Minifier
Minify and compress JavaScript, HTML, and CSS code online with Terser engine. Reduce payload size by up to 70%.
Google, Bing & Baidu SERP Simulator & Pixel Length Checker
Preview live search engine snippet appearances on Google, Bing (Copilot), and Baidu in desktop & mobile viewports.