Contrast Checker - WCAG Color Accessibility
Check color contrast ratios for WCAG accessibility compliance instantly. Free online contrast checker.
Colors
Text Color (HEX)
Background Color (HEX)
The quick brown fox
This is how your text will look on the selected background.
WCAG Color Contrast Checker & Tester
Check if your text and background colors have enough contrast to be readable by everyone. This WCAG color checker calculates the contrast ratio according to the Web Content Accessibility Guidelines (WCAG) so you can verify web accessibility color compliance before you ship a design.
How to Check Color Contrast Ratio
Enter or pick a text color and a background color and the tool instantly calculates the contrast ratio and shows whether it passes WCAG AA/AAA thresholds for normal and large text.
Example
Black text (#000000) on a white background (#FFFFFF) has a contrast ratio of 21:1 — the maximum possible — while light gray text on white might fall well below the WCAG AA minimum of 4.5:1.
Common Use Cases
- Checking website text/background color combinations for accessibility compliance.
- Meeting WCAG AA or AAA standards for a design system or client project.
- Using an accessibility calculator to review a site before an ADA compliance audit.
- Running a quick accessibility color check on brand colors before finalizing a style guide.
FAQs
What is WCAG and why does contrast matter?
WCAG (Web Content Accessibility Guidelines) is the standard used to measure whether website color combinations are readable by people with low vision or color blindness. This tool calculates the WCAG contrast ratio between your text and background colors so you can check compliance before publishing.
What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text (3:1 for large text). WCAG AAA, a stricter standard, requires 7:1 for normal text (4.5:1 for large text).
Is this an ADA compliance contrast checker?
The ADA itself doesn't specify a technical contrast formula, but WCAG AA (4.5:1 for normal text) is the standard most commonly used to demonstrate ADA-related web accessibility compliance in the US. Checking your contrast ratio against WCAG AA with this tool is a reasonable way to help meet that bar.
How do I check color contrast ratio for accessibility?
Enter your text color and background color as hex codes above — the contrast ratio, along with WCAG AA and AAA pass/fail results for both normal and large text, calculates instantly.