Check text and interface colours against all four WCAG 2.x contrast thresholds; composite translucent foregrounds, preview real text sizes, fix the foreground while retaining its hue, or generate a passing pair.
DESIGN & COLOR · LOCAL WORKBENCH · BROWSER WORKSPACE
Build a preview you can inspect.
Check text and interface colours against all four WCAG 2.x contrast thresholds; composite translucent foregrounds, preview real text sizes, fix the foreground while retaining its hue, or generate a passing pair.
✳
01 · CHOOSE A FOREGROUND + BACKGROUNDWCAG 2.x · LIVE
Transparency is composited before testing.Three- and four-digit shorthand, six-digit HEX, and eight-digit #RRGGBBAA are accepted. The background is treated as fully opaque; any background alpha is ignored.
Values stay in this browser. The eyedropper appears when this browser exposes its screen-colour picker.
02 · CHECK THE PAIR4.29 : 1
CONTRAST RATIO4.29:1Below AA body-text target
RELATIVE LUMINANCEText 0.1946Background 1.0000
PREVIEW · 24px BOLD
Read this heading
Body copy at 15px shows what the colour pair feels like in a real interface, not just as two hex values.
Small print · 12px · often the first to fail
×
AA · normal text · 4.5:1Body copy, labels and links
FAIL✓
AA · large text · 3:124px regular or 18.66px bold and above
PASS×
AAA · normal text · 7:1Enhanced contrast for normal text
FAIL✓
AA · non-text / UI · 3:1Meaningful borders, icons and focus indicators
PASS
THRESHOLDS ON THE 1:1–21:1 SCALEHIGHER ≠ ALWAYS MORE COMFORTABLE
1:13:1 large / UI4.5:1 AA7:1 AAA21:1
◎
Runs in this browser. Results are estimates or editing cues. Review the assumptions and source-specific limits before using them in a consequential decision.
Check text and interface colours against all four WCAG 2.x contrast thresholds; composite translucent foregrounds, preview real text sizes, fix the foreground while retaining its hue, or generate a passing pair. Results update as you adjust inputs and stay in this browser.
