Color · Design

Contrast Checker

Test foreground and background colors against WCAG AA and AAA contrast requirements.

Contrast ratio

14.29 : 1

AA normal: PassAA large: PassAAA normal: PassAAA large: PassUI 3:1: Pass

Large text preview (18pt+)

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

How to use

  1. Pick or paste foreground and background colors.
  2. Read the contrast ratio and pass/fail badges.
  3. Adjust colors until normal or large text passes.

Features

  • WCAG 2.1 relative luminance formula
  • AA/AAA for normal text, large text, and UI
  • Live preview
  • Runs in your browser. Colors and images are not uploaded to ToolsWeb servers.

Privacy & how it works

This design utility runs in your browser. Colors, CSS, and images you enter are not uploaded to ToolsWeb servers for this tool. Privacy Policy.

FAQ

What ratios does WCAG require?expand_more

Normal text: 4.5:1 (AA) or 7:1 (AAA). Large text: 3:1 (AA) or 4.5:1 (AAA). Non-text UI components: 3:1.

Is this tool free?expand_more

Yes. No signup and no paywall for core use.

Is my text uploaded?expand_more

No for this tool. Text stays in your browser while you work.

Do I need an account?expand_more

No. Open the page and start typing or pasting.

Related tools