Home› Developer Tools› Color Contrast Checker
Accessibility Tool

Color Contrast Checker

Check if your text and background colors meet WCAG AA and AAA accessibility standards. Instant ratio, live preview, and fix suggestions.

Color Pair
Quick presets
Text / Foreground color
Background color
Contrast Results
The quick brown fox jumps over the lazy dog
This is normal body text at 16px. Good color contrast ensures readability for all users, including those with visual impairments.
Small text at 12px — requires a higher contrast ratio to pass WCAG standards.
Button
—
Contrast Ratio
1:1 (no contrast) 21:1 (maximum)
AA 4.5
AAA 7
Suggested Fixes — click a swatch to apply

WCAG Contrast Requirements

LevelElementMin. RatioDescription
AANormal text (< 18pt / < 14pt bold)4.5 : 1Minimum for standard body text
AALarge text (≥ 18pt / ≥ 14pt bold)3 : 1Large headings and bold text
AAUI Components & Graphics3 : 1Buttons, icons, form borders
AAANormal text7 : 1Enhanced accessibility standard
AAALarge text4.5 : 1Enhanced for large text
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is an international standard for making web content accessible to people with disabilities, including those with visual impairments. Published by the W3C, it defines specific contrast ratio requirements for text and UI elements.
What's the difference between AA and AAA?
AA is the minimum legal compliance level required in most countries. AAA is the enhanced level providing the best readability, especially for users with low vision. AAA is harder to achieve but recommended for critical content like medical or legal information.
Does this apply to decorative images?
No. Contrast requirements only apply to text, UI components and meaningful graphics. Purely decorative images, logos, and inactive UI components are exempt from WCAG contrast requirements.
How is the contrast ratio calculated?
The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is that of the darker color. Relative luminance is computed from the sRGB values after applying gamma correction. A ratio of 1:1 means no contrast (identical colors); 21:1 is maximum (black on white).