Comment calculer le contraste des couleurs

Contenu

Calcul de la différence de couleur luminosité
Calcul hue différence

article data-type="article">

Bon contraste de couleur rend les pages Web plus lisible.

Le contraste des couleurs des éléments de page Web dépend des différences entre leurs niveaux de luminosité et de leurs teintes. Si les différences de luminosité et de teinte entre deux couleurs sont au-dessus d`un certain seuil, les couleurs ont un contraste suffisant. Si un ou les deux mesures est inférieur au seuil, le World Wide Web Consortium vous recommande de changer les couleurs. Vous pouvez calculer le contraste des couleurs si vous connaissez le RGB valeurs (rouge-vert-bleu) de deux couleurs. Conception de pages Web avec suffisamment de contraste entre le fond et le texte améliore l`expérience utilisateur.

Calcul de la différence de couleur Luminosité

Désignons les valeurs de rouge, vert et bleu de la couleur du texte par R1, G1 et B1 respectivement. Désignent les valeurs de rouge, vert et bleu de la couleur de fond par R2, G2 et B2, respectivement.
Compute (299R1 + 587G1 + 114B1) / 1000. Ceci est la luminosité de la couleur du texte. Par exemple, supposons que vous avez un texte vert foncé, où R1 = 20, G1 = 100 et B1 = 20, puis la luminosité de la couleur du texte est 66.96, puisque (29920 + 587100 + 11420) / 1000 = 66,96.
Compute (299R2 + 587G2 + 114B2) / 1000. Ceci est la brillance de la couleur de fond. Par exemple, supposons que vous avez un fond rose clair où R2 = 255, G2 = 220 et B2 = 240, puis la luminosité de la couleur de fond est 232,75, puisque (299255 + 587220 + 114240) / 1000 = 232,75.
Calculer la différence entre les niveaux de luminosité. Si la différence est inférieure à 125, vous devez régler une ou deux couleurs pour augmenter la différence de luminosité. Par exemple, depuis 232,75 à 66,96 = 165,79, vous n`avez pas besoin de changer les couleurs.

Calcul Hue Différence

Calculer la différence entre les valeurs de chaque couleur rouge. En utilisant l`exemple ci-dessus, la différence entre les valeurs de rouge est de 235 depuis 255-20 = 235.
Répétez l`étape 1 pour les valeurs vertes et bleues. En utilisant l`exemple ci-dessus, la différence verte est de 120 (depuis 220 à 100 = 120), et la différence est bleu 220 (depuis 240-20 = 220).
Ajouter les trois différences pour obtenir la différence de couleur totale. Si la différence de teinte est inférieur à 500, vous avez besoin de changer une ou deux couleurs. Par exemple, depuis + 120 + 235 220 = 575, vous n`avez pas besoin de changer les couleurs.