Contrast Ratio
ColorCheck WCAG 2.1 color contrast ratios for accessibility compliance
Enter a foreground and background color as hex or `rgb()` and get the WCAG contrast ratio back along with a clear pass or fail against the AA and AAA thresholds for normal text, large text, and UI components, which beats calculating relative luminance by hand every time a design system color pairing needs checking. Adjusting either color's lightness and watching the ratio update live makes it easy to find the exact point where a pairing crosses the 4.5:1 or 7:1 threshold you're aiming for. This checks text and UI-component color contrast specifically; it doesn't evaluate other accessibility concerns like focus indicator visibility, and it doesn't automatically know if your text counts as "large" for the relaxed threshold, so you tell it that explicitly based on your actual font size and weight.
How to use Contrast Ratio
- 1.Enter a foreground and background color to get the exact contrast ratio and see whether it passes WCAG AA or AAA for normal and large text.
- 2.Adjust the lightness of one color until the ratio crosses the 4.5:1 (AA) or 7:1 (AAA) threshold, then copy the passing color back into your design.
- 3.Check an existing color pairing from your design system before shipping it, to catch accessibility failures early instead of during an audit.
Frequently asked questions
Use via API, SDK, or MCP
cURL# Free: 1,000 req/day · Pro: 10,000 req/day
curl -X POST https://api.utilix.tech/v1/tools/contrast-ratio \
-H "Authorization: Bearer utx_live_..." \
-H "Content-Type: application/json" \
-d '{"foreground":"#000000","background":"#ffffff"}'Get an API key from your dashboard · Full API docs →