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.
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 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.