How to use
- Pick a colour or type a HEX code or RGB or HSL values.
- The other fields and the preview update automatically.
- Copy the format you need and check the contrast result.
What is the difference between the formats?
HEX is a six-character code such as 0B7A60, the most common in CSS. RGB sets the amount of red, green and blue from 0 to 255. HSL describes a colour by hue, saturation and lightness, which is easiest when you want a lighter or darker shade of the same colour.
Why does contrast matter?
Text that does not contrast enough with its background is hard to read, especially on small screens and for people with low vision. Accessibility guidelines recommend at least 4.5 to 1 for normal text and 3 to 1 for large text. The tool shows the ratio with white and with black so you can choose the better one.
Frequently asked questions
Can I type a 3-digit HEX?
Yes. A short code such as F80 is expanded automatically to FF8800.
Does the tool support transparency?
No. It works with solid colours only.
What does AA mean?
It is the acceptance level in the WCAG accessibility standard for normal text, meaning a contrast of at least 4.5 to 1.