{"id":335,"date":"2026-10-16T10:21:46","date_gmt":"2026-10-16T09:21:46","guid":{"rendered":"https:\/\/foldline.studio\/blog\/?p=335"},"modified":"2026-10-19T12:10:27","modified_gmt":"2026-10-19T11:10:27","slug":"contraste-couleurs-identite-web","status":"publish","type":"post","link":"https:\/\/foldline.studio\/blog\/contraste-couleurs-identite-web\/","title":{"rendered":"Contraste des couleurs\u00a0: rendre votre identit\u00e9 lisible sur le web"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Une palette peut \u00eatre reconnaissable et produire malgr\u00e9 tout des textes difficiles \u00e0 lire. Un vert vif sur fond blanc, une l\u00e9gende grise ou un bouton dont l\u2019\u00e9tat change seulement de couleur peuvent poser probl\u00e8me. Le contraste doit \u00eatre v\u00e9rifi\u00e9 sur les combinaisons r\u00e9ellement utilis\u00e9es, avec les tailles et les contextes du site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019objectif n\u2019est pas d\u2019abandonner une couleur de marque. Il s\u2019agit de lui attribuer les bons r\u00f4les : surface, accent, texte ou interaction. Une couleur tr\u00e8s expressive peut rester pr\u00e9sente sans porter les petits caract\u00e8res.<\/p>\n\n\n\t<section class=\"flc\" data-flc aria-roledescription=\"carrousel\" aria-label=\"Contraste des couleurs : 5 d\u00e9cisions pour un web lisible\">\n\t\t<div class=\"flc__header\">\n\t\t\t<span class=\"flc__category\">Contraste des couleurs : 5 d\u00e9cisions pour un web lisible<\/span>\n\t\t\t<div class=\"flc__navigation\" data-flc-navigation>\n\t\t\t\t<button class=\"flc__arrow\" type=\"button\" data-flc-prev aria-controls=\"flc-piste-1\" aria-label=\"Diapositive pr\u00e9c\u00e9dente\">\n\t\t\t\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"m14.5 5-7 7 7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n\t\t\t\t<\/button>\n\t\t\t\t<span class=\"flc__counter\" data-flc-counter aria-live=\"polite\" aria-atomic=\"true\">01 \/ 06<\/span>\n\t\t\t\t<button class=\"flc__arrow\" type=\"button\" data-flc-next aria-controls=\"flc-piste-1\" aria-label=\"Diapositive suivante\">\n\t\t\t\t\t<svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"m9.5 5 7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n\t\t\t\t<\/button>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<div class=\"flc__track\" id=\"flc-piste-1\" data-flc-track tabindex=\"0\" aria-label=\"Faites glisser les diapositives ou utilisez les fl\u00e8ches gauche et droite\">\n\t\t\t\t\t\t\t<figure class=\"flc__slide\" data-flc-slide role=\"group\" aria-roledescription=\"diapositive\" aria-label=\"Diapositive 1 sur 6\">\n\t\t\t\t\t<div class=\"flc__image-wrap\">\n\t\t\t\t\t\t<img fetchpriority=\"high\" width=\"1080\" height=\"1080\" src=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-01-couverture.webp\" class=\"flc__image\" alt=\"Deux interfaces mobiles aux contrastes diff\u00e9rents introduisent un guide Foldline sur la lisibilit\u00e9 des couleurs sur le web.\" loading=\"eager\" decoding=\"async\" sizes=\"(max-width: 760px) calc(100vw - 32px), 840px\" srcset=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-01-couverture.webp 1080w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-01-couverture-300x300.webp 300w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-01-couverture-1024x1024.webp 1024w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-01-couverture-150x150.webp 150w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-01-couverture-768x768.webp 768w\" \/>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"flc__caption\">Une palette forte ne suffit pas : le contraste se v\u00e9rifie dans les vraies interfaces.<\/figcaption>\n\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<figure class=\"flc__slide\" data-flc-slide role=\"group\" aria-roledescription=\"diapositive\" aria-label=\"Diapositive 2 sur 6\">\n\t\t\t\t\t<div class=\"flc__image-wrap\">\n\t\t\t\t\t\t<img width=\"1080\" height=\"1080\" src=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-02-paires-contraste.webp\" class=\"flc__image\" alt=\"Comparaison de deux combinaisons : vert vif #52FF00 sur blanc, contraste 1,34:1, et texte fonc\u00e9 #171A16 sur vert vif, contraste 13,1:1.\" loading=\"lazy\" decoding=\"async\" sizes=\"auto, (max-width: 760px) calc(100vw - 32px), 840px\" srcset=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-02-paires-contraste.webp 1080w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-02-paires-contraste-300x300.webp 300w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-02-paires-contraste-1024x1024.webp 1024w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-02-paires-contraste-150x150.webp 150w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-02-paires-contraste-768x768.webp 768w\" \/>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"flc__caption\">La m\u00eame couleur peut \u00eatre difficile ou facile \u00e0 lire selon son association.<\/figcaption>\n\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<figure class=\"flc__slide\" data-flc-slide role=\"group\" aria-roledescription=\"diapositive\" aria-label=\"Diapositive 3 sur 6\">\n\t\t\t\t\t<div class=\"flc__image-wrap\">\n\t\t\t\t\t\t<img width=\"1080\" height=\"1080\" src=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-03-seuils-wcag.webp\" class=\"flc__image\" alt=\"Infographie WCAG 2.2 AA : contraste 4,5:1 pour le texte courant, 3:1 pour le grand texte et rappel du crit\u00e8re relatif aux \u00e9l\u00e9ments graphiques n\u00e9cessaires.\" loading=\"lazy\" decoding=\"async\" sizes=\"auto, (max-width: 760px) calc(100vw - 32px), 840px\" srcset=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-03-seuils-wcag.webp 1080w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-03-seuils-wcag-300x300.webp 300w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-03-seuils-wcag-1024x1024.webp 1024w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-03-seuils-wcag-150x150.webp 150w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-03-seuils-wcag-768x768.webp 768w\" \/>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"flc__caption\">Les crit\u00e8res varient selon la taille du texte et le r\u00f4le des composants.<\/figcaption>\n\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<figure class=\"flc__slide\" data-flc-slide role=\"group\" aria-roledescription=\"diapositive\" aria-label=\"Diapositive 4 sur 6\">\n\t\t\t\t\t<div class=\"flc__image-wrap\">\n\t\t\t\t\t\t<img width=\"1080\" height=\"1080\" src=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-04-roles-palette.webp\" class=\"flc__image\" alt=\"Quatre r\u00f4les de couleur et une maquette fictive Aube Maison : texte principal, texte secondaire, accent de marque et bouton vert \u00e0 libell\u00e9 sombre.\" loading=\"lazy\" decoding=\"async\" sizes=\"auto, (max-width: 760px) calc(100vw - 32px), 840px\" srcset=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-04-roles-palette.webp 1080w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-04-roles-palette-300x300.webp 300w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-04-roles-palette-1024x1024.webp 1024w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-04-roles-palette-150x150.webp 150w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-04-roles-palette-768x768.webp 768w\" \/>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"flc__caption\">Couleur de texte, surface, accent, interaction : chaque teinte a un r\u00f4le.<\/figcaption>\n\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<figure class=\"flc__slide\" data-flc-slide role=\"group\" aria-roledescription=\"diapositive\" aria-label=\"Diapositive 5 sur 6\">\n\t\t\t\t\t<div class=\"flc__image-wrap\">\n\t\t\t\t\t\t<img width=\"1080\" height=\"1080\" src=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-05-couleur-seule.webp\" class=\"flc__image\" alt=\"Comparaison de champs e-mail : une bordure rouge seule face \u00e0 un champ affichant aussi le message explicite \u00ab Adresse e-mail invalide \u00bb.\" loading=\"lazy\" decoding=\"async\" sizes=\"auto, (max-width: 760px) calc(100vw - 32px), 840px\" srcset=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-05-couleur-seule.webp 1080w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-05-couleur-seule-300x300.webp 300w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-05-couleur-seule-1024x1024.webp 1024w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-05-couleur-seule-150x150.webp 150w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-05-couleur-seule-768x768.webp 768w\" \/>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"flc__caption\">Une erreur doit \u00eatre expliqu\u00e9e, pas simplement color\u00e9e.<\/figcaption>\n\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t<figure class=\"flc__slide\" data-flc-slide role=\"group\" aria-roledescription=\"diapositive\" aria-label=\"Diapositive 6 sur 6\">\n\t\t\t\t\t<div class=\"flc__image-wrap\">\n\t\t\t\t\t\t<img width=\"1080\" height=\"1080\" src=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-06-tests-reels.webp\" class=\"flc__image\" alt=\"Checklist de quatre \u00e9crans \u00e0 contr\u00f4ler : accueil, fiche produit, formulaire et confirmation, avec v\u00e9rification du clavier, du zoom et des images de fond.\" loading=\"lazy\" decoding=\"async\" sizes=\"auto, (max-width: 760px) calc(100vw - 32px), 840px\" srcset=\"https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-06-tests-reels.webp 1080w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-06-tests-reels-300x300.webp 300w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-06-tests-reels-1024x1024.webp 1024w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-06-tests-reels-150x150.webp 150w, https:\/\/foldline.studio\/blog\/wp-content\/uploads\/2026\/10\/foldline-contraste-couleurs-06-tests-reels-768x768.webp 768w\" \/>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"flc__caption\">Validez les contrastes sur les vrais parcours, pas seulement sur une palette.<\/figcaption>\n\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t<\/div>\n\n\t\t<div class=\"flc__pagination\" data-flc-pagination aria-label=\"Choisir une diapositive\">\n\t\t\t\t\t\t\t<button class=\"flc__dot\" type=\"button\" data-flc-dot=\"0\" aria-label=\"Aller \u00e0 la diapositive 1 sur 6\" aria-current=\"true\"><span aria-hidden=\"true\"><\/span><\/button>\n\t\t\t\t\t\t\t<button class=\"flc__dot\" type=\"button\" data-flc-dot=\"1\" aria-label=\"Aller \u00e0 la diapositive 2 sur 6\" ><span aria-hidden=\"true\"><\/span><\/button>\n\t\t\t\t\t\t\t<button class=\"flc__dot\" type=\"button\" data-flc-dot=\"2\" aria-label=\"Aller \u00e0 la diapositive 3 sur 6\" ><span aria-hidden=\"true\"><\/span><\/button>\n\t\t\t\t\t\t\t<button class=\"flc__dot\" type=\"button\" data-flc-dot=\"3\" aria-label=\"Aller \u00e0 la diapositive 4 sur 6\" ><span aria-hidden=\"true\"><\/span><\/button>\n\t\t\t\t\t\t\t<button class=\"flc__dot\" type=\"button\" data-flc-dot=\"4\" aria-label=\"Aller \u00e0 la diapositive 5 sur 6\" ><span aria-hidden=\"true\"><\/span><\/button>\n\t\t\t\t\t\t\t<button class=\"flc__dot\" type=\"button\" data-flc-dot=\"5\" aria-label=\"Aller \u00e0 la diapositive 6 sur 6\" ><span aria-hidden=\"true\"><\/span><\/button>\n\t\t\t\t\t<\/div>\n\t\t\t<\/section>\n\t\n\n\n<h2 class=\"wp-block-heading\">L\u2019essentiel en 30 secondes<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Testez des paires texte-fond, pas les couleurs s\u00e9par\u00e9ment.<\/li>\n\n\n\n<li>Le W3C pr\u00e9voit des seuils diff\u00e9rents selon la taille du texte.<\/li>\n\n\n\n<li>Ajoutez des mots ou des formes aux informations port\u00e9es par la couleur.<\/li>\n\n\n\n<li>Une palette conforme ne suffit pas \u00e0 rendre tout un site accessible.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Les rep\u00e8res \u00e0 conna\u00eetre<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Le <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html\">crit\u00e8re WCAG 2.2 sur le contraste minimum<\/a> fixe g\u00e9n\u00e9ralement un rapport de 4,5:1 pour le texte courant et de 3:1 pour le grand texte, avec des exceptions d\u00e9finies. Le grand texte correspond notamment \u00e0 au moins 18 points en normal ou 14 points en gras, soit environ 24 et 18,7 pixels CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ces seuils concernent le contenu num\u00e9rique dans les conditions du crit\u00e8re. Ils ne constituent pas une certification universelle d\u2019un imprim\u00e9 ni un audit complet d\u2019accessibilit\u00e9. Le contraste des composants et informations visuelles n\u00e9cessaires rel\u00e8ve \u00e9galement de r\u00e8gles sp\u00e9cifiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Organiser la palette par r\u00f4le<\/h2>\n\n\n\n<div class=\"tablewrap\">\n<table>\n<thead>\n<tr>\n<th scope=\"col\">R\u00f4le<\/th>\n<th scope=\"col\">Choix \u00e0 documenter<\/th>\n<th scope=\"col\">V\u00e9rification<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Texte principal<\/td>\n<td>Couleur sur le fond courant<\/td>\n<td>Lecture de paragraphes et liens<\/td>\n<\/tr>\n<tr>\n<td>Texte secondaire<\/td>\n<td>Nuance distincte mais lisible<\/td>\n<td>L\u00e9gendes et m\u00e9tadonn\u00e9es<\/td>\n<\/tr>\n<tr>\n<td>Bouton principal<\/td>\n<td>Fond, texte, contour et \u00e9tats<\/td>\n<td>Repos, survol et focus clavier<\/td>\n<\/tr>\n<tr>\n<td>Accent de marque<\/td>\n<td>Zone d\u2019expression<\/td>\n<td>Ne pas d\u00e9pendre de petits textes peu contrast\u00e9s<\/td>\n<\/tr>\n<tr>\n<td>Erreur ou confirmation<\/td>\n<td>Couleur et indication suppl\u00e9mentaire<\/td>\n<td>Message compr\u00e9hensible sans la couleur<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Cette r\u00e9partition produit des r\u00e8gles applicables. Une charte qui fournit seulement cinq codes hexad\u00e9cimaux laisse chaque designer ou d\u00e9veloppeur improviser leurs associations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exemple calcul\u00e9 : un vert vif et deux usages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Avec le vert #52FF00, le contraste avec du blanc est d\u2019environ 1,34:1, alors qu\u2019avec le noir #171A16 il est d\u2019environ 13,1:1. Ces valeurs proviennent du calcul de luminance relative de ces couleurs pr\u00e9cises, sans transparence ni image de fond.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La premi\u00e8re combinaison ne convient pas \u00e0 du texte courant selon le seuil cit\u00e9. La seconde permet d\u2019envisager un bouton vert avec un libell\u00e9 tr\u00e8s sombre. Le vert peut aussi servir de rep\u00e8re d\u00e9coratif, tandis que les textes restent noirs sur un fond clair.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il faut encore tester les \u00e9tats, la taille, le contour et la navigation. Un calcul r\u00e9ussi pour un bouton au repos ne dit rien de son \u00e9tat d\u00e9sactiv\u00e9 ou du focus clavier.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">V\u00e9rifier les vrais \u00e9crans<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Prenez les pages cl\u00e9s : accueil, service, produit, formulaire et confirmation. Relevez les paires utilis\u00e9es, y compris sur les images et dans les encarts. Pour un fond variable, examinez les zones les moins favorables ; une moyenne visuelle ne suffit pas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Testez le zoom et la navigation au clavier. Demandez aussi \u00e0 une personne qui ne conna\u00eet pas la maquette d\u2019identifier les liens, les erreurs et l\u2019action principale. Ces observations compl\u00e8tent les mesures sans remplacer les contr\u00f4les techniques n\u00e9cessaires.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La <a href=\"https:\/\/foldline.studio\/blog\/charte-graphique-contenu\/\">charte graphique<\/a> devrait conserver les associations approuv\u00e9es et les associations interdites. Le <a href=\"https:\/\/foldline.studio\/blog\/kit-reseaux-sociaux\/\">kit r\u00e9seaux sociaux<\/a> peut reprendre ces principes, en v\u00e9rifiant la lecture \u00e0 la taille d\u2019affichage r\u00e9elle.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ne pas utiliser la couleur seule<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un champ invalide doit contenir une explication, pas seulement une bordure rouge. Un graphique doit diff\u00e9rencier ses s\u00e9ries avec des libell\u00e9s ou des formes lorsque n\u00e9cessaire. Un \u00e9tat s\u00e9lectionn\u00e9 peut associer couleur, rep\u00e8re et texte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/use-of-color.html\">W3C traite explicitement l\u2019usage de la couleur<\/a>. Cette pr\u00e9caution aide aussi dans des conditions ordinaires : \u00e9cran peu lumineux, impression monochrome ou lecture rapide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Questions fr\u00e9quentes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Faut-il modifier le logo pour respecter le contraste du texte ?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les logotypes b\u00e9n\u00e9ficient d\u2019une exception dans le crit\u00e8re cit\u00e9. Cela ne dispense pas de v\u00e9rifier leur lisibilit\u00e9 et celle des textes qui les entourent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Un outil automatique suffit-il ?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Il peut calculer une paire et rep\u00e9rer certains probl\u00e8mes. Les \u00e9tats, les fonds complexes et la compr\u00e9hension du parcours demandent aussi une revue humaine.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Peut-on garder une couleur peu contrast\u00e9e ?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Oui, selon son r\u00f4le. Utilisez-la dans des situations adapt\u00e9es et pr\u00e9voyez des combinaisons lisibles pour les textes et interactions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Faire \u00e9voluer la palette avec m\u00e9thode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/foldline.studio\/design-graphique-algerie\/\">Travaillez votre syst\u00e8me visuel avec Foldline<\/a> \u00e0 partir de vos pages et supports r\u00e9els. La couleur gardera sa personnalit\u00e9 avec des r\u00e8gles de lecture explicites.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Une palette peut \u00eatre reconnaissable et produire malgr\u00e9 tout des textes difficiles \u00e0 lire. Un vert vif sur fond blanc, une l\u00e9gende grise ou un bouton dont l\u2019\u00e9tat change seulement de couleur peuvent poser probl\u00e8me. Le contraste doit \u00eatre v\u00e9rifi\u00e9 sur les combinaisons r\u00e9ellement utilis\u00e9es, avec les tailles et les contextes du site.<\/p>\n","protected":false},"author":1,"featured_media":336,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_fl_seo_title":"Contraste couleurs : une identit\u00e9 web lisible | Foldline","_fl_seo_desc":"Rendez votre identit\u00e9 lisible sur le web : seuils WCAG, r\u00f4les de palette, exemple calcul\u00e9 et contr\u00f4les des textes, boutons et \u00e9tats.","_fl_noindex":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/posts\/335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/comments?post=335"}],"version-history":[{"count":2,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/posts\/335\/revisions"}],"predecessor-version":[{"id":841,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/posts\/335\/revisions\/841"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/media\/336"}],"wp:attachment":[{"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/media?parent=335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/categories?post=335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foldline.studio\/blog\/wp-json\/wp\/v2\/tags?post=335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}