Le lecteur audio prend les couleurs de votre site, sans réglage

Quand on ajoute un composant tiers à un site, la petite corvée qui vient toujours avec, c'est le réglage des couleurs : trouver le bon bleu, le bon gris, coller la teinte de la marque pour que l'objet n'ait pas l'air posé là par erreur. Le lecteur audio de WeDispatch essaie de vous l'épargner. Déposé sur une page, il regarde autour de lui et prend la couleur d'accent du site sans que vous ayez à la saisir. Ce n'est pas un effet magique, c'est une règle précise, et comme toute règle elle a des cas où elle marche bien et des cas où elle se trompe. Autant l'exposer en clair.

La règle, dans l'ordre où elle se lit

Le lecteur cherche une couleur d'accent en passant par plusieurs pistes, et il s'arrête à la première qui donne un résultat acceptable :

• la couleur chromatique qui revient le plus dans le flux visible de la page. Un accent de marque est répété : titres, liens, filets, encadrés. C'est cette récurrence qui en fait un accent, et c'est elle qu'on mesure d'abord ;
• la couleur du bandeau de tête, si la première piste n'a rien donné : le fond de l'en-tête, ou celui de ses boutons ;
• la couleur des liens dans le corps du texte, puis de n'importe quel lien de la page ;
• à défaut de tout cela, la couleur du texte lui-même, qui garantit au moins un lecteur lisible et cohérent avec la page.

Vous pouvez suivre ce raisonnement sur vos propres pages : la couleur que le lecteur adopte est presque toujours celle que vous auriez désignée à l'œil comme « la couleur du site ». Le détail du composant et de ses variantes est décrit sur la page lecteur audio, et le choix du gabarit qui l'habille dans dix gabarits de lecteur, lequel pour votre blog.

Ce que le lecteur refuse, et pourquoi

Une couleur trouvée n'est pas une couleur retenue. Le lecteur écarte plusieurs candidats qui, à première vue, sembleraient convenir :

• le gris, le noir et le blanc. Ce ne sont l'accent de personne. Un texte noir sur fond blanc passe tous les tests de contraste, mais peindre le lecteur en noir ne raconte rien de la marque. La règle exige donc une vraie couleur, chromatique, pas une nuance de gris ;
• le bleu de lien par défaut du navigateur. Quand une page relève exactement ce bleu d'usine, c'est le signe que le site n'a rien décidé du tout pour ses liens. Le prendre pour l'accent d'une marque reviendrait à peindre le lecteur avec une valeur sortie de la boîte, pas avec une intention ;
• une couleur posée sur elle-même. Un rouge sur un fond rouge existe dans le code mais ne se voit pas. Un contrôle de contraste léger écarte ce cas, sans pour autant exiger la lisibilité d'un texte : ici la couleur remplit des formes, elle ne se lit pas.

Chacun de ces refus vient d'un cas réel observé sur de vrais sites de presse, où la première version de la règle donnait un lecteur terne là où la marque, elle, avait une couleur franche. Le repli est toujours le même, et il est sûr : à défaut d'accent recevable, le lecteur prend la couleur du texte, et son cadre se teinte à partir d'elle, si bien qu'il s'accorde à la page même quand il renonce à deviner.

La limite honnête : ce que la détection ne voit pas

Il y a un cas fréquent où la couleur de la marque est présente partout dans votre tête mais nulle part dans le code lisible : le logo. Sur beaucoup de sites, le rouge ou le jaune de la marque ne vit que dans une image de logo chargée depuis un autre domaine. Pour le lecteur, cette image est muette : il ne peut pas y lire une couleur sans se heurter aux règles de sécurité du navigateur sur les images d'origine tierce. Si votre identité repose uniquement sur un logo en image, et que le reste de la page est en noir et blanc, la détection ne trouvera pas votre couleur, tout simplement parce qu'elle n'est écrite nulle part où un script a le droit de la lire.

C'est exactement pour ces cas, et pour tous ceux où vous préférez décider vous-même, que la couleur reste imposable à la main. Un attribut sur le composant (data-accent, avec la couleur de votre choix) court-circuite toute la détection et fixe l'accent une fois pour toutes. La devinette est un confort par défaut, pas une contrainte : elle vous fait gagner du temps quand elle voit juste, et elle s'efface dès que vous voulez trancher. La mise en place du composant sur un site, avec ou sans réglage manuel, est décrite sur la page WordPress, et l'ensemble des variantes d'affichage dans la boîte à outils du lecteur.

Le principe qui tient tout cela est simple : un composant qu'on ajoute à un site ne devrait pas ressembler à un composant qu'on a ajouté à un site. Deviner la bonne couleur au lieu de la réclamer, c'est une petite chose, mais c'est le genre de petite chose qui fait qu'un lecteur a l'air d'appartenir à la page plutôt que d'y avoir été déposé.

Voyez ce qu'il choisit sur votre site

La formule gratuite de WeDispatch vous laisse installer le lecteur et observer la couleur qu'il retient : essayez maintenant. Les forfaits, de 69 à 419 euros HT par mois, sont détaillés sur la page tarifs.

À lire aussi

• Notes de bas de page et appels de note : ce que la synthèse vocale en fait
• Légendes et crédits de photos : ce que la synthèse vocale en fait
• Un lecteur audio dans la page ou dans une iframe : ce que ce choix décide