Contrast
Preview
Accessible text sample
Use this panel to preview body copy, heading contrast, and interface readability before colors make it into production.
Body copy
Normal text should pass 4.5:1 for WCAG AA and 7:1 for AAA.
Large display
Large type can pass at lower ratios.
Contrast ratio
16.96:1
Suggested text
#111111
Recommended
Ready for body text
WCAG checks
Normal text
Large text
Quick guidance
- Use 4.5:1 or higher for standard body copy.
- Use 3:1 or higher for large text and key labels.
- Prefer the suggested text color when you need a safer neutral starting point.
Overview
Test foreground and background colors for WCAG accessibility. See contrast ratios, AA/AAA pass states, and preview readable text combinations.
Check WCAG contrast for text and UI colors with live previews and pass/fail guidance.
Common workflows
- Generate shades, tints, and alternate color formats from one base color.
- Build palette harmonies and compare them in a UI preview before exporting values.
- Create CSS-ready gradients, radius values, shadow layers, and typography scales for frontend implementation.
FAQ
Does it show WCAG AA and AAA?
Yes. The checker reports both AA and AAA pass states for normal and large text.
Can I preview the colors before using them?
Yes. The tool includes a live text preview so you can judge readability beyond the ratio alone.