WCAG Contrast Checker
Check accessibility, simulate color blindness, and analyze color palettes.
Heading Example
This text shows how your color combination will look.
Poor Contrast
/* Text & Background Colors */
.accessible-text {
color: #FFFFFF;
background-color: #1E3A5F;
}
/* CSS Variables */
:root {
--text-color: #FFFFFF;
--bg-color: #1E3A5F;
}What is a Contrast Checker?
Ensure your designs are readable by everyone.
Color contrast is one of the most critical yet often overlooked aspects of web design. It determines whether the text on your website is readable—not just for users with perfect vision, but for the 2.2 billion people worldwide who have some form of vision impairment. A contrast checker is a specialized tool that measures the mathematical difference in luminance (perceived brightness) between your text color and its background.
The Web Content Accessibility Guidelines (WCAG), maintained by the W3C, define specific minimum contrast ratios that websites must meet to be considered accessible. WCAG Level AA—the most commonly required standard for legal compliance—mandates a ratio of at least 4.5:1 for normal body text. Level AAA, the gold standard, requires 7:1. Our tool instantly calculates this ratio and tells you whether your color choices pass or fail each level.
Beyond compliance, good contrast is simply good design. It improves readability for users in bright sunlight, on low-quality screens, or when they're simply tired. By using this contrast checker before launching your website, you're not just avoiding lawsuits—you're creating a better experience for every single user.
How to Check Color Contrast
Enter Colors
Input your foreground (text) and background colors using HEX codes, RGB, or the visual picker.
See Ratio
The tool instantly calculates the contrast ratio and shows whether it passes WCAG AA and AAA standards.
Get Suggestions
If your colors fail, the tool suggests accessible alternatives that maintain a similar look.
Key Features
Precise Ratio Calculation
Uses the official WCAG luminance formula to calculate exact contrast ratios up to two decimal places.
AA & AAA Compliance
Instantly see pass/fail status for both normal and large text against AA and AAA standards.
Smart Suggestions
Get automatically generated accessible color alternatives when your current choice fails.
Live Preview
See a real-time preview of how your text will look against the background at different font sizes.
100% Private
All calculations happen locally in your browser. No data is ever sent to our servers.
Instant Results
No page reloads or waiting. See results the moment you change a color value.
WCAG Contrast Requirements
| WCAG Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (Enhanced) | 7:1 | 4.5:1 | Not specified |
* Large text = 18pt (24px) regular or 14pt (19px) bold
Pro Tip: Don't Rely on Color Alone
Even with perfect contrast, never use color as the only way to convey information. For example, if an error message is just red text, a colorblind user may miss it. Always pair color with icons, labels, or patterns. This principle is called "Use of Color" (WCAG 1.4.1).
Who Needs a Contrast Checker?
UI/UX Designers
Validate color choices in Figma or Sketch mockups before handoff to developers.
Frontend Developers
Test CSS color variables and ensure the final build meets WCAG standards.
Product Managers
Ensure your product complies with ADA, Section 508, or European Accessibility Act requirements.
Content Creators
Verify that blog graphics, social media images, and marketing materials are readable.
Frequently Asked Questions
What is WCAG and why does it matter?
WCAG (Web Content Accessibility Guidelines) is an international standard for making web content accessible to people with disabilities. It matters because approximately 15% of the world's population has some form of disability, and accessible design ensures everyone can use your website or application.
What is the difference between WCAG AA and AAA?
WCAG AA is the minimum standard most organizations should meet. It requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the highest level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is ideal but not always practical for all content.
What contrast ratio should I aim for?
For most websites, aim for at least 4.5:1 for body text and 3:1 for headings and large text (18pt/24px or 14pt/19px bold). If you can achieve 7:1 or higher, your content will be readable by users with low vision without assistive technology.
What counts as 'large text' in WCAG?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 19px) or larger for bold text. Large text has a lower contrast requirement (3:1 for AA) because bigger letters are inherently easier to read.
Why does white text on light gray fail accessibility?
White text on light gray fails because both colors have similar luminance (brightness) values. The contrast ratio calculation considers relative luminance, not just color difference. Two similar brightness levels result in low contrast, making text hard to read for many users.
Do images and icons need to meet contrast requirements?
Yes, WCAG 2.1 added requirements for non-text contrast. User interface components (buttons, form fields, icons) must have at least 3:1 contrast against adjacent colors. Decorative images are exempt, but functional graphics must be distinguishable.
Can I use low contrast for decorative text?
WCAG allows exceptions for purely decorative text (text that adds no meaning), incidental text (like text in a photograph), logos, and inactive UI components. However, if text conveys any information, it should meet contrast requirements.
How is contrast ratio calculated?
Contrast ratio is calculated using the relative luminance of two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Luminance is calculated from RGB values using a formula that accounts for how human eyes perceive brightness.
What tools can help me fix low contrast?
Our contrast checker provides suggested accessible colors automatically. You can also: darken text on light backgrounds, lighten text on dark backgrounds, increase font weight or size, or add a semi-transparent overlay behind text on images.
Is color contrast the only accessibility concern?
No, color contrast is one of many accessibility considerations. Others include: keyboard navigation, screen reader compatibility, alt text for images, focus indicators, text resizing support, and not relying on color alone to convey information (use icons, patterns, or labels too).
What are the legal requirements for web accessibility?
In the US, the ADA (Americans with Disabilities Act) requires accessible websites for public entities and businesses. In the EU, the European Accessibility Act mandates compliance. Many countries reference WCAG 2.1 Level AA as the legal standard.
How does colorblindness affect contrast perception?
People with colorblindness can still perceive contrast based on luminance (brightness), but not hue differences. For example, red and green may appear similar. This is why contrast ratio (based on luminance) is more reliable than 'color difference' for accessibility.