For dashboards and data-heavy UI
Build clear hierarchy with dependable contrast, semantic tokens, and readable data colors.
Colors Browser-only processing Updated March 19, 2026
Contrast Checker
Check color contrast ratios for WCAG 2.1 AA and AAA accessibility compliance. Ensure your text is readable for all users.
Sample Heading
This is sample body text to demonstrate the contrast between your chosen colors.
Small text (like captions) requires higher contrast for readability.
14.05:1
AAA
WCAG AA
- Normal Text✓ Pass
- Large Text✓ Pass
- UI Components✓ Pass
WCAG AAA
- Normal Text✓ Pass
- Large Text✓ Pass
How to Use
- Enter your foreground (text) color in the first input
- Enter your background color in the second input
- View the contrast ratio and WCAG compliance status
- Use the swap button to quickly reverse the colors
- If the colors fail, use our suggested fix to find an accessible alternative
Examples
Black on White
21:1 — AAA Pass Light on Dark
18.1:1 — AAA Pass Yellow Warning
4.5:1 — AA Pass Use Cases
For brand palettes and design systems
Create reusable color scales and exports for CSS variables, Tailwind, and documentation handoff.
Glossary Terms
Frequently Asked Questions
What is WCAG and why does contrast matter? ▼
WCAG (Web Content Accessibility Guidelines) are standards that ensure web content is accessible to people with disabilities. Color contrast is crucial for users with low vision or color blindness to read text.
What is the difference between WCAG AA and AAA? ▼
AA is the minimum standard requiring 4.5:1 contrast for normal text and 3:1 for large text. AAA is the enhanced standard requiring 7:1 for normal text and 4.5:1 for large text.
What counts as "large text" in WCAG? ▼
Large text is at least 18pt (24px) regular weight or 14pt (18.66px) bold. Large text has lower contrast requirements because its size makes it easier to read.
How do I fix low contrast? ▼
Either darken your text color on light backgrounds, or lighten it on dark backgrounds. Our tool provides suggested fixes automatically when your colors fail contrast requirements.
Is 3:1 contrast enough for buttons? ▼
For UI components like buttons, icons, and form elements, WCAG requires a minimum 3:1 contrast ratio against adjacent colors. Text inside buttons still needs 4.5:1.