Toolkit / Color & Design Tools
WCAG Contrast Checker
Check the contrast ratio between text and background colors against WCAG readability targets.
Privacy note: Design inputs are processed in your browser, so you can test colors, gradients, and CSS values quickly.
Limitations: Contrast ratios help with readability but do not guarantee a fully accessible design.
Loading tool…
How wcag contrast checker works
Enter foreground and background colors to calculate the contrast ratio.
Use the result to evaluate normal text, large text, UI labels, buttons, and accessible color choices.
Privacy
Design inputs are processed in your browser, so you can test colors, gradients, and CSS values quickly.
Limitations
- Contrast ratios help with readability but do not guarantee a fully accessible design.
- Font size, font weight, spacing, state changes, and surrounding UI also matter.
- Color appearance can vary by display, browser, brightness, and viewing conditions.
FAQs
What contrast ratio should text have?
WCAG commonly recommends at least 4.5:1 for normal text and 3:1 for large text.
Does passing contrast mean my design is accessible?
No. Contrast is important, but accessibility also includes structure, keyboard support, labels, focus states, and usability.
What counts as large text?
WCAG defines large text by size and weight. Large or bold text can meet a lower contrast threshold.
Should disabled text meet contrast rules?
Disabled controls have different considerations, but important information should remain readable.