Three notations, one colour
HEX is compact and the format design tools hand you. RGB is the same three channels in decimal, and its alpha variant is how you express transparency in CSS. HSL describes a colour the way people think about it - hue, saturation, lightness - which is why it is the format to reach for when you need a variation.
That last point is the practical one. Producing a hover state from a HEX value means editing six characters and hoping. In HSL you reduce the lightness by ten percent and get a predictable result, which is how consistent colour scales get built.
Contrast is not a matter of taste
WCAG sets measurable thresholds. Normal body text needs a contrast ratio of at least 4.5 to 1 against its background to reach AA, and 7 to 1 for AAA. Large text - roughly 24px, or 19px bold - is allowed 3 to 1 for AA. Interface components and meaningful graphics need at least 3 to 1.
The pairs that fail are predictable: light grey placeholder text, white text on a mid-tone brand colour, and pale grey secondary text that looked refined on a designer calibrated display and disappears on a phone in daylight. Checking takes a second and removes the argument.
Accessibility is the reason, but it is not the only one. Text that fails contrast is harder for everyone to read on a bad screen or in bright sun, and low-contrast interfaces measurably slow people down.
Why contrast is not just lightness difference
The ratio is computed from relative luminance, which weights the three channels differently because human vision is far more sensitive to green than to blue. This is why two colours with the same apparent lightness can have very different luminance, and why pure blue on black fails badly while pure yellow on black passes easily.
It is also why you cannot judge contrast by eye reliably. The number is the answer.
Frequently asked questions
- What contrast ratio do I need?
- WCAG AA requires 4.5 to 1 for normal text and 3 to 1 for large text or interface components. AAA requires 7 to 1 for normal text.
- When should I use HSL instead of HEX?
- When you need related colours. Adjusting lightness or saturation in HSL produces predictable variations, which is how you build a consistent palette of hover and disabled states.
- Does HEX support transparency?
- Yes, through eight-digit HEX where the final two characters are the alpha channel, though RGB with an alpha value is more readable in CSS.
- Why do two colours that look equally bright have different contrast?
- Contrast uses relative luminance, which weights green far more heavily than blue because human vision does. Blue on black fails where yellow on black passes comfortably.