A QUICK WALKTHROUGH
How to use this tool
- Enter foreground and background colors.
- Set text size in pixels and whether it is bold.
- Check the ratio and read the normal/large text results.
How it works
sRGB channels are linearized before relative luminance is calculated. The ratio is (lighter luminance + 0.05) / (darker luminance + 0.05). Threshold comparisons use the unrounded ratio. AA normal text requires 4.5:1; large text requires 3:1. Large means at least 24 CSS pixels, or approximately 18.67 pixels when bold.
A practical example
Start with
#000000 on #ffffff
What to expect
21:1 contrast. Identical foreground and background colors have 1:1 contrast.
Important considerations
A passing color pair does not certify an entire page. Gradients, background images, disabled controls and other accessibility requirements need separate evaluation. Transparent colors must first be composited.
1 MiB per input. Input remains in page memory until you reset or leave. Copy and download actions are initiated by you. No tool input is sent to a processing service.
One more useful detail
Can a displayed 4.50 fail AA?
Yes. A ratio just under 4.5 can round to 4.50. The pass/fail result uses the full calculated value.