Convert a color between HEX, RGB and HSL live — edit any format and the others update. Then check the WCAG contrast between the text color and the background color.
The same pixel can be described in several ways. HEX
(#4f46e5) is the hexadecimal notation used in CSS and HTML. RGB
describes the color through three channels (red, green and blue), each from 0 to
255. HSL uses hue (0–360°), saturation and lightness — more
intuitive for lightening/darkening or rotating the hue. This tool converts between all three at the
same time: edit any field and the others adjust.
The WCAG (Web Content Accessibility Guidelines) define a minimum
contrast ratio between text and background to ensure readability,
including for people with low vision. The ratio ranges from 1:1 (identical colors) to
21:1 (black on white). The calculation follows WCAG 2.x: each sRGB channel is
linearized, the relative luminance of each color is combined
(0.2126·R + 0.7152·G + 0.0722·B) and
(Llight + 0.05) / (Ldark + 0.05) is applied.
| Criterion | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
"Large text" is defined as at least 18pt (24px) regular, or 14pt (18.66px) bold.
HSL uses integer values for hue/saturation/lightness, so the round trip can round 1 unit in some RGB channel. This is expected and visually imperceptible.
No. The calculation assumes opaque colors, as WCAG recommends for the base test. For translucent elements, evaluate the effective color already composited over the background.