Contrast Checker

Check text contrast ratios against WCAG accessibility standards.

Free forever No signup Runs in your browser
The short answer

Body text needs a 4.5:1 contrast ratio against its background (WCAG AA); large headings need 3:1. Grey text on white fails more often than designers expect — #777 on white is only 4.48:1, just under the bar. Check every colour pair here.

How to use the contrast checker

  1. Pick text and background colours.
  2. See the ratio and AA/AAA verdict.
  3. Adjust until it passes.

Contrast Checker — FAQs

What is WCAG AA?

The Web Content Accessibility Guidelines’ widely-adopted standard: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold).

AA vs AAA?

AAA is stricter (7:1 for body text) — excellent but often impractical for brand colours. AA is the legal/practical target in most countries.

Does this apply to buttons too?

Yes — UI components and their labels need 3:1 against adjacent colours. Disabled states are exempt.

What about text over images?

Risky: contrast varies across the image. Add a dark overlay or scrim behind text to guarantee the ratio.

Keep exploring

People who used this also opened:

dev

HEX to RGB Converter →

Convert HEX colours to RGB and HSL — and back.

 generate

Color Palette Generator →

Generate harmonious colour palettes from any base colour.

 dev

PX to REM Converter →

Convert px to rem (and back) for accessible, responsive CSS.

 dev

JSON Formatter & Validator →

Format, validate and minify JSON with syntax highlighting.