Contrast Checker

Check the WCAG contrast ratio between a foreground and background color for text, large text, and UI components — free, private, in your browser.

Overview

Contrast Checker computes the exact WCAG 2.1 contrast ratio between a foreground and background color and reports pass/fail for AA and AAA, across normal text, large text, and UI-component thresholds. Results are announced to screen readers, not just shown as color, and a one-click suggestion offers a readable foreground when a pair fails. Every calculation happens in your browser.

Key Features

  • Enter a foreground and background color to see the exact contrast ratio
  • Pass/fail results for WCAG AA and AAA
  • Separate thresholds for normal text, large text, and UI components
  • Screen-reader-friendly result announcements
  • One-click suggestion for a readable foreground
  • Deeplinkable via ?fg= and ?bg= URL parameters

Common Use Cases

  • Auditing a design system — Check every text/background combination in a component library against WCAG AA before shipping.
  • Fixing a failing button — Find out exactly how far off a button's text/background pair is, and get a passing alternative.
  • Reviewing a marketing page — Confirm body copy and large headline text both clear their respective WCAG thresholds.

How It Works
1

Enter your two colors

Pick or type a foreground (text) color and a background color.

2

Read the ratio and verdict

See the exact contrast ratio plus a pass/fail badge for AA and AAA, for normal text, large text, and UI components.

3

Fix a failing pair

Use the readable-foreground suggestion, or open the pair in the Color Editor to adjust it further.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG?
For AA: 4.5:1 for normal text, 3:1 for large text (18pt+, or 14pt+ bold) and UI components. For AAA: 7:1 for normal text, 4.5:1 for large text. AAA has no separate level defined for UI components.

How is the contrast ratio calculated?
Using the WCAG 2.1 formula: each color's relative luminance is computed from its linearized RGB channels, then the ratio is (lighter + 0.05) / (darker + 0.05).

Can I link directly to a specific pair?
Yes — /tools/color/contrast-checker?fg=%23000000&bg=%23ffffff opens with black text on white prefilled.

What if my pair fails?
Use the "Use readable foreground" button to switch to black or white, whichever passes with more margin, or open the color in the Color Editor to nudge it toward passing while keeping its hue.

Related Tools

Accessible Palette Generator Accessible Text Color Finder Brand Palette Accessibility Checker Color Blindness Simulator Color Converter Color Editor