WCAG Color Contrast Checker
Sample Heading Text
Sample body text at 14px. This is how your text will appear on this background colour.
WCAG Contrast Ratio Guidelines Explained
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with low vision or colour blindness. Meeting these standards is also required for legal compliance in many countries.
WCAG 2.1 Contrast Requirements
| Level | Normal Text | Large Text (18pt / 14pt bold) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
A contrast ratio of 1:1 means no contrast (identical colours). The maximum is 21:1 (black on white).
Tips for Accessible Colour Choices
- Dark grey (#333333) on white achieves ~12:1 contrast — well above AAA.
- Light grey text (#999999) on white is only ~2.85:1 — fails even AA.
- Don't rely on colour alone to convey information — use icons, patterns, or labels too.
- Test your palette with simulated colour blindness (deuteranopia, protanopia, tritanopia).
Frequently Asked Questions
What is relative luminance?
Relative luminance is a measure of the perceived brightness of a colour, calculated using a gamma-corrected formula defined by WCAG. It accounts for the human eye being more sensitive to green than red or blue.
Is WCAG AA compliance legally required?
In many jurisdictions, yes. Government websites in the EU, UK, US (Section 508), and Australia must meet at least WCAG 2.1 AA. Private sector requirements vary, but lawsuits for non-compliance are increasingly common.
Does contrast ratio apply to images?
WCAG contrast requirements apply specifically to text against its background. Images of text must also meet the ratios. Decorative images and logos are exempt.