Color Contrast Checker
Calculate the WCAG 2 contrast ratio for two solid colors and inspect AA and AAA results for normal and large text.
Contrast Checker
Type or pick two colors to get the WCAG 2 contrast ratio with AA and AAA marks.
- Does: applies the WCAG relative-luminance formula to two solid colors.
- Doesn’t: check gradients, images or thin strokes inside a logo.
Contrast ratio —
- AA normal text —
- AA large text —
- AAA normal text —
- AAA large text —
Normal text: the quick brown fox redraws the logo.
Large text 24 px
How to use this tool
Enter HEX colors or use the color pickers. The ratio and text preview update as you change either color.
The ratio describes the difference in relative luminance between two solid colors. The results show WCAG 2 AA and AAA thresholds separately for normal and large text. Try the color pair on both light and dark backgrounds before settling on a logo lockup or wordmark treatment.
Limits and privacy
This checks two solid colors only. It does not assess gradients, photographic backgrounds or all parts of a logo.
Logo Lab runs on your device. Files you select are not uploaded or stored by this site. Reloading the page clears the current work.
Common questions
Does a passing ratio make the whole logo accessible?
No. This tool checks one solid text and background pair. It cannot inspect thin strokes, mixed backgrounds or every usage size.
Can I swap the colors?
Yes. Use Swap to reverse text and background while keeping the same two values.
Explore the Color journal for related design topics.
Continue with the guide: Logo color palette and contrast.