Contrast Checker
Check the contrast ratio between two colors for WCAG accessibility compliance.
Preview
Large Text (18pt+)
Heading Example
This is an example of large text content to demonstrate contrast.
Normal Text (under 18pt)
Regular paragraph text that users would typically read.
Smaller text that might be used for secondary content.
Color Contrast Checker
Ensure your web designs meet accessibility standards with our professional color contrast checker. Test color combinations against WCAG 2.1 guidelines for AA and AAA compliance.
Why Use Our Color Contrast Checker?
Our color contrast checker is an essential tool for web designers and developers who want to create accessible and inclusive digital experiences. This powerful tool helps you ensure that your color combinations meet the rigorous standards set by the Web Content Accessibility Guidelines (WCAG), making your content usable for people with various visual impairments.
Accessibility compliance is not just about following regulations—it's about reaching the widest possible audience. Approximately 1 in 12 men and 1 in 200 women worldwide experience some form of color vision deficiency, and many others benefit from high contrast due to aging eyes or viewing in challenging lighting conditions.
Our tool provides instant feedback on your color choices, showing you exactly which combinations work and which don't, helping you make informed decisions about your design system and user interface colors.
Key Benefits
- Legal Compliance: Meet accessibility requirements like ADA, Section 508, and WCAG standards
- Better User Experience: Create interfaces that are easy to read and navigate for all users
- Professional Design: Ensure your color choices work well in all contexts and lighting conditions
- Time Saving: Get instant results without manual calculations or guesswork
Understanding WCAG Standards
The Web Content Accessibility Guidelines (WCAG) provide specific contrast ratios that ensure text remains readable:
AA Level (Minimum Compliance)
4.5:1 ratio for normal text (under 18pt or 14pt bold)
3:1 ratio for large text (18pt+ or 14pt+ bold)
AAA Level (Enhanced Compliance)
7:1 ratio for normal text
4.5:1 ratio for large text
These ratios ensure that text remains legible for users with color vision deficiencies, low vision, or those viewing content in poor lighting conditions.
Who Should Use This Tool?
UI/UX Designers
Create accessible interfaces and design systems
Web Developers
Implement accessible color schemes in code
Content Creators
Ensure text readability across all devices
WCAG AA vs AAA, explained
Color contrast is the most common accessibility failure on the web — and one of the easiest to fix. Here is what the numbers actually mean and how to pass them every time.
AA (minimum)
4.5:1 for normal text · 3:1 for large text (18pt / 14pt bold or bigger) and UI components like buttons, inputs and icons.
AAA (enhanced)
7:1 for normal text · 4.5:1 for large text. Common requirement in government, healthcare and strict brand guidelines.
How contrast is calculated
It is the ratio between the relative luminance of two colors, from 1:1 (white on white) to 21:1 (black on white):
(L1 + 0.05) / (L2 + 0.05) Relative luminance weights each RGB channel after gamma correction. That is why two colors that look different in saturation can still fail: saturation does not matter, luminance does.
Common failures and fixes
Gray text on white
#999999 on white is 2.8:1 — fails AA. Darken to #767676 (4.54:1) for compliant body text.
White text on brand colors
White on amber #F59E0B is 2.2:1. Darken the background, switch to dark text, or reserve the pairing for decorative elements.
Low-contrast placeholders
Light gray placeholders usually fail — placeholders are not exempt from WCAG, and invisible hints are a usability problem too.
Colored links in colored text
A link inside body text must reach 4.5:1 against the background and be distinguishable by more than color — underline it.
| Text type | AA | AAA |
|---|---|---|
| Body text (< 18pt) | 4.5:1 | 7:1 |
| Large text (≥ 18pt / 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
Use the checker above to test any foreground/background pair in real time. Accessible color does not mean boring color — it means checking luminance relationships early.