Color Contrast Checker
Calculate WCAG contrast ratio with AA/AAA pass/fail for normal and large text at once. Swap colors and preview live. Everything stays in your browser.
Normal text โ contrast is a readability baseline.
Large text (bold)
โ
| Normal | Large | |
|---|---|---|
| AA | โ | โ |
| AAA | โ | โ |
How to Use the Color Contrast Checker
Set foreground and background colors or pick an example chip. Ratio, AA/AAA results, and the preview update together. Use swap to flip colors and see how each direction reads.
Examples
- #777 on #fff โ 4.47:1 / normal AA โ (below 4.5) / large AA โ
- #000 on #fff โ 21:1 / normal & large AAA โ
- #ea6379 on #fff โ 3.20:1 / normal AA โ / large AA โ (brand color as body text needs care)
- #fff on #2d2a32 โ 14.10:1 / normal & large AAA โ (dark UI)
When to Check Contrast
- Choosing text and background colors for buttons, cards, alerts and navigation.
- Checking brand colors before using them as body text.
- Reviewing dark-mode color pairs where low contrast is easy to miss.
What the WCAG Check Does Not Cover
The ratio uses the WCAG 2.x sRGB relative-luminance formula and AA/AAA thresholds; see W3C's official Contrast (Minimum) guidance (last checked July 14, 2026). This page compares two opaque colours only. It does not sample images, gradients, transparency, hover states, or changing backgrounds.
A passing number does not establish complete accessibility. Test the actual font size and weight, focus indicators, link identification, colour-vision needs, zoom, and real device rendering. Build candidate palettes with the Color Scheme Generator.