Contrast-color() - Fonction CSS

contrast-color()

Résumé des caractéristiques de la fonction contrast-color()

Description rapide
Détermine une couleur pour l'avant-plan en fonction de la couleur d'arrière-plan afin de maximiser le contraste.
Statut
Problèmes de compatibilité ⚠
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Type d'animation
Discrète : lors d'une animation, la propriété contrast-color() passe d'une valeur à l'autre sans transition.
Ordre canonique
Single : valeur unique (l'ordre n'intervient pas).
Module W3C
Module CSS - Couleurs
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de contrast-color().

contrast-color() - Syntax DiagramSyntax diagram of the contrast-color() CSS function. color colorcontrast-color()contrast-color()
Schéma syntaxique de la fonction contrast-color().
Cliquez sur les termes du diagram pour plus de précision.

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

  • color est une couleur, exprimée dans n'importe quel format reconnu par CSS (voir les Les couleurs).

Description de la fonction contrast-color().

Lorsque des couleurs sont créées dynamiquement, il est parfois délicat de trouver la couleur du texte qui contraste suffisamment avec l'arrière-plan. la fonction contrast-color() détermine une couleur dont le contraste est suffisant pour être affiché par dessus un arrière-plan de la couleur indiquée. La couleur retournée peut être blanc ou noir.

Bien entendu si l'arrière-plan n'est pas uni (une image par exemple), la fonction contrast-color() ne peut pas être efficace.

⚠ Cette fonction est encore mal reconnue par les navigateurs. Si vous utilisez un navigateur compatible (comme Firefox  ) le texte ci-dessous sera écrit en blanc. Sinon, vous ne verrez pas le texte du tout.

Texte

La valeur contrast-color() peut être utilisée avec les propriétés suivantes :

Essentiellement utilisé avec la propriété color la fonction contrast-color() peut aussi convenir à toutes les propriétés qui attendent une couleur.

    Syntaxes de la fonction contrast-color().

    • <property>: color-contrast(#ff8045); color

      color est un couleur exprimée dans n'importe quelle syntaxe reconnue par CSS (voir Les couleurs). La fonction renvoie white ou black suivant la couleur qui présente les meilleures caractéristiques de contraste avec la couleur color.

    Animation avec la fonction contrast-color().

    L'animation est faite sur la couleur de l'arrière-plan, entre blanc et noir. La couleur du texte, elle, est fixé à contrast-color(). Sur les navigateurs compatibles vous devez toujours pouvoir lire le texte, en noir sur fond blanc ou en blanc sur fond noir.

    Texte en couleur automatique

    Simulateur avec la fonction contrast-color().

    Le simulateur vous permet de changer la couleur d'arrière-plan du bloc ci-dessous. La couleur du texte est, elle, fixée par contrast-color().

    Remarque : le simulateur positionne une variable (propriété personnalisée) nommée --demo1, qui sert ensuite à déterminer la couleur du fond et qui est passé en paramètre à la fonction contrast-color() pour déterminer la couleur de l'avant-plan.

    --demo1 :
    Texte

    Support de la fonction contrast-color().

    La fonction contrast-color() est encore très mal reconnue par les navigateurs (2025). Il est encore trop pour l'utiliser.

    Colonne 1
    Prise en charge par les navigateurs de la fonction contrast-color() qui détermine la couleur (entre blanc et noir) qui présente le plus fort contraste avec une couleur donnée.
    1
    Fonction
    cntrast-color()
    Estimation de la prise en charge globale.
    3%

    Navigateurs sur ordinateurs :

    Navigateurs sur mobiles :

    Navigateurs obsolètes ou marginaux :

    Internet Explorer

    UC Browser pour Androïd

    Opéra Mobile

    QQ Browser

    Baidu Browser

    Safari

    Samsung Internet

    Safari sur IOS

    Androïd Brower

    Chrome

    Chrome pour Androïd

    Edge

    Firefox

    Firefox pour Androïd

    KaiOS Browser

    Opéra

    Opéra mini

    Voir le site Caniuse.com pour plus d'informations de compatibilité.
    Caniuse

    Historique de la fonction contrast-color().

    • Module CSS - Couleurs - Niveau 5

      Introduction de la fonction contrast-color() pour déterminer une couleur d'avant plan par rapport à une couleur d'arrière-plan.
      WD
      03 Mars 2020
      Document de travail.
      CR
      PR
      REC

    Voir aussi, à propos des couleurs.

    Ci-dessous la liste des propriétés, fonctions et autres termines relatifs à la gestion des couleurs en CSS.

    Propriétés :

    color
    Définit la couleur de l'avant plan et affecte une valeur à currentcolor.
    opacity
    Définit l'opacité (inverse de la transparence) d'un élément et de ses descendants.

    Fonctions :

    color()
    Définit une couleur dans un espace de couleurs quelconque (sRGB, sRGB-linear, profoto, etc).
    color-mix()
    Effectue le mélange de deux couleurs dans un espace de couleurs donné.
    ⚠
    device-cmyk()
    Définit une couleur en fonction d'un périphérique, en spécifiant les valeurs cyan, magenta, jaune et noir.
    hsl()
    Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité, une alternative plus proche de notre mode de raisonnement.
    hsla()
    Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
    hwb()
    Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
    lab()
    Définit une couleur dans le système L*a*b*.
    lch()
    Définit une couleur dans le système L*C*H*.
    oklab()
    Définit une couleur dans le système L*a*b* avec une correction perceptive.
    oklch()
    Définit une couleur dans le système L*C*H* avec une correction perceptive.
    rgb()
    Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
    rgba()
    Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

    Directives :

    @color-profile
    Spécifie un profil colorimétrique qui pourra ensuite être utilisé par la fonction color().

    Descripteurs :

    ⚠
    components
    Descripteur utilisable avec la directive @color-profile.
    ⚠
    rendering-intent
    Descripteur utilisable avec la directive @color-profile. Définit la méthode de conversion d'un profil colorimétrique à un autre.