How to Check color contrast for accessibility

Check WCAG 2.2 color contrast ratios for accessibility. Test foreground and background colors against AA and AAA standards with live preview and auto-suggestions.

4 min read Contrast Checker Free, no signup required

Quick start

Contrast Checker — Check WCAG 2.

Get started in under two minutes:

Enter your foreground color
Enter your background color
Read the contrast ratio and WCAG grade
Use the auto-suggest feature

Open Contrast Checker

Step-by-step instructions

Follow these steps to get the best results from Contrast Checker:

Enter your foreground color

Click the foreground color swatch or type a hex value into the input field. This is usually the text color.

Tip: You can also enter colors in RGB format like rgb(30, 50, 80) — the tool converts it automatically.

Enter your background color

Click the background color swatch or type a hex value. This is the color the text sits on top of.

Tip: Use the color picker to visually browse and select exact shades.

Read the contrast ratio and WCAG grade

The tool displays the contrast ratio (for example: 4.5:1) and whether it passes WCAG AA (minimum 4.5:1 for normal text) and AAA (7:1) standards.

Tip: Large text (18pt or 14pt bold) only needs a 3:1 ratio for WCAG AA compliance.

Use the auto-suggest feature

If your combination fails WCAG, click "Suggest passing alternatives" to see the nearest colors that meet the contrast threshold while staying close to your original palette.

Tip: Small adjustments to lightness (in HSL) are the fastest way to fix failing contrast ratios.

Open Contrast Checker

Frequently asked questions

Is Contrast Checker free to use?

Yes — Contrast Checker is completely free with no account or signup required. All core features are available immediately.

Does Contrast Checker work on mobile devices?

Yes — Contrast Checker works on smartphones and tablets through any modern mobile browser. The interface adapts to smaller screens automatically.