Text contrast for highly saturated call to action buttons

Question

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...

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?

Answer 1

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.

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.

Answer 2

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.

Source