It's become a part of my way of working that I check areas of my design are adhering to accessibility guidelines, WCAG2.0 colour contrast in particular.

At the moment I'm working on creating a new colour palette. The primary colours i'm experimenting with are relatively saturated (#25AB2B as an example).

I'm noticing that these saturated colours for 'calls to action' (buttons) typically have to be paired with a dark text colour (black for instance) to meet/exceed the contrast ratio guideline of 4.5:1...

Comparison of white and black text on #25AB2B

Text size for these buttons wouldn't exceed 16px.

I'm finding examples where these sorts of colours are constantly being paired with light foreground/text colours for buttons, Spotify for example (who make mention of their green 'optimised for accessibility' but still fall even shorter of the guidelines than my example above) .

My question is...

I'm trying to understand if there are any design / human vision / phycological considerations that are contributing to my very subjective opinion that the black text on bright / saturated background is actually less readable (for me), despite having a much higher contrast ratio. Is there anything I'm not taking into account, or should I just trust the numbers?


Yes, color contrast can feel very subjective. The white text is easier for me to read too, at least at this stage of my eyesight, but the contrast ratio formula is pretty precise. You should trust it.

Since your text won't be bigger than 16px/12pt, you'll need a 4.5:1 ratio.

Imagine your vision is getting blurry, the following screenshot simulation shows a moderate level of blurriness. The text can't be read on the button, however, the black "smudge" feels more noticeable than the white "smudge", so you can tell there's some text there. That's where the contrast ratio helps.

enter image description here

Fun fact, the ISO has set standards for minimum color ratio for the world in general (traffic signs, etc) to be 3:1, but that's for 20/20 vision. To account for some loss of vision to 20/40, that results in a contrast sensitivity loss of 1.5. To make up for this, the 3:1 ratio is multiplied by 1.5 to get a ratio of 4.5:1, the WCAG 1.4.3 standard.

If you had 20/80 vision, your contrast sensitivity loss would be about 2.3, so if you multiply the 3:1 ISO recommendation by 2.3 you get a 7:1 ratio, which is the WCAG AAA requirement for 1.4.6.

  • Great answer, I'm still however after a bit more info in respect to your first sentence "Yes, color contrast can feel very subjective. The white text is easier for me to read too, at least at this stage of my eyesight". Why would white be easier for you? What mechanism is at play?
    – Zenon
    Jul 3 '18 at 4:09
  • That goes beyond the ophthalmology and psychology I know about. Jul 3 '18 at 13:12
  • 1
    Found something that might be helpful. Jared Smith of WebAIM talks about color contrast in this youtube video - youtube.com/watch?v=HtUlonNewGk. It's from the "Inclusive Design 24" conference on June 9, 2017 (inclusivedesign24.org/2017/#talk17). If you go to the 25 min mark, he talks about Johannes Itten's categories of contrast, and then explains various types. The WCAG formula measures a luminance ratio but hue ratio can also play a factor in perception. He has several examples of items that appear to have high contrast but don't. Jul 3 '18 at 22:51

I came across some human perception research from MIT years ago (think it may even have come from the MIT perception lab!!) and it talked about how our brain actually interprets what we see into what we experience as normative patterns.

For example, the white versus black text is a great example of how we perceive these same font weights as ‘chokes’ or ‘spreads’.

That is, with the white on darker backgrounds, we perceive the font weight as narrower than its darker counterpart; or choked. Where the black font seems to be bolder, with softer edges; or spread. This in short is a simple optical illusion.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.