color/design

WCAG Contrast Checker

The WCAG Contrast Checker compares foreground and background colors locally and reports the resulting contrast ratio against WCAG AA and AAA thresholds. It helps teams move from color choices to accessible UI decisions with plain-English pass or fail guidance.

Foreground

Background

Accessible preview text

Body copy and callout text update instantly as you change either color pair.

Contrast ratio

17.05:1

rgb(33, 22, 13) on rgb(255, 250, 242)

Normal text AA

Pass

Normal text AAA

Pass

Large text AA

Pass

Large text AAA

Pass

CSS snippet

color: #21160D;
background-color: #FFFAF2;

How to use it

1. Set the foreground and background colors with either text inputs or the built-in color pickers.
2. Check the contrast ratio panel to see normal-text and large-text pass or fail results for AA and AAA.
3. Copy the generated CSS snippet when you want to test the pair inside a component or design review note.

Why this tool

Anchors the catalog in practical accessibility work instead of generic color conversion alone.

Core function: Measure contrast ratio and AA/AAA outcomes.

Unique angle: Pair pass/fail results with UI-friendly presets and CSS snippets.

Examples

Copy-ready examples for common workflows

Validate dark text on a light card

Input

Foreground #21160d on background #fffaf2

Output

Contrast ratio 16.85:1. Passes AA and AAA for normal text and large text.

Check white text on a saturated accent

Input

Foreground #ffffff on background #de6d33

Output

Contrast ratio 3.41:1. Fails normal-text AA and AAA, passes large-text AA only.

FAQ

Questions this page answers up front

What is the difference between AA and AAA?

AA is the baseline accessibility target for most interfaces, while AAA is stricter and usually reserved for higher-accessibility requirements or specialized content.

Why are large-text thresholds different?

WCAG allows lower contrast for large text because bigger type is easier to read, so the thresholds are 3:1 for AA and 4.5:1 for AAA.

Does this tool send my color choices anywhere?

No. The calculations happen entirely in the browser, so the color values stay on the device.