WCAG Contrast Score Checker
Ensure your website is accessible to everyone. Instantly calculate the color contrast ratio between your text and background to verify WCAG 2.1 AA and AAA compliance.
- ✓ Real-Time Evaluation
- ✓ WCAG 2.1 AA & AAA Badges
- ✓ Live Text Preview
- ✓ 100% Privacy & Local Processing
Color Settings
Accessibility Score
How to Use the Contrast Score Checker
- Select Foreground Color: Use the color picker or manually type the HEX code for your text color in the first input box.
- Select Background Color: Choose the background color your text will sit on in the second input box.
- Check the Ratio: The tool instantly calculates the contrast ratio. A higher number indicates better readability.
- Review WCAG Badges: Look at the accessibility badges to see if your combination passes the AA and AAA standards for both normal and large text.
- Live Preview: Check the preview box to visually confirm that the text is comfortable to read. Use the "Swap" button to quickly invert the colors.
Features of this Generator
- Instant Calculation: Calculates the exact luminance formula specified by WCAG 2.1 guidelines in real-time.
- Smart Syncing Inputs: Automatically syncs native color pickers with text inputs for a seamless workflow.
- Detailed Pass/Fail Metrics: Breaks down compliance for both Normal text (below 18pt or 14pt bold) and Large text (18pt or 14pt bold and above).
- Client-Side Processing: 100% of calculations happen in your browser. No data is sent to external servers, ensuring your design systems remain private.
Benefits of Checking Color Contrast
Designing with accessible color contrast isn't just about passing automated tests; it directly impacts user experience and business metrics. High-contrast designs improve readability for users with visual impairments, color blindness, and age-related vision loss. Additionally, it benefits everyone by making websites legible in difficult lighting conditions, such as viewing a mobile screen under bright sunlight, ultimately reducing bounce rates and improving content engagement.
Common Web & UI Use Cases
- Design System Audits: Checking brand color palettes before finalizing CSS variables or Figma tokens.
- Button Legibility: Ensuring primary and secondary Call-to-Action (CTA) buttons have readable text against colored backgrounds.
- Dark Mode Development: Verifying that inverted text colors in dark themes maintain the same readability standards as light themes.
- Accessibility Compliance Reports: Documenting contrast ratios for WCAG compliance audits and client deliverables.
Examples of Contrast Combinations
| Foreground | Background | Ratio | Result (Normal Text) |
|---|---|---|---|
#000000 (Black) |
#FFFFFF (White) |
21.00 : 1 | ✅ AAA Pass |
#2563EB (Blue) |
#FFFFFF (White) |
4.94 : 1 | ✅ AA Pass |
#737373 (Gray) |
#FFFFFF (White) |
4.68 : 1 | ✅ AA Pass |
#9CA3AF (Light Gray) |
#FFFFFF (White) |
2.84 : 1 | ❌ Fail |
Tips for the Best Results
- Aim for AA at Minimum: WCAG AA requires a ratio of at least 4.5:1 for normal text and 3.0:1 for large text. This is the legal standard for most web accessibility requirements.
- Use Pure Black/White Carefully: While `000000` on `FFFFFF` yields the highest contrast, it can cause eye strain for some users. Consider softening to off-blacks (like `#111111`) or off-whites (like `#FAFAFA`).
- Font Weight Matters: Thin font weights are harder to read, even with good contrast. If your contrast is borderline, try increasing the `font-weight`.
Frequently Asked Questions
What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are an internationally recognized set of standards created by the W3C. They outline how to make web content more accessible to people with disabilities, including visual impairments.
What is a good contrast ratio?
A contrast ratio of 4.5:1 is considered good and meets the WCAG AA standard for normal-sized text. For enhanced accessibility (WCAG AAA), a ratio of 7.0:1 or higher is recommended.
What is the difference between AA and AAA?
Level AA is the standard target for most websites and legally mandated by laws like the ADA and Section 508. Level AAA is a stricter standard (requiring 7.0:1 contrast) usually targeted by specialized applications or government portals serving users with severe vision loss.
What defines "Large Text"?
WCAG defines large text as text that is at least 18pt (typically 24px) regular weight, or at least 14pt (typically 18.66px) bold weight.
How is the color contrast score calculated?
The ratio is calculated using the relative luminance formula, which compares the brightness of the lighter color to the darker color. The formula weights green more heavily than blue or red, mirroring how the human eye perceives brightness.
Conclusion
The Contrast Score Checker is an essential utility for modern web development, ensuring your digital products are inclusive, readable, and legally compliant. By consistently testing your color palettes against WCAG standards before deployment, you protect your brand while prioritizing a seamless, frustration-free user experience for all visitors.