Colour formats
- HEX -
#1e90ff: red, green and blue as two hex digits each. Short form#09frepeats each digit. - RGB -
rgb(30, 144, 255): red, green, blue from 0 to 255. - HSL -
hsl(210, 100%, 56%): hue (0-360 degrees), saturation and lightness; easier to adjust by hand.
Why contrast matters
About one in twelve men and one in two hundred women have some form of colour-vision deficiency, and many more of us read on a phone in bright sunlight. The WCAG guidelines set minimum contrast ratios between text and its background:
- 4.5:1 for normal text (level AA)
- 3:1 for large text (about 24px, or 19px bold) and UI components
- 7:1 for the stricter AAA level
Tips
Do not use colour alone to carry meaning (add an icon or text). For a brand colour that fails on white, darken it a few lightness points in HSL until the ratio passes.
Frequently asked questions
What contrast ratio do I need?
At least 4.5:1 for normal-size text to meet WCAG AA.
Can I type colour names?
Not here - use HEX, RGB or HSL.
Why do HSL values round?
HSL is shown in whole numbers; converting back may differ by 1 in RGB.