Color Contrast Checker
Test text and background colors against WCAG AA and AAA standards with a live preview and exact ratio.
Check color contrast for accessibility
The Color Contrast Checker measures the contrast ratio between a text color and a background color and tells you instantly whether it passes the WCAG accessibility standards. Pick two colors, see a live preview of real text, and read the exact ratio along with pass/fail badges for AA and AAA at both normal and large text sizes. It runs entirely in your browser.
Why contrast matters
Low-contrast text is hard to read for everyone, and impossible for many people with low vision or color blindness. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is legible. Meeting these standards is not only good practice — it is a legal requirement in many regions for public-facing websites, and it directly improves usability and conversion for all visitors.
The WCAG contrast thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
Large text means at least 18.66px bold or 24px regular. Aim for AA as your baseline and AAA where you can, especially for body copy.
How the ratio is calculated
Contrast ratio is based on the relative luminance of the two colors, computed from their RGB channels using the official WCAG formula. The result ranges from 1:1 (identical colors, no contrast) up to 21:1 (pure black on pure white). This tool applies that exact formula, so the numbers match what accessibility auditors and browser dev tools report.
How to use it
- Choose your text color and background color with the pickers or hex fields.
- Read the contrast ratio and the AA/AAA pass/fail badges.
- Use the live preview to judge real legibility, then adjust until you pass.
Tips to improve contrast
- Darken text or lighten the background (or vice versa) to increase the ratio.
- Avoid pure gray-on-gray combinations for body text.
- Don't rely on color alone to convey meaning — pair it with text or icons.
- Test your most important text (body copy, buttons, form labels) first.
Private and instant
All calculations run locally in your browser. Nothing is uploaded, and there are no limits — check as many color pairs as you need, for free.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Aim for at least AA.
What counts as large text?
Text that is at least 18.66px and bold, or at least 24px regular, qualifies as large text under WCAG.
How is the contrast ratio calculated?
It uses the official WCAG formula based on the relative luminance of the two colors' RGB values, giving a ratio from 1:1 up to 21:1.
Is this tool free and private?
Yes. It is completely free and runs entirely in your browser — no color data is uploaded or stored.