Le CSS contrast-color() permet de générer automatiquement des couleurs de texte lisibles (noir ou blanc) en fonction de la couleur de fond, résolvant ainsi les problèmes de contraste insuffisant sur les sites web. Cette fonction native du navigateur, introduite dans les spécifications CSS de niveau 5, élimine le besoin de bibliothèques JavaScript ou de calculs dynamiques, car elle effectue les calculs de contraste lors du rendu initial de la page. Elle s’intègre directement dans les feuilles de style, comme color: contrast-color(var(--brand-color)), et s’adapte instantanément aux changements de thème sans manipulation supplémentaire.
Malgré son utilité, la fonction actuelle reste limitée : elle ne retourne que du noir ou du blanc, et son nom a été modifié (anciennement color-contrast()), ce qui peut causer des incompatibilités avec des tutoriels obsolètes. Les futures versions pourraient étendre ses fonctionnalités, comme l’ajout de listes de couleurs candidates ou de ratios cibles, mais pour l’instant, elle se concentre sur une solution simple et efficace pour un problème persistant, où 70 % des sites échouent encore aux tests de contraste WCAG en 2025.
L'article de Kevin Hamer sur CSS-Tricks explore des méthodes pour approximer la fonction contrast-color() en CSS, qui n'est pas encore largement supportée par les navigateurs. Il explique comment utiliser les espaces de couleur et d'autres fonctionnalités CSS pour déterminer si un texte doit être en blanc ou en noir pour un contraste optimal, en se basant sur les directives WCAG 2.2. L'auteur propose une solution utilisant la lumière perceptuelle (L*) de l'espace de couleur CIELAB, offrant une alternative plus lisible et maintenable aux formules complexes basées sur la luminance.
Le design system de la Fabrique de Noël est un article narratif qui illustre, à travers une métaphore festive, les enjeux de l’accessibilité numérique et la mise en place d’un design system. Oli Daynight (designer) et Any Goodcookie (experte accessibilité) sont chargés par le Père Noël de rendre la plateforme de la Fabrique de Noël plus inclusive. Ils optent pour une refonte directe des composants du design system, plutôt qu’un audit préalable, afin de gagner du temps avant Noël. Any insiste sur l’importance de former les équipes, d’intégrer l’accessibilité dès la conception (en s’appuyant sur les WCAG) et de mettre en place des processus collaboratifs, comme des sessions de tests entre pairs (« Dans leurs chaussons »). Malgré des contraintes de temps, les résultats sont encourageants : les composants deviennent plus accessibles, et les équipes s’approprient progressivement ces bonnes pratiques. L’article souligne que l’accessibilité est un travail continu, nécessitant engagement et améliorations itératives. Une lecture ludique et inspirante pour aborder les défis concrets de l’accessibilité web ! 🎄✨
Tout est dans le titre
Tout est dans le titre
Il s'agit d'une nouveauté du référentiel d'accessibilité (WCAG) qui concerne la cohérence et l'expressivité des libellés liés à un composant. L'auteur donne quelques exemples de bonnes et mauvaises pratiques
L'auteur montre la mise en place minimale d'un tableau HTML adaptatif et conforme au standard d'accessibilité WCAG
L'article est une réponse à un autre article à propos certains "mythes" sur l'accessibilité des couleurs. L'auteur présente plusieurs contre arguments étayés et finit par quelques astuces.
Tout est dans le titre
Tout est dans le titre