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.
WCAG Contrast Checker
Check text and background contrast ratios for accessibility.
Preview text
Small and large text should remain readable.
Ratio
17.74:1
AA normal
Pass
AA large
Pass
AAA normal
Pass
AAA large
Pass
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.