L\u2019accessibilit\u00e9 web c\u2019est comme le tri s\u00e9lectif\u2026 tout le monde dit que c\u2019est g\u00e9nial mais azy, j\u2019ai pas le temps. Et pourtant, c\u2019est super important car pr\u00e8s de 80% des pages web ont des probl\u00e8mes de contraste de texte.<\/p>\n

\n
from cm_colors import ColorPair\n<\/span><\/span>\n<\/span><\/span># Your colors\n<\/span><\/span>pair = ColorPair(\"#999999\", \"#ffffff\")\n<\/span><\/span>\n<\/span><\/span># Fix them and preview in the terminal\n<\/span><\/span>fixed_color, success = pair.make_readable(show=True)\n<\/span><\/span>\n<\/span><\/span>print(f\"Use {fixed_color} instead of #999999\")\n<\/span><\/span># Output: Use #8e8e8e instead of #999999\n<\/span><\/span><\/code><\/pre>\n<\/p>\n Le truc vraiment cool, c\u2019est que l\u2019outil g\u00e8re plusieurs niveaux de lisibilit\u00e9. Y\u2019a \u201cReadable\u201d qui correspond au AA, \u201cVery Readable\u201d pour le AAA, et m\u00eame une option large_text=True<\/code> pour les gros titres qui ont des exigences moins strictes. Vous pouvez donc adapter selon vos besoins et pour les devs qui bossent sur de gros projets, y\u2019a aussi une fonction make_readable_bulk<\/code> qui permet de corriger plusieurs paires de couleurs d\u2019un coup.<\/p>\n
\nfrom cm_colors import make_readable_bulk\n<\/span><\/span>\n<\/span><\/span>my_colors = [\n<\/span><\/span> (\"#777\", \"#fff\"),\n<\/span><\/span> (\"#888\", \"#000\"),\n<\/span><\/span>]\n<\/span><\/span>\n<\/span><\/span>results = make_readable_bulk(my_colors)\n<\/span><\/span>\n<\/span><\/span>for color, status in results:\n<\/span><\/span> print(f\"{color} is {status}\")\n<\/span><\/span><\/code><\/pre>\nVous lui balancez une liste de tuples (texte, fond) et il vous retourne tout \u00e7a au propre. Et si vous voulez traiter directement vos fichiers CSS, la commande cm-colors styles.css<\/code> g\u00e9n\u00e8re un nouveau fichier styles_cm.css<\/code> avec toutes les couleurs corrig\u00e9es. L\u2019outil peut m\u00eame g\u00e9n\u00e9rer des rapports HTML pour visualiser les changements avant\/apr\u00e8s.<\/p>\n Alors oui, je sais, se taper de l\u2019accessibilit\u00e9 c\u2019est un peu relou car on a toujours l\u2019impression que c\u2019est du temps perdu sur des d\u00e9tails. Mais dites vous que \u00e7a impacte vraiment l\u2019exp\u00e9rience de millions d\u2019utilisateurs, donc \u00e7a vaut le coup d\u2019y passer 5 minutes, surtout avec un outil automatis\u00e9 !<\/p>\nBref, \nCM-Colors<\/a> \nc\u2019est gratuit, c\u2019est open source sous licence GPL-3, et \u00e7a peut vous \u00e9viter pas mal de gal\u00e8res. Toute \nla documentation est ici<\/a> \net y\u2019a m\u00eame \nune d\u00e9mo interactive<\/a> \nsur leur site si vous voulez tester avant d\u2019installer.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":" L\u2019accessibilit\u00e9 web c\u2019est comme le tri s\u00e9lectif\u2026 tout le monde dit que c\u2019est g\u00e9nial mais azy, j\u2019ai pas le temps. Et pourtant, c\u2019est super important car pr\u00e8s de 80% des pages web ont des probl\u00e8mes de contraste de texte. C\u2019est le souci noumber ouane d\u00e9tect\u00e9 sur le million de sites analys\u00e9s chaque ann\u00e9e par WebAIM . En gros, si vous avez un site, y\u2019a de fortes chances que certains visiteurs gal\u00e8rent \u00e0 lire votre contenu, et je ne vous parle pas uniquement des personnes malvoyantes, hein\u2026 y\u2019a aussi le daltonisme qui touche environ 8% des hommes et 0,5% des femmes. Rajoutez \u00e0 \u00e7a les gens qui lisent leur t\u00e9l\u00e9phone en plein soleil, ceux qui ont une dalle de laptop toute pourrie, et vous comprendrez vite que le probl\u00e8me concerne pas mal de monde. Alors est ce que vous connaissez les normes WCAG ? H\u00e9 bien c\u2019est le standard international pour l\u2019accessibilit\u00e9 web. Ainsi pour \u00eatre conforme au niveau AA (le minimum recommand\u00e9), votre texte doit avoir un ratio de contraste d\u2019au moins 4,5:1 avec son arri\u00e8re-plan. Pour le niveau AAA (l\u2019id\u00e9al), c\u2019est 7:1. Et l\u00e0 vous vous dites \u201csuper, je vais calculer \u00e7a \u00e0 la main pour mes 47 couleurs de palette, mais va bien te faire cuire le cul, Korben\u201d. (Oui, c\u2019est comme \u00e7a que je vous imagine quand vous lisez mes articles). Heureusement, y\u2019a un outil qui vient de sortir et qui va vous changer la vie : CM-Colors . Vous lui donnez vos couleurs, et il les ajuste automatiquement pour qu\u2019elles soient accessibles, le tout en modifiant les teintes le moins possible pour garder votre design intact. L\u2019installation est super fastoche\u2026. C\u2019est du Python donc un petit pip install cm-colors et hop c\u2019est r\u00e9gl\u00e9. Ensuite, vous pouvez l\u2019utiliser soit en ligne de commande directement sur vos fichiers CSS, soit via l\u2019API dans votre code. Par exemple, vous avez un gris #5f7887 sur un fond #e6f0f5 qui passe pas les tests, hop, CM-Colors le transforme automatiquement en #5c6f7b et maintenant c\u2019est conforme AA. Et la diff\u00e9rence \u00e0 l\u2019\u0153il nu est quasi invisible. Bref, c\u2019est nickel pour l\u2019accessibilit\u00e9 ! from cm_colors import ColorPair # Your colors pair = ColorPair(“#999999”, “#ffffff”) # Fix them and preview in the terminal fixed_color, success = pair.make_readable(show=True) print(f”Use {fixed_color} instead of #999999″) # Output: Use #8e8e8e instead of #999999 Le truc vraiment cool, c\u2019est que l\u2019outil g\u00e8re plusieurs niveaux de lisibilit\u00e9. Y\u2019a \u201cReadable\u201d qui correspond au AA, \u201cVery Readable\u201d pour le AAA, et m\u00eame une option large_text=True pour les gros titres qui ont des exigences moins strictes. Vous pouvez donc adapter selon vos besoins et pour les devs qui bossent sur de gros projets, y\u2019a aussi une fonction make_readable_bulk qui permet de corriger plusieurs paires de couleurs d\u2019un coup. from cm_colors import make_readable_bulk my_colors = [ (“#777”, “#fff”), (“#888”, “#000″), ] results = make_readable_bulk(my_colors) for color, status in results: print(f”{color} is {status}”) Vous lui balancez une liste de tuples (texte, fond) et il vous retourne tout \u00e7a au propre. Et si vous voulez traiter directement vos fichiers CSS, la commande cm-colors styles.css g\u00e9n\u00e8re un nouveau fichier styles_cm.css avec toutes les couleurs corrig\u00e9es. L\u2019outil peut m\u00eame g\u00e9n\u00e9rer des rapports HTML pour visualiser les changements avant\/apr\u00e8s. Alors oui, je sais, se taper de l\u2019accessibilit\u00e9 c\u2019est un peu relou car on a toujours l\u2019impression que c\u2019est du temps perdu sur des d\u00e9tails. Mais dites vous que \u00e7a impacte vraiment l\u2019exp\u00e9rience de millions d\u2019utilisateurs, donc \u00e7a vaut le coup d\u2019y passer 5 minutes, surtout avec un outil automatis\u00e9 ! Bref, CM-Colors c\u2019est gratuit, c\u2019est open source sous licence GPL-3, et \u00e7a peut vous \u00e9viter pas mal de gal\u00e8res. Toute la documentation est ici et y\u2019a m\u00eame une d\u00e9mo interactive sur leur site si vous voulez tester avant d\u2019installer.<\/p>\n","protected":false},"author":1,"featured_media":1734,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-1733","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=1733"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1733\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/1734"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=1733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}