The following interactive SVG diagrams show foreground colours for varying backgrounds in the HSL colour space.
Foreground colours are either off-white (#F0F0F0) or off-black (#101010) depending on which gives the highest contrast ratio against each background.
Note: Absolute black/white is generally avoided as they can appear rather harsh on the eye
Each colour cell has a circle:
- Solid circles: contrast ratio <= 4.5
- Thick circles: contrast ratio > 4.5 (WCAG 2.0 AA compliant for 14 pt text)
- Thin circles: contrast ratio > 7 (WCAG 2.0 AAA compliant for 14pt text)
Tooltips show H,S,L and the contrast ratio, over every colour.
In the first chart, lightness is a constant 128 and hue and saturation vary
In the second chart, saturation is a constant 255 and hue and lightness vary