Colour Contrast Checker
Choose your text and background colours to check whether they have enough contrast for reading.
Your heading
This is how your paragraph text looks with these two colours.
A smaller label or captionWorks for small text and headings
This pair meets the minimum text-contrast requirement for body copy, links, buttons and headings.
Colour contrast is one part of readability. Check font size and spacing on the real page too.
Contrast ratio and accessibility details
Contrast ratio: 16.60:1
| Requirement | Minimum | Result |
|---|---|---|
| AA small text | 4.5:1 | Pass |
| AA large text | 3:1 | Pass |
| AAA small text | 7:1 | Pass |
| AAA large text | 4.5:1 | Pass |
AA is the minimum level shown in the main result. AAA is a higher contrast target.
Choose the threshold for the text you are using
A pair can pass for a heading and fail for a form label. Use the normal-text result for body copy, navigation and small buttons; a large heading in the preview does not make those elements large text.
| Text size | AA | AAA |
|---|---|---|
| Normal | 4.5:1 | 7:1 |
| Large | 3:1 | 4.5:1 |
WCAG large text is at least 18 pt (24 CSS px), or 14 pt (about 18.7 CSS px) when bold. Check the WCAG contrast definition before using the lower threshold.
If the pair fails
Try a darker text colour or a lighter background, then recheck the label at its actual size. Swapping the two colours changes the sample but not the contrast ratio.
If the pair passes
Test the real page too. This calculator compares two solid hex colours; images, gradients, transparency, hover states and focus indicators need their own review.