Check the WCAG contrast ratio between a foreground color and a background color.
The tool calculates relative luminance for both hex colors, reports the contrast ratio, and marks whether the pair passes AA and AAA thresholds for normal and large text.
Thresholds
- AA normal text: 4.5:1
- AA large text: 3:1
- AAA normal text: 7:1
- AAA large text: 4.5:1
This is a browser-only calculation for design checks and accessibility reviews.
When to use it
Pick text and background colors during UI design, verify button labels on tinted headers, and document contrast decisions before hand-off to engineering. Invalid hex values return a clear error instead of a misleading ratio.