What this tool does
Test a foreground and background pair against objective text-contrast thresholds while keeping common color formats together.
How to use it
- Enter foreground and background HEX colors or use the color pickers.
- Calculate the contrast ratio and the four AA/AAA text checks.
- Review the calculated sample and copy the ratio, checks and HEX, RGB and HSL values.
Formula and method
sRGB channels are linearized into relative luminance. Contrast ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05); results are not rounded before threshold tests.
Example
Black on white gives 21:1 and passes all four text checks. #008580 on #FFFFFF gives about 4.499954:1 and fails normal-text AA because it is below 4.5:1.
Useful for
- Checking website text colors
- Converting HEX into RGB and HSL
- Reviewing design tokens before release
Limits and notes
Checks two opaque solid colors only. It does not measure gradients, images, transparency, actual font rendering or focus indicators. These are text-contrast results, not an audit of non-text contrast or overall accessibility.
Frequently asked questions
Which thresholds apply?
WCAG 2.2 uses at least 4.5:1 for normal-text AA and 7:1 for AAA; large text needs 3:1 and 4.5:1 respectively. Font size is checked as delivered, before user zoom.
Does passing make the page accessible?
No. This checks only text-color contrast. Structure, keyboard operation, labels, non-text contrast and focus need separate checks.