Mensajes de Apple y contraste de color | trucos CSS

Bueno, ¡colorea esto para mí! Anoche estaba enojado conmigo mismo por lo difícil que es leer mensajes de texto en Apple Messages. Ya sabes, no las burbujas azules que obtienes cuando envías mensajes a otros usuarios de iPhone. Estos 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. Estos son mensajes de texto estándar.

Pasemos el verde por un comprobador de contraste para ver qué sucede.

Atracción sexual. Ahora sé por qué siempre busco mis anteojos para leer cuando aparece un mensaje de texto. Esta proporción de 2,17:1 está por debajo del requisito de 4,5:1 de WCAG 2.0 AA y muuuucho por debajo del nivel de AAA de 7:1.

Resulta que no soy el único atrapado. Una búsqueda rápida arrojó una pequeña colección 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 el beneficio de la duda. Pero…

• ios 6: Texto oscuro sobre fondo verde iridiscente
• ios 7: Texto blanco en un #5AB539 fondo (o algo parecido)
• iOS 16.1: Texto blanco en un #6ACC46 antecedentes

Este segundo se basa en capturas de pantalla antiguas y puede que no sea 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 según las pautas de WCAG, por supuesto, pero al menos según los suyos. Pautas de interfaz humana.

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

🤷‍♂️