Color Contrast Checker
Check whether your text and background colors are readable and meet the WCAG AA and AAA accessibility levels.
Contrast ratio
Large heading
Small text must stay readable.
WCAG 2.2 rules: level AA = recommended minimum (and required by accessibility regulations), level AAA = enhanced.
Everything runs in your browser: no data is sent.
About this tool
This color contrast checker calculates the contrast ratio between a text color and a background color using the WCAG accessibility formula. It instantly shows whether the pair passes levels AA and AAA for normal text, large text and user interface components. Useful when designing a website, an app, a poster or a menu that everyone can read.
Type two HEX codes or use the color pickers: a live preview shows a heading and small text in your colors. If the contrast is too low for level AA (4.5:1), the tool suggests a nearby compliant text color with the same hue, which you can apply in one click. You can also swap text and background and copy a share link.
- Instant WCAG contrast ratio calculation
- AA and AAA checks for normal and large text
- 3:1 check for icons and UI components
- Suggests a nearby AA-compliant text color
- Live preview and share link
How to use it
- Enter the "Text color" and "Background color" (HEX code or picker).
- Read the "Contrast ratio" and the pass/fail table.
- If needed, click "Use this color" to apply the suggestion.
- Copy the share link to send the color pair.
Frequently asked questions
Are my colors sent anywhere?
No. The calculation runs entirely in your browser and no data is sent. The two colors are only placed in the page address for the share link.
Is the contrast checker free?
Yes, it is free and works without an account or sign-up.
What contrast ratio do I need for WCAG AA?
WCAG requires at least 4.5:1 for normal text and 3:1 for large text at level AA. Level AAA requires 7:1 and 4.5:1. Icons and UI components need 3:1.
How do I fix a text color that is too light?
When the ratio is below 4.5:1, the tool darkens or lightens your text color while keeping its hue until it reaches level AA. Click "Use this color" to apply it.