Contrast ratios follow WCAG 2.1. AA needs 4.5:1 for normal text and AAA needs 7:1. Large text (18.66px bold or 24px and above) only needs 3:1 for AA. Alpha is ignored when measuring contrast, since the result would depend on whatever sits behind the colour.
Paste a color in any common CSS notation and this converter shows it in all five: HEX, RGB, RGBA, HSL and HSLA. It accepts three, four, six and eight digit hex, the comma and the modern space separated function syntax, percentages, and plain CSS color names such as tomato or rebeccapurple. There is also a native color picker if you would rather choose visually, and the two stay in sync as you work.
Below the conversions you get a strip of ten tints and shades, five mixed toward white and five toward black, which is a quick way to build a usable scale from a single brand color. Click any swatch to load it and convert it in turn. The contrast panel shows the WCAG ratio against white and black text with pass or fail marks at the AA threshold of 4.5:1 and the AAA threshold of 7:1.
How to use the Color Converter
- Type or paste a color into the text field, or open the picker and choose one.
- Read the HEX, RGB, RGBA, HSL and HSLA values and press Copy on the row you need.
- Click any tint or shade in the strip to load that variation and convert it.
- Check the contrast ratios to decide whether white or black text is readable on the color.
Frequently asked questions
Which color formats can I paste in?
Hex with or without the hash in 3, 4, 6 or 8 digits, rgb() and rgba() with commas or spaces, hsl() and hsla() with degrees, radians or turns, percentage channels, and any CSS keyword colour name your browser recognises, including transparent.
How is the contrast ratio calculated?
Each channel is converted from sRGB to linear light, weighted 0.2126 red, 0.7152 green and 0.0722 blue to give relative luminance, then the lighter value plus 0.05 is divided by the darker plus 0.05. That is the formula defined in WCAG 2.1.
What is the difference between a tint and a shade?
A tint is the color mixed with white, so it gets lighter and less saturated. A shade is the color mixed with black, so it gets darker. Mixing in straight RGB, as this tool does, matches how CSS color-mix behaves in the sRGB space.
Does alpha affect the contrast result?
No, and it cannot. A semi transparent color has no fixed appearance until you know what sits behind it, so the contrast figures here use the opaque RGB values. If you need the real ratio, composite the color over its actual background first, then test that result.