Why color contrast is not as black and white as it seems

We are biased by our tools

Color problems

Let’s get visual

Comparison of black and white text on orange and blue backgrounds, with contrast calculations indicating black is better for both cases
A tweet from the author in 2019 questioning why twitter uses white on blue rather than black on blue, despite contrast values of 2.8 and 7.4 respectively

How can we cater for real people?

screenshot of the APCA contrast checker showing a contrast check for white text on an orange background resulting in a value of 61

How does APCA compare to WCAG 2?

  • solid circles for a contrast lower than WCAG 2 AA requirement (< 4.5)
  • thick rings for contrast above the AA requirement (≥ 4.5)
  • thin rings for contrast greater than the AAA requirement (≥ 7)
Legend for the symbols used against various backgrounds during the rest of this article. Solid blobs for a contrast lower than 4.5. Thick rings for contrast greater than 4.5. Thin rings for contrast greater than 7.
As shades of grey go from black to white, the contrast of white foreground changes from 21 to 1
white foreground on greyscale (WCAG 2)
As shades of grey go from black to white, the contrast of black foreground changes from 1 to 21
black foreground on greyscale (WCAG 2)
As shades of grey go from black to white, the best choice of foreground color changes halfway through the scale
the higher contrast (black or white) on greyscale (WCAG 2)
  • An APCA value of 60 is sort of like a WCAG 2 contrast of 4.5 (AA)
  • An APCA value of 75 is sort of like a WCAG 2 contrast of 7 (AAA).
For APCA contrasts the solid blobs indicate a contrast lower than 60. Thick rings for contrast greater than 60. Thin rings for contrast greater than 75.
As shades of grey go from black to white, the contrast of white foreground changes from 107 to 0
white foreground on greyscale (APCA)
As shades of grey go from black to white, the contrast of black foreground changes from 0 to 106
black foreground on greyscale (APCA)
the higher contrast (black or white) on greyscale (APCA)
Comparison of black and white text on orange and blue backgrounds, with APCA contrast calculations indicating white is better for both cases

The bigger picture

HSL Slice 1 — WCAG 2

A slice of HSL color space at constant lightness showing preference for black and white foreground color according to WCAG 2 contrast calculations
WCAG 2 contrast calculations — varying hue and saturation

HSL Slice 1 — APCA

A slice of HSL color space at constant lightness showing preference for black and white foreground color according to APCA contrast calculations
APCA contrast calculations — varying hue and saturation

HSL Slice 2— WCAG 2

A slice of saturated HSL color space showing preference for black and white foreground color according to APCA contrast calculations
WCAG 2 contrast calculations — varying hue and lightness

HSL Slice 2— APCA

A slice of saturated HSL color space showing preference for black and white foreground color according to APCA contrast calculations
APCA contrast calculations — varying hue and lightness

If it’s broken, can we fix it?

‘Twitter blue’

What might supporting both models look like?

HSL Slice 1 — WCAG 2 and ACPA

A slice of HSL color space at constant lightness and varying saturation showing preference for black and white foreground color meeting both WCAG 2 and APCA contrast calculations
Meeting both WCAG 2 and APCA contrast requirements — varying hue and saturation

HSL Slice 2— WCAG 2 and ACPA

A slice of saturated HSL color space at constant lightness showing preference for black and white foreground color meeting both WCAG 2 and APCA contrast calculations
Meeting both WCAG 2 and APCA contrast requirements — varying hue and lightness

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Roger Attrill

Roger Attrill

UX Specialist for Linguamatics. Passionate about users (new and used), visual design, data viz, losing silos, the little details & the big picture.