Contrast Checker
Check color contrast ratio for WCAG accessibility
How to use Contrast Checker
Check color contrast ratio for WCAG 2.1 AA and AAA accessibility compliance. Free online contrast checker tool for designers.
Why does color contrast matter?
About 8% of men and 0.5% of women have some form of color vision deficiency. Additionally, people read in challenging conditions — bright sunlight, low-quality screens, fatigue, or aging eyes. Sufficient color contrast ensures your content is readable for everyone.
- Web accessibility compliance: WCAG 2.1 (Web Content Accessibility Guidelines) sets minimum contrast ratios. Many countries have laws requiring websites to meet at least WCAG AA compliance — failing it exposes organizations to legal risk.
- Design review: Check text and background color combinations during the design phase, before development. It is far cheaper to fix contrast issues in Figma than after launch.
- Component libraries: Verify that every color combination in your design system — text on primary, text on secondary, disabled states — meets accessibility requirements.
- Dark mode: When implementing dark mode, colors that worked on white backgrounds often fail on dark backgrounds. Each mode needs independent contrast verification.
- Data visualization: Ensure chart colors are distinguishable by colorblind users and readable on different background colors.
WCAG levels: Level A is the minimum. Level AA (ratio ≥ 4.5:1 for normal text, ≥ 3:1 for large text) is the legal standard in most jurisdictions. Level AAA (ratio ≥ 7:1) is for the highest accessibility — required for some government and healthcare sites.
Frequently Asked Questions
What contrast ratio is required by WCAG AA?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (below 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). UI components and graphical elements (icons, form borders) require 3:1. These are minimums — higher contrast is always better for readability.
How is the contrast ratio calculated?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the darker. Luminance is calculated from the linear RGB values using a specific formula. The maximum contrast is 21:1 (black on white). A ratio of 1:1 means no contrast.
Does contrast ratio apply to colored text on colored backgrounds?
Yes — the WCAG formula compares relative luminance, not just brightness. Red text on green background might have poor contrast even though both are vivid colors. Always test actual color combinations — do not rely on intuition.
What is the difference between color contrast and color blindness?
Contrast ratio measures luminance difference — it matters for all users including those with normal color vision (especially in bright light). Color blindness affects how colors are distinguished, not necessarily their luminance. A high-contrast design using only red and green passes the luminance test but may be indistinguishable for red-green colorblind users. Both issues need to be addressed.
Does font weight affect contrast requirements?
Yes. Bold text and large text have lower minimum requirements because they are inherently easier to read. WCAG AA requires 3:1 for text that is 18pt (24px) or larger, or 14pt (approximately 18.67px) bold. For smaller or non-bold text, the requirement is 4.5:1.
Contrast checker vs colorblind simulator vs accessibility audit
A contrast checker verifies the luminance ratio between two specific colors. A colorblind simulator (Coblis, Chrome DevTools) shows how a design appears with different types of color vision deficiency. A full accessibility audit (axe, Lighthouse, WAVE) scans an entire page for all WCAG violations — contrast, missing alt text, keyboard navigation, ARIA labels. For comprehensive accessibility: check contrast in the design phase, simulate colorblindness before launch, and run automated audits on the live site.