Colour Contrast Checker
Check your colour combinations against WCAG 2.1 AA & AAA standards. Get auto-fix suggestions, colour blindness simulation, and WCAG 3.0 (APCA) preview — all free, no signup.
RGB: 30, 41, 59
RGB: 255, 255, 255
Large Text Preview (24px / 18.66px bold)
Normal text preview — The quick brown fox jumps over the lazy dog. This is how your text will look at standard body size (16px).
Small text preview (14px) — Make sure this is still readable for your users.
Contrast Ratio
WCAG AA Normal: Ratio ≥ 4.5:1 — Required for body text (under 18pt / 24px)
WCAG AA Large: Ratio ≥ 3:1 — For large text (18pt+ / 14pt+ bold)
WCAG AAA: Ratio ≥ 7:1 (normal) / 4.5:1 (large) — Enhanced accessibility
UI Components: Ratio ≥ 3:1 — WCAG 2.1 requirement for buttons, inputs, icons
Frequently Asked Questions
Why Colour Contrast Matters
Good contrast is not just about accessibility — it improves readability, user experience, and even conversions.
2.2B
Better Readability
people worldwide have a vision impairment. Good contrast helps everyone read your content.
UK Law
Legal Compliance
The Equality Act 2010 requires accessible websites. WCAG 2.1 AA is the standard.
8%
8% of Men
have colour vision deficiency. Your colour choices affect how millions see your site.
+35%
Better UX = More Sales
improvement in engagement when websites meet accessibility contrast standards.
WCAG Contrast Levels Explained
Understanding the different WCAG levels helps you choose the right standard for your project.
| Requirement | AA (Standard) | AAA (Enhanced) |
|---|---|---|
| Normal Text (<18pt) | 4.5:1 | 7:1 |
| Large Text (≥18pt / 14pt bold) | 3:1 | 4.5:1 |
| UI Components & Graphics | 3:1 | — |
Colour Accessibility Tips for Web Designers
- Never rely on colour alone to convey information — use icons, labels, or patterns as well
- Test your colour scheme with colour blindness simulation before launching
- Use a contrast ratio of at least 4.5:1 for all body text — aim for 7:1 when possible
- Ensure focus indicators and interactive elements have at least 3:1 contrast
- Consider both light and dark mode when choosing your colour palette
- Test with real users who have visual impairments whenever possible
- Use semantic colour — don't use red/green alone for success/error states
Need a website that is both beautiful and accessible? Our web design team builds accessible-first websites that meet WCAG 2.1 AA standards as standard. Or check your existing site with our Website Speed Test.
Need an Accessible Website?
Hand On Web designs websites that meet WCAG 2.1 AA accessibility standards as standard. Beautiful, fast, and accessible — we don't compromise on any of them.