The color contrast checker helps validate foreground and background combinations against official WCAG (Web Content Accessibility Guidelines) standards. Whether you are designing a new website, building a mobile app, or selecting brand colors, ensuring sufficient contrast is critical for readability and legal accessibility compliance.
This tool instantly compares any two colors, calculates their exact relative luminance, and confirms whether the resulting text will be readable across different devices and visual conditions. It removes the guesswork from UI design by providing immediate pass or fail ratings for normal text, large text, and interface components.
How to Use This Calculator
- Enter your desired foreground (text) and background colors. You can use standard hex codes, RGB values, HSL formats, or simple named colors like "blue" or "white".
- Optionally adjust the font size and font weight fields. This is important because WCAG allows lower contrast ratios for larger, bolder text compared to standard paragraph text.
- Click Check Contrast to calculate the exact mathematical ratio and generate the accessibility compliance badges.
- If your pairing fails, use the live color previews to experiment with lighter or darker shades until you achieve a passing grade. Use the Reset button to return to the default black-and-white baseline.
Formula / Calculation Method
The tool converts your selected colors into a standardized linear RGB format to compute the relative luminance (L) of each color, measuring how bright they appear to the human eye on a scale from 0 (black) to 1 (white).
It then compares the lighter color (L1) against the darker color (L2) using the official WCAG contrast equation. The resulting ratio determines if the pairing meets the strict AA or AAA accessibility thresholds.
Example Calculation
Consider testing a standard corporate design using dark gray text (#333333) on a pure white background (#FFFFFF). The white background has a high relative luminance, while the dark gray has a very low luminance.
When applied to the formula, this pairing produces a robust contrast ratio of 12.6:1. Because this ratio is well above the required 4.5:1 threshold, the tool confirms it comfortably passes all WCAG AA and AAA requirements for both normal paragraph text and large headlines.
Reference Data: WCAG Thresholds
| WCAG Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (Minimum) | 4.5:1 | 3.0:1 | 3.0:1 |
| AAA (Enhanced) | 7.0:1 | 4.5:1 | - |
What the Result Means
The final ratio indicates exactly how distinguishable the text will be from its background. A higher ratio (closer to 21:1) means excellent contrast, making your content easily readable for users with visual impairments or color blindness.
Passing the AA level is the standard legal requirement for most business and government websites today, while passing the stricter AAA level ensures the highest possible standard of inclusive design.
Common Mistakes to Avoid
- Relying on the Human Eye: Assuming a color combination passes simply because it looks readable on your high-end monitor. Always use the mathematical ratio, as screen brightness varies wildly.
- Ignoring Font Size Rules: Using normal text thresholds (4.5:1) for bold headers, or conversely, assuming a light gray passes for small body text just because it passed for a large hero headline (3.0:1).
- Forgetting UI Elements: Focusing only on typography while ignoring the contrast of interactive elements like form borders, buttons, and icons, which also require a minimum 3.0:1 ratio.
When This Calculator Is Useful
Web Design
Checking new brand color palettes and typography choices before launching a website to ensure maximum readability for all visitors.
UI Development
Validating button backgrounds, input borders, and navigation link states to guarantee an accessible user experience.
Design Systems
Reviewing strict design tokens and establishing safe theme combinations (like Light Mode vs Dark Mode) for a company design system.
Accessibility Audits
Generating reliable contrast compliance reports when remediating older client websites to meet modern legal accessibility standards.
This calculator serves as a technical accessibility reference tool. While it uses official WCAG algorithms, it should be used alongside manual user testing and comprehensive professional accessibility reviews.