Color Contrast Checker
Verify that your text and background color combinations meet WCAG (Web Content Accessibility Guidelines) accessibility standards. Ensure your designs are readable for all users, including those with visual impairments.
WCAG Contrast Requirements
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | Not defined |
How to Use
1. Enter your foreground (text) color 2. Enter your background color 3. View the contrast ratio 4. Check pass/fail for each WCAG level
Understanding Contrast Ratios
| Ratio | Rating | Readability |
|---|---|---|
| 21:1 | Maximum | Black on white |
| 7:1+ | Excellent | AAA compliant |
| 4.5:1+ | Good | AA compliant |
| 3:1+ | Minimum | Large text only |
| <3:1 | Fail | Accessibility issue |
Common Contrast Issues
| Issue | Problem | Fix |
|---|---|---|
| Light gray on white | Low contrast | Darken the gray |
| Yellow on white | Very low contrast | Use dark text |
| Blue on black | Can be low | Check specific shades |
Why Accessibility Matters
- Legal compliance: Many countries require accessible websites
- User experience: ~15% of users have some visual impairment
- SEO: Accessibility impacts search rankings
- Reach: Don't exclude potential users
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and states without anyone reaching outside the palette. Mixing toward white and black rather than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
``css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.