Color Contrast & Legibility Checker
Ensure your website is accessible to everyone. Instantly calculate WCAG 2.1 text contrast ratios to guarantee perfect readability.
Excellent contrast!
WCAG AA Minimum Standard
WCAG AAA Enhanced Standard
Mastering Web Accessibility with the Color Contrast Checker
Designing an inclusive digital experience is no longer optional; it's an industry standard. Our free Color Legibility Checker allows web developers, UI/UX designers, and content creators to instantly verify if their foreground text and background color combinations meet the rigorous Web Content Accessibility Guidelines (WCAG 2.1).
What is a Contrast Ratio?
A contrast ratio is a mathematical representation of the difference in perceived luminance (brightness) between two colors. It ranges from 1:1 (e.g., white text on a white background, which is completely invisible) to 21:1 (e.g., pure black text on a pure white background, offering maximum contrast).
Understanding WCAG AA vs. AAA Standards
The W3C established these standards to ensure the web remains accessible to users with visual impairments, including color blindness and low vision.
- WCAG AA (The Global Baseline): Requires a contrast ratio of at least 4.5:1 for normal body text, and 3.0:1 for large text (usually defined as 18pt or 14pt bold) and essential UI components like buttons and form borders.
- WCAG AAA (The Gold Standard): A stricter compliance level aimed at specialized software and government websites. It requires a contrast ratio of 7.0:1 for normal text and 4.5:1 for large text.
Frequently Asked Questions (FAQs)
What is considered "Large Text" in web design?
According to WCAG specifications, large text is defined as text that is at least 18pt (typically 24px) regular weight, or at least 14pt (typically 18.66px) if the font weight is bold.
How does the relative luminance formula work?
The calculator converts your standard 6-digit HEX codes into RGB values, linearizes them to account for the sRGB color space gamma correction, and calculates perceived brightness. The final ratio is computed by dividing the luminance of the lighter color by the luminance of the darker color.
Why did my colors fail for normal text but pass for large text?
Larger and thicker typography is naturally easier for the human eye to perceive. Therefore, the WCAG allows a slightly lower contrast ratio (3.0:1) for large text compared to the stricter 4.5:1 ratio required for smaller, thinner body copy.