Apple-berichten en kleurcontrast

Bronknooppunt: 1760849

Nou, kleur me dit! Ik was gisteravond bij mezelf aan het klagen over hoe verdomd moeilijk het is om sms-berichten in Apple Messages te lezen. Weet je, niet de blauwe bubbels die je krijgt als je andere iPhone-gebruikers berichten stuurt. Dat zijn iMessages.

Waar ik het over heb, zijn de groene bubbels die je krijgt als je berichten stuurt aan niet-iPhone-gebruikers. Dat zijn standaard sms-berichten.

iMessage (links) en sms (rechts)

Laten we de green door een contrastchecker halen om te zien wat er aan de hand is.

permalink

Oef. Nu weet ik waarom ik altijd naar mijn leesbril grijp als er een sms opduikt. Die verhouding van 2.17:1 ligt onder de WCAG 2.0 AA-vereiste van 4.5:1 en ver onder het AAA-niveau van 7:1.

Blijkt dat ik niet de enige ben die zeurt. Een snelle zoekopdracht leverde een kleine hoeveelheid nieuws en blogposts op - sommige zo recent als vorige week - over de leesbaarheid van die groene sms-ballonnen.

Ik ben geen complottheoreticus en geef graag voordeel aan twijfel. Buuuuut…

Apple Berichten in iOS 6 (links) en iOS 7 (rechts)
Krediet: Phoceis
  • iOS 6: Donkere tekst op een groene achtergrond met kleurovergang
  • iOS 7: Witte tekst op een #5AB539 achtergrond (of iets dat er dichtbij staat)
  • iOS 16.1: Witte tekst op een #6ACC46 achtergrond

Die tweede is gebaseerd op oude schermafbeeldingen en is misschien niet de meest nauwkeurige kleurwaarde. Maar toch, de overgang van iOS 6 met donkere tekst naar wat we vandaag hebben in iOS 16.1 laat een duidelijke achteruitgang zien. Ik zou graag denken dat het ontwerpteam de bijgewerkte waarden heeft gecontroleerd aan de hand van de WCAG-richtlijnen, zeker, maar in ieder geval aan de hand van hun eigen richtlijnen Human Interface Guidelines.

De huidige groene achtergrond (#65C466) lijkt anders te zijn dan wat wordt vermeld als de groene "systeemkleur" (#30D158, geconverteerd van een RGB van 48, 209, 88) in het iOS-palet vermeld in de richtlijnen. Maar het is niet zo dat we daarmee dichter bij een passerende WCAG AA- of AAA-rating komen.

permalink

🤷♂️

Tijdstempel:

Meer van CSS-trucs