Color Contrast Checker
Check color contrast and generate design tokens from your color choices. Supports hex, named colors, rgb(), hsl(), and other common color formats. Use the color picker or type directly.
Button
Badge
AA Compliant AAA Compliant Needs Review
Accordion
What is WCAG compliance?
WCAG (Web Content Accessibility Guidelines) ensures digital content is accessible to people with disabilities, including proper color contrast ratios.
Why does contrast matter?
Good color contrast helps users with visual impairments, color blindness, and those using devices in bright sunlight read content clearly.
Radio buttons
Contrast checker
Loading... -:-
Small text Level AA Level AA Level AAA Level AAA
Large text Level AA Level AA Level AAA Level AAA
UI components Level AA Level AA Level AAA Level AAA
Color palette
Avatar
WC
William Charles
UX Accessibility Specialist
AG
Ava Green
Inclusive Design Lead
Progress bar
Icon