ClearUtils

Design Tools

Contrast Checker

Check color contrast ratios for text and background colors, including WCAG AA and AAA pass/fail guidance, directly in your browser.

Contrast checks run locally in your browser.
Contrast ratio
14.68:1
AA normal
Pass
AA large
Pass
AAA normal
Pass
AAA large
Pass
Preview

Preview the foreground/background pair and copy the contrast summary for QA notes.

The quick brown fox jumps over the lazy dog. Sample button text and body copy.
Contrast ratio 14.68:1. WCAG AA normal text: pass. AA large text: pass. AAA normal text: pass.

What this tool does

Compare two HEX colors, calculate their contrast ratio, preview the pair, and show WCAG AA/AAA results for normal and large text without uploading or storing anything.

Common use cases

Check foreground and background color contrast for accessibility QA, design handoffs, CSS changes, and visual reviews before publishing.

Use Contrast Checker for a focused browser-local utility task, then continue with related tools only when the next step is part of the same workflow.

How to use it

  1. Enter a foreground text color and background color in HEX format.
  2. Review the contrast ratio and WCAG AA/AAA pass or fail results.
  3. Preview the color pair, adjust either color, and copy the summary for accessibility QA notes.

Example workflow

Enter the values or content for the task, review the result, then use related tools only when they match the next step of the same workflow.

Privacy note

Client-side only: contrast checking runs locally in your browser. Color values are not uploaded, stored, fetched, or logged.

FAQ

Does this contrast checker upload my colors?

No. Color contrast checking runs locally in your browser and does not upload, store, fetch, or log entered color values.

What contrast ratio passes WCAG AA?

WCAG AA generally requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

Can I use short HEX colors?

Yes. The checker accepts 3-digit and 6-digit HEX colors such as #fff, #000000, or #2563EB.

Explore more tools

Browse the Design Tools hub or continue with the Color Tools Toolkit when this task is part of a larger workflow.

Workflow tools

Suggested next tools

More tools are being added to this cluster.