Mensajes de Apple y contraste de color

Nodo de origen: 1760849

¡Pues coloréame esto! Anoche me quejé de lo difícil que es leer mensajes de texto en Mensajes de Apple. Ya sabes, no las burbujas azules que obtienes cuando envías mensajes a otros usuarios de iPhone. Esos son mensajes de iMessage.

De lo que estoy hablando es de las burbujas verdes que obtienes cuando envías mensajes a usuarios que no son de iPhone. Esos son mensajes de texto estándar.

iMessage (izquierda) y mensaje de texto (derecha)

Pasemos el green por un comprobador de contraste para ver qué pasa.

Permalink

Atracción sexual. Ahora sé por qué siempre busco mis anteojos para leer cuando aparece un mensaje de texto. Esa proporción de 2.17:1 está por debajo del requisito WCAG 2.0 AA de 4.5:1 y muy por debajo del nivel AAA de 7:1.

Resulta que no soy el único que se queja. Una búsqueda rápida arrojó un pequeño tesoro de noticias y publicaciones de blog, algunas tan recientes como la semana pasada, sobre la legibilidad de esas burbujas de mensajes de texto verdes.

No soy un teórico de la conspiración y me gusta dar beneficio a la duda. Peeeero...

Apple Messages en iOS 6 (izquierda) e iOS 7 (derecha)
Crédito: Phoceis
  • iOS 6: Texto oscuro sobre un fondo verde degradado
  • iOS 7: Texto blanco en un #5AB539 fondo (o algo parecido)
  • iOS 16.1: Texto blanco en un #6ACC46 fondo

Ese segundo se basa en capturas de pantalla antiguas y podría no ser el valor de color más preciso. Pero aún así, la transición de iOS 6 con texto oscuro a lo que tenemos hoy en iOS 16.1 muestra una clara regresión. Me gustaría pensar que el equipo de diseño verificó los valores actualizados con las pautas de WCAG, claro, pero al menos con los suyos. Pautas de interfaz humana.

El fondo verde actual (#65C466) parece ser diferente de lo que aparece como el "color del sistema" verde (#30D158, convertido de un RGB de 48, 209, 88) en la paleta de iOS que se indica en las pautas. Pero no es que eso nos acerque más a una calificación WCAG AA o AAA.

Permalink

🤷♂️

Sello de tiempo:

Mas de Trucos CSS