Palette accessible : arrêter d’utiliser HSL dans les systèmes de couleurs

• L’auteur partage son expérience de refonte du système de couleurs chez Postmark ainsi que les problèmes rencontrés avec l’ancienne palette.
• Les principaux problèmes de la palette précédente étaient un manque de cohérence dans la luminosité perçue des couleurs et des ratios de contraste imprévisibles entre les variations de couleur.
• L’auteur explique que ces problèmes proviennent de défauts inhérents au modèle de couleurs HSL et du manque de prise en charge de meilleures alternatives dans les outils de design.
• L’auteur présente les espaces colorimétriques CIELAB et LCh comme de meilleures alternatives à HSL, conçues pour refléter la perception humaine de la luminosité et de la saturation.
• L’auteur présente l’application Accessible Palette, un outil permettant de construire un système de couleurs avec une luminosité cohérente et des ratios de contraste prévisibles.
• Cette application permet aux utilisateurs de personnaliser les niveaux de luminosité, de contrôler les ratios de contraste et de générer des palettes de couleurs basées sur les espaces colorimétriques RGB ou CIELAB.
• L’auteur discute des limites actuelles du calcul des ratios de contraste dans WCAG 2.1 et présente l’Advanced Perceptual Contrast Algorithm (APCA) utilisé dans l’application.
• L’auteur encourage les lecteurs à construire leur système de couleurs en tenant compte à la fois des recommandations WCAG 2.1 et APCA pour être aussi pérennes que possible et conformes aux exigences.
• L’auteur souligne les avantages de l’utilisation de l’application Accessible Palette et invite les lecteurs à le contacter à tout moment pour toute question ou retour.

[GN⁺]

Commentaire Hacker News

• Sur les écrans classiques et dans les systèmes d’impression, les rouges et les bleus saturés sont plus sombres que le vert.
• Appliquer des règles de contraste rend le choix des couleurs accessible, mais la technique de cet article permet aussi des choix à la fois accessibles et visuellement attrayants.
• Le vert saturé à l’écran n’est pas aussi saturé que possible, mais il l’est davantage que la plupart des verts de la vie réelle.
• L’équilibre entre les canaux rouge et vert dans les arbres et l’herbe donne un bel effet dans les stéréogrammes.
• Les recommandations de contraste des couleurs de la WCAG 2.1 peuvent parfois produire des résultats plus difficiles à lire que des exemples avec un contraste insuffisant.
• Cet article fournit des liens vers des ressources complètes sur la couleur.
• L’auteur du commentaire s’inspire des idées de cet article pour colorer les logs dans ClickHouse.
• APCA est mentionné comme un successeur potentiel de l’algorithme de contraste des couleurs de WCAG 2.
• Lorsqu’on travaille avec les couleurs, les outils et les algorithmes ne sont que des approximations mathématiques, il est donc important de faire confiance à son œil.
• La fonction CSS color() prend en charge divers espaces colorimétriques, pas seulement sRGB.
• Cela soulève des questions sur les formules perceptuelles liées à l’accessibilité et à l’interaction avec le daltonisme.
• oklab est proposé comme alternative à LCh.
• L’APCA Contrast mentionné dans l’article est considéré comme plus juste que le Contrast Ratio de WCAG 2.1 pour certaines couleurs.
• Des ressources supplémentaires sur la théorie des couleurs et l’APCA sont fournies.
• L’auteur veut un algorithme utilisable dans tous les logiciels, pas seulement dans les formulaires web.
• HSY, le modèle colorimétrique utilisé dans le sélecteur de couleurs avancé de Krita, est mentionné dans un autre article.