Contraste de texte automatique avec CSS Blend Modes

Les Blend Modes CSS permettent de créer des effets graphiques vraiment passionnants. Une des applications pratiques les plus utiles concerne le contraste automatique entre texte et background. Par Dudley Storey.

Par

Dans quelques articles précédents, j’ai créé divers effets graphiques avec CSS Blend Modes, mais l’une des applications les plus utiles des mélanges (blends) concerne le texte.

Le contraste est une priorité pour l’accessibilité, et ce point est souvent négligé par certains designers adeptes des ombres, de la subtilité et des polices fines. Mais le contraste devient un problème incontournable lorsque le texte se trouve en tout ou partie sur un fond de couleur proche :

body {
  text-align: center;
  font-family: Montserrat, sans-serif;
  color: #000;
  background-image: linear-gradient(90deg,#fff 49.9%,#000 50%);
}
h1 {
  font-size: 10vw;
}

Vous pouvez voir le résultat ci-dessous :

image
Figure 1 : Le texte “Bad Boy” est partiellement illisible sur fond noir.

Sans traitement particulier, le deuxième mot est totalement illisible. Dans le design traditionnel, il y a deux façons de résoudre le problème — aussi décourageantes l’une que l’autre.

  1. Remplacer le texte par une image.
  2. Ajouter une quantité substantielle de HTML et de CSS à la page.

Mais avec Blend Modes, nous pouvons faire basculer le texte lorsqu’il passe du côté sombre :

h1 { color: #fff; mix-blend-mode: difference; }

Remarquez le changement de couleur appliqué à l’élément <h1> qui permet à blend mode de basculer la couleur du texte vers la couleur opposée du background.

Le résultat :

image
Figure 2

Ça fonctionne très bien lorsqu’une lettre est à cheval entre deux zones :

image
Figure 3

…ou si le background est une image :

image
Figure 4. Photo d'Andrew Stein sous licence CC.

Amélioration progressive avec Blend Modes

Internet Explorer ne supporte pas encore les Blend Modes, bien que ceux-ci soient listés comme actuellement à l’étude pour Microsoft Edge, il faut donc s’assurer que le texte de la page reste lisible même si les blend modes ne sont pas appliqués. Pour l’exemple de la figure 2, c’est assez simple, si l’on part du principe que le texte reste toujours sur une seule ligne, il suffit par exemple d’avoir un texte de couleur noire et d’envelopper le deuxième mot dans un <span> pour lui donner une couleur blanche avec CSS, ce qui permet d’obtenir le même effet quel que soit le navigateur.

Une approche plus sophistiquée consiste à détecter la compatibilité du navigateur et à appliquer les changements de couleur en fonction de cette information. Vous pouvez le faire avec Modernizr :

Modernizr.addTest("mix-blend-mode", function(){
  return Modernizr.testProp("mixBlendMode");
});

ou @support via JavaScript :

if ("CSS" in window && "supports" in window.CSS) {
  var support = window.CSS.supports("mix-blend-mode","difference");
  support = support?"mix-blend-mode":"no-mix-blend-mode";
  document.documentElement.className += support;
}

avec ceci dans votre feuille de styles :

h1 { color: #000; }
  .mix-blend-mode body {
  background-image: linear-gradient(90deg,#fff 49.9%,#000 50%);
}
.mix-blend-mode h1 { color: #fff; }

ou plus directement, via @supports dans CSS, sans aucune dépendance JavaScript :

@supports (mix-blend-mode: difference) {
  body {
  background-image: linear-gradient(90deg,#fff 49.9%,#000 50%);
  }
  h1 { 
    color: #fff;
  }
}

Quoi que vous choisissiez, l’objectif reste le même : créer une page web qui ait belle allure sans les blend modes, et utiliser le CSS avancé pour l’améliorer ( NdT : sur cette idée générale, voir l’article de Jeremy Keith Amélioration Responsive).

Ce n’est pas la panacée

Comme son nom l’indique, difference fonctionne bien pour les contrastes lorsque la couleur de base est significativement plus sombre, ou de la même couleur, que la couleur du texte. Si le background est plus clair, le changement de contraste est moins efficace par rapport au texte. Vous pourrez vous en rendre compte en jouant avec les valeurs de couleur du dégradé et du texte dans cette démo CodePen : difference ne sera jamais un remède à un schéma de couleurs mal conçu, mais il peut être efficace dans la plupart des cas.

See the Pen Automatic Text Color Contrast with Blend Modes by Dudley Storey (@dudleystorey) on CodePen.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Articles sur les mêmes thèmes dans la Cascade :

CSS Blend Modes, une introduction, par Chris Coyier
CSS Blend Modes, petit guide, par Shwetank Dixit


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.