Which text colour is readable on this?
WCAG contrast against white and black, with the AA and AAA thresholds.
#777777
A neutral dark grey.
- Hex
- #777777
- RGB
- rgb(119 119 119)
- HSL
- hsl(0 0% 46.7%)
- OKLCH
- oklch(0.569 0 0)
- CMYK
- cmyk(0% 0% 0% 53.33%)
- Nearest name
- gray
Readable text
White text
4.48:1
Black text
4.69:1
Use black text. Passes AA for normal text: yes · AAA: no · AA for large text: yes
Worth knowing
Note
Neutral colours have no meaningful hue
Greys, white, and black have effectively zero chroma, so hue is undefined and every hue rotation returns the same colour. The harmonies below are all the input.
Fix: Pick a colour with some saturation to get useful harmonies.
Worth knowing
A mid-tone: neither white nor black text reaches AAA
The best this colour manages is 4.69:1 — against black text. That clears WCAG AA for normal text (4.5:1) but not AAA (7:1). Mid-tones look fine in a mockup and then fail review, because both text colours are only just adequate.
Fix: Use black text on it, and move the lightness further from the middle if the text has to meet AAA.
Note
CMYK here is a naive conversion
CMYK has no fixed meaning without an output profile — the same numbers print differently on different presses and papers. The value shown is the standard arithmetic conversion, not a colour-managed one.
Fix: For print work, convert in software with the press profile applied.
Complementary — the opposite hue
complementary
#777777
Analogous — neighbouring hues
analogous −30°
#777777
analogous +30°
#777777
Triadic — evenly spaced
triadic +120°
#777777
triadic +240°
#777777
Split-complementary — softer opposites
split-complementary +150°
#777777
split-complementary +210°
#777777
Monochromatic — one hue, five lightnesses
lightness 0.25
#222222
lightness 0.4
#484848
lightness 0.55
#717171
lightness 0.7
#9e9e9e
lightness 0.85
#cecece
Try your own colour
Paste one on the home page — you can also pick a colour straight out of a photo there. This page is available as markdown.