Tools / Contrast Checker
WCAG Contrast Checker.
Pick two colors, get the contrast ratio and WCAG AA/AAA grades instantly. Grounded in the same color library that powers the 378 Wada combinations.
Normal text (16px)
The quick brown fox jumps over the lazy dog.
Large text (24px bold) — threshold ÷ by 1.5
Wada, 1933 — shikisai no jiten.
UI component (button)
Try a Wada classic
Studio
When the contrast has to hold off-screen
A ratio is measured on an idealised display. Printed and painted, the same pair behaves differently.
Affiliate links — as an Amazon Associate we earn from qualifying purchases.
-
...onto paper
Start here if the palette gets printed. Screen colour and ink colour are not the same colour, and this is the deck that translates between them.
Listed on Amazon as Pantone Formula Guide – Coated & Uncoated | Professional PMS Color Matching System for Print, Packaging & Graphic Design | GP1601B
See price on Amazon -
...onto a screen you can trust
Start here if it stays digital. An uncalibrated monitor is the single most common reason a palette that looked right on your desk looks wrong everywhere else.
Calibrite
ColorChecker Passport Photo 2
Listed on Amazon as Calibrite ColorChecker Passport Photo 2 Portable Color Calibration Kit for Photo and Video, 4 Target Set for White Balance, Exposure and Creative Look
See price on Amazon -
...by hand
Start here if you are mixing it. Wada's plates were flat printed colour; gansai pans are the closest everyday medium to them.
Listed on Amazon as Strathmore 300 Series Tape Bound Watercolor Pad, 140 lb. Cold Press, 11 X 15 inches, White, 12 Sheets (360-111)
See price on Amazon
Amazon Associates affiliate links — your price is unchanged and a small commission keeps the archive free. As an Amazon Associate we earn from qualifying purchases.
How WCAG contrast works
The formula
WCAG 2.1 defines contrast as the ratio of the relative luminances of two colors, where luminance accounts for how the human eye perceives brightness differently in red, green, and blue channels (0.2126R + 0.7152G + 0.0722B, after gamma correction). The result ranges from 1:1 (identical) to 21:1 (black on white).
The grades
AA is the minimum required by most legal accessibility standards (WCAG 2.1 level AA). Normal text needs 4.5:1; large text (18px+ or 14px+ bold) and UI components need 3:1.
AAA is enhanced — 7:1 for normal text, 4.5:1 for large text. It is not required by law in most jurisdictions but significantly improves readability for users with low vision.
Embed this contrast checker
Drop a live WCAG contrast checker into your own site, docs, or design-system page. It's a single iframe — no script, no tracking. Paste this where you want it:
Live preview: