Je suis souvent confronté à cette problématique dans mon métier. Quand je réalise des maquettes pour des sites internet et que je passe ensuite à l’intégration, il y a souvent des problèmes entre la couleur du texte et le background, souvent quand il s’agit de sliders.

En me baladant ce matin sur la toile, je suis tombé sur cette “merveilleuse” ressource. Elle se nomme BackgroundCheck et elle permet avec un peu de JS et de CSS de regarder de quelle couleur est le background et ensuite d’ajuster le texte en conséquence.

Comment il fonctionne ?

Si un élément texte (ou autre) passe sur une image ou un background, alors la class .background–dark ou .background–light est ajoutée à celui-ci.

Attention, BackgroundCheck ne se charge pas de modifier votre CSS c’est à vous de le faire à la main.

Par exemple si le CSS de “p” est de cette façon à la base :

p {
  color: white;
}

Vous devrez le modifier de cette façon :

p.background--light {
  color: black;
}

Ca n’est pas très très compliqué et c’est super utile. Vous pouvez retrouver le projet sur GitHub afin de voir ce qu’il a dans le ventre.

Pas mal non ?

Le projet sur GitHub.

Les démonstrations du projet.