Color Tools
Color contrast checker
Test foreground and background colors for WCAG AA and AAA accessibility. See contrast ratios and pass/fail results instantly.
Sample Heading
This is sample body text showing how the foreground color appears on the background.
Small text example (14px)
14.63:1
Contrast ratio
WCAG AA — Normal text
Minimum 4.5:1 — Pass
WCAG AA — Large text
Minimum 3:1 — Pass
WCAG AAA — Normal text
Minimum 7:1 — Pass
WCAG AAA — Large text
Minimum 4.5:1 — Pass
Understanding WCAG contrast requirements
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text against its background. Meeting these ratios ensures content is readable for people with low vision, color blindness, or other visual impairments. Use this tool to verify your design meets accessibility standards before publishing.
Frequently asked questions
- What is WCAG color contrast?
- WCAG (Web Content Accessibility Guidelines) requires minimum contrast ratios between text and background colors. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
- How is the contrast ratio calculated?
- The tool uses the WCAG 2.1 formula: it calculates the relative luminance of each color, then computes the ratio (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
- What counts as large text?
- Under WCAG, large text is 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Regular text below these sizes must meet the normal text contrast thresholds.
- Is this tool accurate?
- Yes. It uses the official WCAG 2.1 relative luminance and contrast ratio formulas. Results match the W3C accessibility standards.