Color Contrast Checker
Check the contrast between two solid colors using the WCAG contrast-ratio calculation. Compare AA and AAA thresholds for normal and large text.
- Calculate foreground/background contrast
- Compare normal and large-text thresholds
- Check both AA and AAA ratio targets
Check the colors actually used
Enter opaque foreground and background HEX values. For translucent text or a gradient background, first determine the effective colors behind the text.
Read the normal-text targets
AA uses a ratio of at least 4.5:1 for normal text; AAA uses 7:1. A ratio below the target needs a color adjustment.
Apply large-text rules carefully
Large text has lower ratio thresholds: 3:1 for AA and 4.5:1 for AAA. Size and weight determine whether text qualifies as large.
Keep the wider accessibility review
A passing color pair does not certify an accessible page. Keyboard use, labels, focus visibility and other requirements still need review.
Technical references: W3C text contrast guidance
Color Contrast Checker FAQs
No. It uses the WCAG 2.x contrast-ratio method, not APCA.
No. It evaluates this solid color pair against text contrast thresholds only.
Opaque black on white has a 21:1 contrast ratio, the maximum in this calculation. Other pairs should be checked against the appropriate text-size threshold. A passing pair does not establish that an entire page meets accessibility requirements.