Color Contrast Checker for WCAG AA & AAA
Check foreground and background color pairs before shipping UI text, design tokens, landing pages, and documentation styles.
A contrast checker compares text and background colors to calculate a WCAG contrast ratio.
WCAG AA normal text needs 4.5:1, while large text needs 3:1.
Test real UI pairs
Use the actual text color and actual background color from the component, not nearby palette swatches.
Check states separately
Test default, hover, disabled, focus, error, and selected states when those colors differ.
AA normal text requires 4.5:1. AA large text requires 3:1.
AAA normal text requires 7:1. AAA large text requires 4.5:1.
Contrast checks help make text easier to read across devices, lighting conditions, and visual abilities.
Use contrast ratio alongside real UI review, font size, weight, and state design.
Example
Check button text against its background before adding the color pair to a component library.
Assumption
Inputs are 3-digit or 6-digit HEX color values.
Limitation
Contrast ratio does not evaluate font size, motion, focus state, or full accessibility compliance.
Button text
Check text against primary, secondary, hover, disabled, and destructive button backgrounds.
Design tokens
Validate color tokens before they enter a component library or theme file.
Landing pages
Test hero text, navigation, links, and call-to-action colors against their backgrounds.
Documentation styles
Check body text, code labels, muted text, and table colors for readable docs.
What is a passing AA ratio?
Normal text needs at least 4.5:1. Large text needs at least 3:1.
What is a passing AAA ratio?
Normal text needs at least 7:1. Large text needs at least 4.5:1.
Does this guarantee accessibility?
No. It checks contrast only, which is one part of accessibility.
Does it use an API?
No. The calculation runs locally in your browser.
Suggested workflow
Accessible color path
Normalize color values, check contrast, and then apply the pair to CSS surfaces.