Color converter
Turn a HEX color into matching RGB and HSL values for your stylesheet.
Color & designColor & design
Color contrast checker
Check text contrast between two colors against WCAG AA and AAA thresholds.
Your result
A little input. A useful result.
Adjust the example inputs, then select Check contrast.
About this tool
Compare an opaque text color and background color using the WCAG sRGB contrast formula. The result checks normal and large text thresholds; it covers color contrast rather than every accessibility requirement.
How to use it
- 1
Choose the text foreground color.
- 2
Choose the solid background color behind the text.
- 3
Check the ratio and the AA and AAA text-size results.
Questions, answered
What counts as large text?
WCAG large text is at least 18 points in regular weight or 14 points in bold weight. AA requires 3:1 for large text and 4.5:1 for normal text.
Will a gradient or translucent color give the same result?
Not necessarily. This calculation assumes two solid, opaque sRGB colors. With images, gradients or transparency, check the actual composited colors at the least favorable point.