Color Contrast Checker

Check WCAG AA and AAA compliance — make sure your text is readable for everyone.

Large Text Preview

Normal body text looks like this. Check if your users can read this comfortably on the background color you chose.

This is small text (12px) — hardest to read, needs higher contrast.

Text Color
Background Color
12.63:1
Contrast Ratio
AA Normal Text
PASS
Requires 4.5:1
AA Large Text
PASS
Requires 3:1
AAA Normal Text
PASS
Requires 7:1
AAA Large Text
PASS
Requires 4.5:1

How to Use Color Contrast Checker

① Enter foreground (text) color ② Enter background color ③ View WCAG AA/AAA compliance results ④ Adjust colors if needed

About Color Contrast Checker

Color Contrast Checker is a free online tool that verifies whether your text and background color combinations meet WCAG 2.1 accessibility standards. It checks both AA and AAA compliance levels for normal text, large text, and UI components, helping you create designs that are readable for everyone. The tool calculates the contrast ratio between two colors and evaluates it against WCAG (Web Content Accessibility Guidelines) thresholds. WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Color accessibility is not optional — it is a legal requirement in many jurisdictions and a fundamental aspect of inclusive design. Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Ensuring sufficient contrast makes your content readable for all users, including those with visual impairments. Everything runs entirely in your browser. There are no usage limits and no account required. Common use cases include verifying website color schemes for accessibility compliance, testing brand colors against WCAG standards, auditing existing designs for accessibility issues, choosing accessible color combinations for new projects, and meeting legal accessibility requirements. For picking and converting colors, use the Color Picker. For creating accessible gradient backgrounds, try the CSS Gradient Generator.

Frequently Asked Questions

What is WCAG?
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C.
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
Is accessibility legally required?
In many countries, yes. The ADA (US), EAA (EU), and similar laws require accessible digital content.
Does it check for color blindness?
It checks contrast ratios which benefit all users including those with color vision deficiencies.
Share Aether Tool
Help us grow!