What contrast ratio does WCAG AA require?

WCAG 2.2 Level AA generally requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA raises those to 7:1 and 4.5:1. UI components and graphical objects often need at least 3:1 against adjacent colors.

Does Contrast Checker upload my colors to a server?

No. Color math runs in your browser. Nothing is stored unless you choose to copy results yourself.

Can I check brand colors for both light and dark themes?

Yes. Run the checker twice with each theme’s background, and keep pairs that pass in both contexts: or define separate tokens per theme.

How is this different from a palette generator?

Palette tools suggest harmonious colors; Contrast Checker proves a specific pair is readable enough for accessibility compliance.

Color

Contrast Checker

WCAG accessibility ratios

All tools

Contrast Checker how to for contrast checker: open the tool, run a tiny sample, then save the result.

DevsWallet

Automation Pipeline

STANDBY

Capture

Payload ready

Engine

API orchestration

Deliver

Structured result

Automation trace

Awaiting task…

Contrast Checker

Check WCAG contrast ratio between foreground and background colors.

Guide & documentation

How to use Contrast Checker

DevsWallet Contrast Checker is a free WCAG 2.2 color contrast auditor for designers and front-end engineers. Enter foreground and background colors (HEX or RGB), and the tool reports contrast ratios plus AA/AAA pass-fail for normal text, large text, and UI components. Use it before merging design tokens, when reviewing dark-mode themes, or while fixing accessibility tickets that cite insufficient contrast. Unlike generic color pickers, this page focuses on readable UI compliance with clear thresholds and practical remediation tips.

Contrast Checker runs in your browser on DevsWallet. Use the steps below for a first successful run, then open the full guide if you need deeper examples, FAQs, and troubleshooting.

Step by step

Open Contrast Checker on DevsWallet and enter your text (foreground) color.
Enter the background color used behind that text or icon.
Review the computed contrast ratio and AA/AAA results for normal and large text sizes.
Adjust either color until both states you ship (default and hover) meet your target level, then copy the approved pair into your design system.

Common use cases

Auditing button labels, form helpers, and muted captions against brand backgrounds.
Validating dark-mode palettes so secondary text still meets WCAG AA.
Checking icon-on-surface pairs for toolbar and navigation chrome.
Documenting compliant token pairs for design-system changelogs and a11y reports.

Expert deep dive

WCAG 2.2 contrast ratios decide whether body text, UI labels, and icons stay readable for people with low vision. DevsWallet Contrast Checker evaluates foreground/background pairs against AA and AAA thresholds for normal and large text, then explains pass/fail so you can fix design tokens before shipping. Use it during design reviews, design-system audits, and accessibility sign-off: paste HEX or RGB values, compare states (hover, disabled, error), and keep a record of compliant pairs for light and dark themes.

Frequently asked questions

What contrast ratio does WCAG AA require?: WCAG 2.2 Level AA generally requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA raises those to 7:1 and 4.5:1. UI components and graphical objects often need at least 3:1 against adjacent colors.
Does Contrast Checker upload my colors to a server?: No. Color math runs in your browser. Nothing is stored unless you choose to copy results yourself.
Can I check brand colors for both light and dark themes?: Yes. Run the checker twice with each theme’s background, and keep pairs that pass in both contexts: or define separate tokens per theme.
How is this different from a palette generator?: Palette tools suggest harmonious colors; Contrast Checker proves a specific pair is readable enough for accessibility compliance.