Thursday, September 28, 2023
HomeCSSApple Messages & Colour Distinction | CSS-Methods

Apple Messages & Colour Distinction | CSS-Methods

Nicely, shade me this! I used to be griping to myself final evening about simply how gosh dang laborious it’s to learn textual content messages in Apple Messages. You recognize, not the blue bubbles that you just get when messaging different iPhone customers. These are iMessages.

What I’m speaking about are the inexperienced bubbles you get when messaging non-iPhone customers. These are customary textual content messages.

iMessage (left) and textual content message (proper)

Let’s run the inexperienced via a distinction checker to see what’s up.


Oomph. Now I do know why I all the time attain for my studying glasses when a textual content message pops up. That 2.17:1 ratio is under the WCAG 2.0 AA requirement of 4.5:1 and wayyyyy under the AAA degree of seven:1.

Seems I’m not the one one griping. A fast search turned up a little bit trove of stories and weblog posts — some as latest as final week — concerning the readability of these inexperienced textual content message bubbles.

I’m no conspiracy theorist and like to provide profit to doubt. Buuuuut…

Apple Messages in iOS 6 (left) and iOS 7 (proper)
Credit score: Phoceis
  • iOS 6: Darkish textual content on a inexperienced gradient background
  • iOS 7: White textual content on a #5AB539 background (or one thing near it)
  • iOS 16.1: White textual content on a #6ACC46 background

That second one is predicated on previous screenshots and won’t be essentially the most correct shade worth. However nonetheless, the transition from iOS 6 with darkish textual content to what we have now at present in iOS 16.1 exhibits a transparent regression. I’d like suppose the design group checked the up to date values towards WCAG tips, positive, however not less than towards their very own Human Interface Tips.

The present inexperienced background (#65C466) seems to be completely different than what’s listed because the inexperienced “system shade” (#30D158, transformed from a RGB of 48, 209, 88) within the iOS palette listed within the tips. However it’s not like that will get us any nearer to a passing WCAG AA or AAA ranking.





Please enter your comment!
Please enter your name here

Most Popular

Recent Comments