mockstack.

Contrast Checker

WCAG 2.2 + APCA DRAFT ← Web & Brand

The exact WCAG ratio for a color pair, which thresholds it passes, and the APCA draft number.

Text Color

Background

Large heading text

Body copy at fourteen pixels. The quick brown fox jumps over the lazy dog and reads every disclosure.

Button label

4.53 : 1 WCAG RATIO APCA LC 0

Color Blindness

READY PAIR SAVED TO URL · SHARE THE LINK RUNS LOCALLY

About the Contrast Checker

Measures the contrast between two colors and says exactly which accessibility thresholds the pair passes, in your browser. Enter or pick the text and background colors and read the verdict; nothing needs uploading.

Every Setting

Pair: The main mode: one text color against one background. The readout gives the exact ratio, pass or fail at AA and AAA for normal and large text, and the newer draft readability score alongside.
Palette Matrix: Paste a whole palette and get every combination graded in one grid, so you can see at a glance which pairs are safe to use together.
Color Inputs: Type a hex, use the picker, or grab a color straight off the screen where the browser supports the eyedropper. A hex with transparency is flagged: the ratio depends on what shows through, so enter the flattened color.
Fix Suggestion: When a pair fails, the checker offers the nearest color that passes, nudged in lightness so it still reads as your color.
Color Blindness Panel: The pair rendered through three kinds of color vision deficiency, because a pair can pass on contrast and still collapse for some viewers.
Copy Report: The full verdict as text, ready to paste into a ticket or review. The link carries the whole state.

Common Questions

What ratio do I need?: 4.5:1 for normal text and 3:1 for large text at AA; 7:1 and 4.5:1 at AAA.
Can I check my whole palette at once?: Yes. Palette Matrix grades every combination in one grid.