Tools · Color · Contrast checker

Contrast checker

Check whether two colors meet WCAG contrast requirements for text and UI.

Drop a file here, or choose one.

Runs fully in your browser. Nothing is uploaded.

How it works

  1. Pick or enter a text color and a background color.

  2. Read the contrast ratio and see whether it passes AA and AAA.

  3. Adjust either color until it passes the level you need.

Frequently asked questions

4.5:1 for normal text, and 3:1 for large text (18pt, or 14pt bold) and for UI components and meaningful graphics.

7:1 for normal text and 4.5:1 for large text - a stricter level, not required for most sites but worth reaching where it's easy to.

18pt (24px) regular, or 14pt (19px) bold, per WCAG's own definition.

Yes, it also checks the 3:1 threshold for UI components (like button borders and form inputs) and meaningful graphics, per WCAG 2.1's non-text contrast rule.

No. The ratio is calculated entirely in your browser.

Comments

  1. No comments yet. Be the first to share your experience.
Your rating (optional)

No rating selected