Input
Preparing your workspace…
How to use
- Enter opaque foreground and background colors.
- Review the preview, contrast ratio and individual pass/fail results.
- Adjust either color or use Swap; copy the ratio when ready.
Reading a contrast result
A foreground color can look clear on one background and disappear on another. This checker compares the pair and separates the requirements for normal text, large text and interface graphics.
The preview gives visual context, while the pass/fail results use the calculated ratio. Font size, weight and the surrounding design still need to be assessed in the finished interface.
Understanding the ratio
Relative luminance is calculated from linearized sRGB channels. The contrast ratio divides the lighter luminance plus 0.05 by the darker luminance plus 0.05.
The black-on-white example reaches 21:1. Swapping foreground and background keeps the ratio the same, although it changes the visual treatment.
#000000 on #ffffff21.00:1 · AA and AAA passBlack text on white has the maximum WCAG contrast ratio of 21:1.
Thresholds and rounding
Normal-text checks use 4.5:1 for AA and 7:1 for AAA. Large-text checks use 3:1 and 4.5:1; the interface-graphics check uses 3:1 where that criterion applies.
The displayed ratio has two decimal places, but pass/fail uses its unrounded value. Transparent colors are rejected because the effective color depends on what is behind them.
Checking the finished interface
Use the ratio alongside the actual text size, weight and component states. A passing color pair does not evaluate focus visibility, keyboard access, meaningful labels or the rest of a page.
Text input up to 1 MiB. CSS and HTML transformations run in a worker with a 30-second limit. Color tools use sRGB; generated styles are previews and require testing in your own layout.
Frequently asked questions
Why can a displayed ratio at the threshold still fail?
The two-decimal display can round upward. The pass/fail check uses the full calculated value, so a value just below the threshold still fails.
Can I enter transparent colors?
No. Supply the final opaque colors after compositing them against the relevant background.
Does swapping colors change the ratio?
No. The luminance ratio is symmetric. Swap changes the preview so you can compare the two visual treatments.
Does an AA result mean the whole page is accessible?
No. It checks this color pair against the displayed contrast thresholds. The applicable text or component criterion and other accessibility requirements need separate review.
Can I save the contrast result?
Use Copy to copy the displayed ratio. The checker does not generate an accessibility report or certify a page.