TinyTools

◐ DESIGN

Contrast Checker

Check text contrast ratios with WCAG AA and AAA badges, live preview, and one-click fix.

Your files are processed directly on your device and are not uploaded to our servers.

Colors

17.49:1

✓ AA normal✓ AA large✓ AAA normal✓ AAA large

Large headline preview

Normal body text preview — the quick brown fox jumps over the lazy dog. 1234567890.

Button preview

Code

CSS

.accessible-text {
  color: #1c1917;
  background-color: #ffffff;
}

How to use

  1. Pick a text color and a background color — or start from a preset.
  2. Check the ratio and WCAG AA / AAA badges against the live preview.
  3. Apply the suggested fix if it fails, then copy the CSS into your project.

FAQ

What is a good contrast ratio?
WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px regular) at AA level. AAA requires 7:1 for normal text and 4.5:1 for large text. Aim for AA at minimum.
How is the ratio calculated?
Each color gets a relative luminance from its linearized RGB channels, then the ratio is (lighter + 0.05) / (darker + 0.05). Black on white scores 21:1, the maximum.
What does the suggested fix do?
It nudges your text color toward black or white in small steps until it reaches 4.5:1 against the background, keeping your hue as close as possible. Apply it with one click.
Is my data uploaded anywhere?
No. Every ratio is computed locally in your browser. Nothing you type or copy ever leaves your device.

Related tools