Home›Accessibility Tools›Color Contrast Checker
◐

Color Contrast Checker

Test text and interface colors against WCAG 2.2 contrast thresholds, preview real content, and repair failing color pairs with accessible suggestions.

WCAG AA & AAAText + UI checksAccessible suggestionsCSS output

Contrast testing workspace

Enter colors as 3- or 6-digit HEX, customize the sample, and review each applicable requirement.

Calculated in browser

The quick brown fox

—
Contrast ratio
Waiting for valid colors
AA · Normal text
—
Requires 4.5:1
AA · Large text
—
Requires 3:1
AAA · Normal text
—
Requires 7:1
AAA · Large text
—
Requires 4.5:1
UI components
—
Requires 3:1 where applicable
Chosen text style
—
Based on size and weight

Accessible foreground suggestions

Nearest darker or lighter alternatives that meet AA for the chosen text style.



What Is Color Contrast?
Contrast ratio compares the relative luminance of a foreground color and its background. The WCAG formula produces a value from 1:1 for identical luminance to 21:1 for black and white. Higher contrast generally improves legibility, especially for people with low vision or when screens are used in glare or at low brightness.
Complete Accessibility Checks
🔤 Text thresholds
Review AA and AAA for both normal and large text, plus the threshold that applies to your chosen size and weight.
◫ Interface contrast
Check the 3:1 threshold commonly required for meaningful graphics, focus indicators and component boundaries.
🛠 Color repair
Apply nearby accessible foreground alternatives instead of guessing how far a failing color must change.
👁 Real preview
Test your own copy, type size and weight in a representative card and control treatment.
📋 Reusable CSS
Copy custom properties and a ready-to-use text rule, or share the exact color pair through the URL.
🔒 Local calculation
Color values and sample text stay in your browser and are never required by a remote service.


WCAG Contrast Thresholds
4.5:1WCAG AA for normal text
3:1WCAG AA for large text and applicable non-text content
7:1WCAG AAA for normal text
Large text is generally at least 24 CSS pixels at normal weight, or approximately 18.66 CSS pixels when bold. This tool treats weights of 700 or higher at 19 px as large for threshold guidance.


Contrast Is Necessary, but Not Sufficient
A passing ratio does not guarantee an accessible design. Avoid using color as the only signal, provide visible keyboard focus, use readable typography and spacing, preserve semantic structure, label controls, support zoom, and test real interfaces with assistive technology and users.


Frequently Asked Questions
Does WCAG 2.2 change the basic text contrast ratios?
The familiar minimum ratios remain 4.5:1 for normal text and 3:1 for large text at AA, with 7:1 and 4.5:1 respectively at AAA.
Why can two different color pairs have the same ratio?
The calculation uses relative luminance, not hue. Different hues can produce similar luminance relationships and therefore the same contrast ratio.
Do disabled controls need the same contrast?
WCAG includes exceptions for inactive user-interface components, but relying on extremely faint disabled states can still harm usability. Preserve clarity whenever practical.
Should I test hover and focus states separately?
Yes. Test every meaningful state, including hover, focus, selected, error and disabled treatments, because each can use a different foreground, border or surface color.