Contrast Checker
Sample Text
The quick brown fox jumps over the lazy dog.
Small text preview for body copy readability.
Contrast Ratio
17.06:1
AA Normal
≥ 4.5:1
PassAA Large
≥ 3:1
PassAAA Normal
≥ 7:1
PassAAA Large
≥ 4.5:1
PassAbout WCAG Contrast Requirements
WCAG GuidelinesAA Normal text: Requires a contrast ratio of at least 4.5:1 for text smaller than 18pt (or 14pt bold).
AA Large text: Requires a contrast ratio of at least 3:1 for text 18pt+ (or 14pt+ bold).
AAA Normal text: Requires a contrast ratio of at least 7:1 — the enhanced level for optimal readability.
AAA Large text: Requires a contrast ratio of at least 4.5:1 for large text at the enhanced level.
Use contrast checks before tokens spread through the whole UI
Contrast problems usually start small and then repeat across alerts, buttons, inputs, navigation, and data displays. This checker is the fastest place to test text-on-surface, icon-on-fill, and muted copy combinations before those colors get mapped to semantic roles in the wider theme.
For the most reliable results, test more than the primary palette. Review body text on backgrounds, button labels on solid fills, dimmed supporting text, focus states, and dark-mode variants. That catches accessibility regressions earlier than relying on visual inspection alone.