WCAG AA and AAA Contrast Checker

Check color contrast for WCAG 2.2 AA and AAA, preview text sizes and find accessible color alternatives.

Hover over or focus a field for help. Press Escape to close.

ForegroundBackgroundOpaque canvas

Use HEX, RGB, RGBA or HSL. Transparent colors are composited over the opaque canvas.

5.84:1

Thresholds use the full precision ratio, never the rounded display value.

WCAG 2.2
Level	Use	SC	Minimum	Result
AA	Normal text	1.4.3	4.5:1	Pass
AA	Large text	1.4.3	3:1	Pass
AAA	Normal text	1.4.6	7:1	Fail
AAA	Large text	1.4.6	4.5:1	Pass
AA	Interface components and graphics	1.4.11	3:1	Pass

Preview textFont size (CSS px)Bold

Aa — fiokit.

Normal text: AA ✓ · AAA ✗

Large text: at least 24 CSS px, or 18.67 CSS px in bold (14 pt).

Suggested foreground targetReport

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Normal text (SC 1.4.3): PASS — 4.5:1
AA Large text (SC 1.4.3): PASS — 3:1
AAA Normal text (SC 1.4.6): FAIL — 7:1
AAA Large text (SC 1.4.6): PASS — 4.5:1
AA Interface components and graphics (SC 1.4.11): PASS — 3:1

This checks color pairs, not full WCAG conformance. Assess adjacent colors, interaction states and real content separately.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

How it works

Set foreground, background and opaque canvas. AA and AAA results update immediately. Try font size and weight, apply a suggested color or download the report.

A practical example

Colors

#155bdf

Frequently asked questions

Is my input sent to a server?

No. Your content is processed in this browser. It is never sent to the server or saved.

What should I know about WCAG AA and AAA Contrast Checker?

Reports text and non-text thresholds separately. This color check does not certify full WCAG conformance.