How do you use this tool?
- Enter your foreground color (text color) in the first input field — hex, rgb(), or hsl() all work.
- Enter your background color in the second input field.
- The contrast ratio and WCAG AA/AAA pass/fail results appear immediately.
- Use the color pickers to visually select or adjust colors.
- Check the preview panel to see how your text actually looks at the calculated contrast.
What This Tool Does
Poor color contrast makes text unreadable for the 253 million people worldwide who live with some form of visual impairment. It also fails the millions more who read on glare-prone screens, in bright sunlight, or on low-brightness mobile devices. WCAG 2.1 defines contrast ratios that set the floor for readable, accessible design.
This tool calculates the WCAG-defined contrast ratio between any two colors and returns instant pass/fail verdicts for both Level AA and Level AAA. It also shows a live text preview so you can see the combination as your users will.
How Does It Work?
Contrast Ratio = (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.
Relative luminance calculation:
- Convert sRGB values (0–255) to 0–1 range
- Apply gamma correction: if C ≤ 0.04045 → C/12.92; else → ((C + 0.055)/1.055)^2.4
- L = 0.2126 × R + 0.7152 × G + 0.0722 × B
WCAG 2.1 Pass/Fail Thresholds:
| Standard | Normal Text | Large Text | UI Components |
|---|---|---|---|
| Level AA | ≥ 4.5:1 | ≥ 3:1 | ≥ 3:1 |
| Level AAA | ≥ 7:1 | ≥ 4.5:1 | Not specified |
| Maximum possible | 21:1 (black on white) | — | — |
Text size definitions:
- Normal text: below 18pt (24px) regular, or below 14pt (18.67px) bold
- Large text: 18pt (24px) or larger regular, or 14pt (18.67px) or larger bold
What Are Common Use Cases?
- Design system setup: Validate every color pair in your component library — primary button text, link colors, placeholder text, and error states.
- Dark mode review: Dark themes often have subtle contrast failures (gray text on dark gray background). Check every token combination.
- Accessibility audits: Before shipping a redesign, run every text/background pair through this tool as part of your WCAG checklist.
- Client deliverables: Agencies use contrast ratio screenshots to document compliance in accessibility reports.
- Legal risk reduction: US companies facing ADA web-accessibility lawsuits point to documented WCAG compliance as a defense.
- Brand color validation: Marketing teams choose a brand palette and need to verify which color combinations are safe for body text, headings, and CTAs.
Frequently Asked Questions
My brand blue is #0057B8 on white — does it pass? #0057B8 on #FFFFFF has a contrast ratio of approximately 6.4:1 — passing WCAG AA (4.5:1) but not AAA (7:1) for normal text. For large text or UI components (3:1 threshold), it passes AAA as well.
Why does gray text on white look fine to me but fail WCAG? Human visual perception is non-linear and varies by age, screen brightness, and ambient lighting. WCAG uses a standardized luminance formula calibrated for users with moderate visual impairments — not peak conditions. What looks “fine” to one person in a dimly lit office may be unreadable on a glare-heavy phone screen outdoors.
Can I check a CSS variable or custom property? No — the tool needs a resolved color value (hex, RGB, or HSL). Resolve your CSS custom property to its actual value first, then enter it here.
Does this cover WCAG 3.0? This tool implements WCAG 2.1 (the current legal standard in the US under Section 508). WCAG 3.0 introduces a different algorithm (APCA) with a different scale. A separate APCA checker is planned for a future release.
Last updated: