Paleta accesible: deja de usar HSL en los sistemas de color

• El autor comparte la experiencia de Postmark al reconstruir su sistema de color y los problemas que enfrentaron con la paleta anterior.
• Los principales problemas de la paleta anterior eran la falta de consistencia en el brillo percibido de los colores y las proporciones de contraste impredecibles entre variaciones de color.
• El autor explica que estos problemas se debían a defectos inherentes del modelo de color HSL y a la falta de soporte en las herramientas de diseño para alternativas mejores.
• El autor presenta los espacios de color CIELAB y LCh como mejores alternativas a HSL, ya que están diseñados para reflejar la percepción humana del brillo y la saturación.
• El autor presenta la app Accessible Palette, una herramienta para construir sistemas de color con brillo consistente y proporciones de contraste predecibles.
• La app permite a los usuarios personalizar niveles de brillo, controlar las proporciones de contraste y generar paletas de color basadas en los espacios de color RGB o CIELAB.
• El autor analiza las deficiencias del cálculo de proporciones de contraste de WCAG 2.1 y presenta el Advanced Perceptual Contrast Algorithm (APCA), usado en la app.
• El autor recomienda a los lectores construir sistemas de color teniendo en cuenta tanto las pautas de WCAG 2.1 como APCA para lograr el mayor nivel posible de preparación futura y cumplimiento normativo.
• El autor destaca las ventajas de usar la app Accessible Palette e invita a los lectores a ponerse en contacto en cualquier momento si tienen preguntas o comentarios.

[GN⁺]

Comentarios de Hacker News

• En las pantallas comunes y en los sistemas de impresión, el rojo y el azul saturados son más oscuros que el verde.
• Aplicar reglas de contraste hace que la elección de colores sea accesible, pero la técnica de este artículo permite opciones que además de accesibles son visualmente atractivas.
• El verde saturado en pantalla no es el más saturado posible, pero sí está más saturado que la mayoría de los verdes de la vida real.
• En árboles y césped, el equilibrio entre los canales rojo y verde hace que se vean bien en estereogramas.
• Las recomendaciones de contraste de color de WCAG 2.1 a veces pueden producir resultados más difíciles de leer que ejemplos con contraste insuficiente.
• Este artículo ofrece enlaces a material exhaustivo sobre color.
• El autor del comentario usa las ideas de este artículo para colorear logs en ClickHouse.
• Se menciona APCA como un posible sucesor del algoritmo de contraste de color de WCAG 2.
• Al trabajar con color, es importante confiar en la vista, ya que las herramientas y los algoritmos son solo aproximaciones matemáticas.
• La función color() de CSS admite varios espacios de color, no solo sRGB.
• Se cuestionan las fórmulas perceptuales sobre accesibilidad y su interacción con el daltonismo.
• Se propone oklab como alternativa a LCh.
• El APCA Contrast mencionado en el artículo se considera más justo que el Contrast Ratio de WCAG 2.1 para algunos colores.
• Se ofrece material adicional sobre teoría del color y APCA.
• El autor quiere un algoritmo que pueda usarse en todo el software, no solo en formularios web.
• En otro artículo se menciona HSY, el modelo de color usado en el selector avanzado de color de Krita.