Color Contrast Checker

Check foreground and background color pairs against WCAG contrast rules before they ship. This is useful for design reviews, accessibility audits, and catching low-legibility UI states early.

Foreground (Text)

Background

Sample Text

The quick brown fox jumps over the lazy dog.

Small text for testing purposes.

21.00:1

Excellent

Normal Text

AA (4.5:1)

AAA (7:1)

Large Text

AA (3:1)

AAA (4.5:1)

WCAG 2.1 Guidelines

Large text is 18pt+ or 14pt+ bold. Most websites should aim for AA compliance at minimum.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Color Contrast Checker?

Color Contrast Checker measures how readable a foreground color is against a background color and compares that result with WCAG accessibility thresholds. That makes it useful for body text, buttons, form labels, badges, and other UI elements where low contrast quietly hurts usability.

It is not only for formal audits. Teams use contrast checks during mockups, component reviews, and brand updates because a color pair that looks polished in a design file can still fail for small text, muted states, or lower-vision users.

How to Use Color Contrast Checker

Enter foreground (text) color

Enter background color

See the contrast ratio and WCAG compliance

Adjust colors until you meet the required level

Common Use Cases

Designers checking whether body text, helper text, and button labels stay readable across a UI system.
Accessibility reviewers validating AA or AAA requirements before a release goes live.
Brand teams testing whether marketing palette colors can be reused safely in product interfaces.
Frontend developers catching low-contrast hover, disabled, and secondary states before they reach QA.

Example Input and Output

The same brand color can pass for large headings but fail for body copy, which is why testing exact pairs matters.

Color pair

Foreground: #1f2937
Background: #f9fafb
Text size: normal body text

Contrast result

Contrast ratio: 14.05:1
WCAG AA: Pass
WCAG AAA: Pass
Large text: Pass

Accessibility

AA and AAA thresholds are not interchangeable. A pair that works for a large hero heading may still fail for smaller body text or muted helper labels.

Workflow tip

Test hover, disabled, and secondary button states too. Teams often validate primary colors but miss lower-contrast UI states introduced later.

Frequently Asked Questions

What are the WCAG contrast requirements?

AA 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.

What is the difference between AA and AAA?

AA is the common baseline for accessible digital products. AAA is stricter and usually applies where maximum readability is required, such as long-form reading experiences or highly accessible interfaces.

Does large text use a different threshold?

Yes. WCAG allows lower contrast for large text because bigger letters are easier to read. That is why a color pair may pass for headings but fail for body copy.

Can I use this for gradients or images?

Use it for the actual colors behind the text, not the image or gradient as a whole. If a background changes across the surface, test the lightest and darkest areas separately.

Is the color data private?

Yes. The checker runs in the browser, so the color values you test are not sent to a server.

Why can a brand color pass on white but fail on gray?

Contrast depends on the exact foreground and background pair. Even a small background shift can lower the ratio enough to fail for normal text.