Color Contrast Checker
Compare a foreground and background color and get an exact WCAG contrast ratio, AA/AAA pass or fail results, and an accessible suggestion when a pair falls short.
Large text is approximately 18pt regular or 14pt bold — roughly a subheading size.
Live preview
Heading example
This is normal paragraph text, set at the default body size, showing how comfortably it reads at this contrast level.
This is large text, roughly 24px, which uses the more lenient large-text thresholds.
This is bold text at normal size.
Secondary or muted text inside a card.
How to use the contrast checker
- Pick or type a foreground (text) color and a background color.
- Read the contrast ratio and see which WCAG levels it passes.
- If it fails, apply the suggested accessible alternative, or copy it to use elsewhere.
- Copy the address bar link to share this exact color pair with someone else.
What the output means
The contrast ratio ranges from 1:1 (identical colors, unreadable) to 21:1 (pure black on pure white, maximum contrast). WCAG AA is the baseline accessibility standard most sites should meet: 4.5:1 for normal text and 3:1 for large text. WCAG AAA is stricter — 7:1 for normal text and 4.5:1 for large text — and is recommended where possible but not always required.
Common use cases
Check a brand color against your background before using it for body text, verify a button's text is readable against its background, or confirm a design meets accessibility requirements before shipping.
Frequently asked questions
What is a good contrast ratio?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA, a stricter standard, requires at least 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Large text is approximately 18pt (24px) regular weight or 14pt (18.66px) bold — roughly the size of a subheading.
How is the contrast ratio calculated?
Using the WCAG relative luminance formula based on sRGB values, producing a ratio from 1:1 (identical colors) to 21:1 (pure black on pure white).
Can I share a specific color pair with someone?
Yes — the foreground and background colors are stored in the page URL, so copying the address bar link shares the exact pair you're viewing.