jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Generateur de fonction CSS contrast-color()

Generez des expressions contrast-color() CSS qui selectionnent automatiquement la couleur de texte la plus lisible dans une liste.

Chargement de l'outil...

Qu'est-ce que Generateur de fonction CSS contrast-color() ?

La fonction CSS contrast-color() (Baseline 2026) selectionne la couleur avec le rapport de contraste le plus eleve parmi une liste de candidates par rapport a un arriere-plan specifie. Avec contrast-color(background vs color1, color2, ...), vous fournissez la couleur d'arriere-plan et une liste de couleurs candidates. La fonction evalue le rapport de contraste WCAG de chaque candidate par rapport a l'arriere-plan et retourne la candidate avec le meilleur rapport. C'est une alternative CSS native au changement de couleur de texte base sur JavaScript pour les superpositions lisibles, les boutons et les badges.

Réponse rapide

Utilisez CSS contrast-color(background vs candidates...) pour selectionner automatiquement la couleur la plus lisible dans une liste. Fonctionne dans Chrome 132+, Edge 132+, Safari 19+ et Firefox 136+. Prend en charge le mode to max pour un contraste maximal ou l'ordre de liste priorise pour la preference de couleur de marque.

Last updated: 2026-05-30

Limites

  • contrast-color() n'est pas pris en charge dans les navigateurs anterieurs a Chrome 132, Safari 19 ou Firefox 136. Fournissez toujours une couleur de repli avant la declaration contrast-color().
  • La fonction evalue le contraste sur la base de la luminance relative, qui est une approximation mathematique de la perception humaine des couleurs.
  • contrast-color() selectionne une seule couleur dans la liste des candidates. Elle ne peut pas generer de couleurs intermediaires, melanger des candidates ou ajuster l'opacite.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Saisissez la couleur d'arriere-plan par rapport a laquelle le contraste sera mesure. Elle peut etre une valeur de couleur hex, rgb, hsl ou nommee.
  2. Ajoutez des couleurs candidates -- la fonction evalue chacune par rapport a l'arriere-plan et selectionne la meilleure correspondance.
  3. Choisissez le mode de contraste : to max selectionne toujours la candidate au contraste le plus eleve, ou omettez-le pour utiliser la priorite ordonnee.
  4. Copiez l'expression contrast-color() generee dans votre feuille de style et remplacez les couleurs candidates par vos references de jetons de design.

A quoi il sert

  • Styliser les superpositions de texte sur les images hero et les bannieres ou le texte doit rester lisible independamment de la couleur d'arriere-plan.
  • Construire des composants de badge et d'etiquette qui ajustent automatiquement la couleur du texte de l'etiquette en fonction de la couleur d'arriere-plan du badge.
  • Creer un systeme de boutons dynamiques ou la couleur du texte du bouton s'adapte a l'arriere-plan du bouton principal sans ecrire plusieurs variantes de couleur.

Cas d'usage

Exemples concrets

Exemple

Superposition de texte sur section hero

Une banniere hero a un dégradé d'arriere-plan qui alterne entre sections sombres et claires. Utilisez contrast-color(var(--hero-bg) vs white, black, var(--accent)) comme couleur de titre. Le titre utilise automatiquement le blanc sur les sections sombres et le noir sur les sections claires sans requetes media ni JavaScript.

Exemple

Composant d'etiquette avec couleurs dynamiques

Un composant d'etiquette reçoit sa couleur d'arriere-plan comme propriete personnalisee CSS. Utilisez contrast-color(var(--tag-bg) to max vs white, var(--tag-text)) pour la couleur de l'etiquette. Le mode to max garantit une lisibilite maximale.

Erreurs frequentes

  • Utiliser le mode to max alors qu'une priorite de couleur specifique est prevue -- to max retourne toujours la candidate au contraste le plus eleve, ignorant l'ordre des candidates.
  • Supposer que contrast-color() se recalcule lorsque l'arriere-plan change -- comme toute fonction CSS, elle s'evalue une fois par rendu de l'element.
  • Utiliser trop de couleurs candidates -- chaque candidate supplementaire augmente le calcul du contraste. Deux ou trois candidates bien choisies couvrent la plupart des systemes de design.

Vérification

  1. Testez l'expression contrast-color() avec plusieurs couleurs d'arriere-plan en modifiant la valeur d'arriere-plan dans le panneau Styles de DevTools et en observant la resolution de la couleur vers la candidate attendue.
  2. Inspectez la valeur de couleur calculee dans Chrome DevTools pour confirmer que contrast-color() se resout correctement.

FAQ

Questions sur Generateur de fonction CSS contrast-color()

Comment contrast-color() calcule-t-il le rapport de contraste ?

La fonction utilise l'algorithme de luminance relative WCAG 2.2 pour calculer le rapport de contraste entre chaque couleur candidate et la couleur d'arriere-plan. Le rapport va de 1:1 (luminance identique) a 21:1 (noir sur blanc). La fonction retourne ensuite la candidate avec le rapport le plus eleve.

Quels navigateurs prennent en charge contrast-color() en 2026 ?

contrast-color() est Baseline 2026, prise en charge dans Chrome 132+, Edge 132+, Safari 19+ et Firefox 136+. Safari 18 et antérieur ainsi que les versions plus anciennes de Chromium ne reconnaissent pas la fonction.

Puis-je utiliser des proprietes personnalisees CSS dans contrast-color() ?

Oui. Tous les arguments de couleur de contrast-color() acceptent les proprietes personnalisees CSS, y compris les références var() pour la couleur d'arriere-plan et chaque candidate.

Que se passe-t-il si aucune des candidates n'atteint le contraste WCAG AA ?

La fonction retourne quand meme la candidate avec le rapport de contraste le plus eleve, independamment du seuil WCAG. Pour une conformite WCAG AA/AAA, associez contrast-color() a des verifications explicites ou pre-validiez votre palette de candidates.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi