Color Contrast Checker
Test text and background colors for WCAG and APCA readability, then get hue-preserving fixes for an accessible color palette.
Long-form reading stays effortless at this level — safe to ship.
Morning mist asks for darker ink; nightfall asks for brighter letters. Contrast is the distance between words and light — 4.5:1 is the floor; comfort lives above. Sphinx of black quartz, judge my vow. 0123456789
Example pairs
Mood scenes
One pair of colors, three little scenes: a poem, a painting, a tea menu. Switch example pairs and the hills will follow.
空山新雨后
天气晚来秋
The moon rises over Tianshan
- Cloud-mist green¥28
- Osmanthus oolong¥32
- Pine-spring white¥22
Even the small print should read clear.
Pass & fail, side by side
One layout, one paper, four text colors from dark to light. If you can see the difference, you can hold the standard — click any card to load it above.
APCA (Lc) algorithm © Andrew Somers / Myndex Research, used free of charge under the W3 license for web content contrast prediction.
How to read your contrast scores
WCAG 2.1 — the legal baseline
WCAG measures a plain ratio between the two colors. For normal body text, AA requires 4.5:1 and AAA requires 7:1; large text (about 18pt, or 14pt bold and up) passes AA at 3:1. Non-text elements like icons and input borders fall under a separate 3:1 rule (1.4.11). If you need a defensible compliance target, this is the number auditors will ask for.
APCA — the perceptual model
APCA (Accessible Perceptual Contrast Algorithm) models how real eyes read light text on dark backgrounds and vice versa, so it treats thin fonts, dark mode and mid-tone pairs far more realistically than a ratio. Scores are expressed as Lc: roughly 75+ for comfortable body text, 60+ for large headlines, 45+ for the smallest supporting text, and 30–45 for non-text UI elements.
Which one should you follow?
Use WCAG when you need a pass/fail compliance decision, and APCA as a design-quality signal — especially for dark themes, where WCAG ratios are known to over- and under-estimate. A pair can pass WCAG yet read poorly in practice; when both models agree a pair is comfortable, you are safe on every screen.
“APCA™ is the Accessible Perceptual Contrast Algorithm, a new way to predict contrast for text and non-text content on self-illuminated displays.”
What is a color contrast checker?
A color contrast checker compares text and background colors and reports WCAG 2.1 contrast results alongside APCA perceptual contrast. Use it before shipping buttons, body copy, forms and dark mode. When a pair fails, the tool suggests a fix that keeps the original hue as much as possible. To turn the result into a complete semantic color system, continue to the Brand Theme Engine.
Can WCAG and APCA be used together?
Yes. WCAG provides the established compliance baseline, while APCA adds a perceptual design check.
What comes after a contrast check?
Bring the checked color roles into the Brand Theme Engine to generate light/dark themes and semantic tokens.