Wednesday, November 23, 2022
HomeProgrammingApple Messages & Colour Distinction | CSS-Tips

Apple Messages & Colour Distinction | CSS-Tips


Effectively, shade me this! I used to be griping to myself final evening about simply how gosh dang onerous it’s to learn textual content messages in Apple Messages. , 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 normal textual content messages.

iMessage (left) and textual content message (proper)

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

Permalink

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 beneath the WCAG 2.0 AA requirement of 4.5:1 and wayyyyy beneath the AAA degree of seven:1.

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

I’m no conspiracy theorist and like to offer 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 relies on previous screenshots and won’t be probably 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 reveals a transparent regression. I’d like suppose the design workforce checked the up to date values towards WCAG pointers, certain, however a minimum of towards their very own Human Interface Tips.

The present inexperienced background (#65C466) seems to be totally 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 pointers. But it surely’s not like that will get us any nearer to a passing WCAG AA or AAA ranking.

Permalink

🤷‍♂️

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments