Color Contrast Checker for WCAG AA & AAA
Check foreground and background color pairs before shipping UI text, design tokens, landing pages, and documentation styles.
Try a common contrast pair
Readable sample
Use this preview to judge the color pair beyond the numeric ratio.
Contrast ratio
17.74:1
AA normal text
PassAA large text
PassAAA normal text
PassAAA large text
PassA 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.
Is contrast enough for accessibility?
No. It checks contrast only, which is one part of accessibility.
Does it use an API?
The calculation is handled in the browser for this tool based on the current public implementation.
Suggested workflow
Accessible color path
Normalize color values, check contrast, and then apply the pair to CSS surfaces.