Color Contrast Checker
Large text sample
This is what normal body text looks like at this contrast.
Related external tools
Some links are affiliate links.
Related tools
Check whether your text is readable against its background. Enter a text color and a background color to see the WCAG contrast ratio and whether it passes the AA and AAA levels for normal and large text, with a live preview. If it fails, the tool suggests a similar color that passes. Everything runs in your browser.
How to use
- Pick the text color.
- Pick the background color.
- Read the contrast ratio and the AA / AAA results.
- If it fails, apply the suggested color that passes.
What the WCAG levels mean
Contrast ratio runs from 1:1 (no contrast) to 21:1 (black on white). For normal text, AA requires at least 4.5:1 and AAA requires 7:1. For large text, AA requires 3:1 and AAA requires 4.5:1. Meeting at least AA helps people with low vision read your content comfortably.
Features
Exact contrast ratio
See the precise WCAG ratio between your two colors.
AA & AAA results
Check pass or fail for both normal and large text at once.
Live preview
See real text in your colors so you can judge readability directly.
Suggested passing color
If contrast is too low, get a nearby color that meets AA.
Private by design
Everything is calculated in your browser. Nothing is uploaded.
Common use cases
Accessible UI
Make sure interface text meets accessibility requirements.
Brand colors
Check whether brand color pairs are readable as text.
Buttons & links
Verify that labels on colored buttons and links are legible.
Documents & slides
Confirm text stands out enough on colored backgrounds.
Notes & tips
- Large text means about 18pt, or 14pt bold and above, which has lower contrast requirements.
- Don't rely on color alone to convey meaning; pair it with text or icons.
- Contrast is one factor in readability, alongside font size and spacing.
- Everything runs on your device — nothing is sent to a server.
Frequently asked questions
- What is contrast ratio?
- It measures how different two colors are in brightness, from 1:1 (identical) to 21:1 (black on white). Higher is easier to read.
- What's the difference between AA and AAA?
- AA is the standard accessibility level (4.5:1 for normal text); AAA is stricter (7:1) for enhanced readability.
- What counts as large text?
- Roughly 18pt regular or 14pt bold and larger. Large text has lower contrast requirements (3:1 for AA).
- What is the suggested color?
- If your text color fails AA, the tool nudges it lighter or darker until it meets 4.5:1 against your background, and offers that color.
- Is anything uploaded?
- No. The check runs entirely in your browser. Nothing is sent to a server.