Comment calculer le contraste des couleurs

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 l'un ou les deux mesures est inférieur au seuil, World Wide Web Consortium recommande que vous modifiez 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 assez de contraste entre le fond et le texte améliore l'expérience utilisateur.

Calculer la différence de luminosité de la couleur

  1. Notons les valeurs de rouge, vert et bleu de la couleur du texte par R1, G1 et B1 respectivement. On note les valeurs de rouge, vert et bleu de la couleur de fond par R2, G2 et B2 respectivement.

  2. 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, depuis (29920 + 587100 + 11420) / 1000 = 66,96.




  3. Compute (299R2 + 587G2 + 114B2) / 1000. Ceci est la luminosité de la couleur de fond. Par exemple, supposons que vous avez un fond rose pâle où R2 = 255, G2 = 220 et B2 = 240, puis la luminosité de la couleur de fond est 232,75, depuis (299255 + 587220 + 114240) / 1000 = 232,75.

  4. Calculer la différence entre les niveaux de luminosité. Si la différence est inférieure à 125, vous devez régler un ou deux couleurs pour augmenter la différence de luminosité. Par exemple, depuis 232,75 à 66,96 = 165,79, vous ne devez pas changer les couleurs.

Calcul Hue Différence




  1. 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.

  2. Répétez l'étape 1 pour les valeurs vertes et bleues. En utilisant l'exemple ci-dessus, la différence est de 120 vert (depuis 220-100 = 120), et la différence est de 220 bleu (depuis 240-20 = 220).

  3. Ajouter les trois différences pour obtenir la différence de teinte totale. Si la différence de teinte est inférieur à 500, vous devez changer une ou deux couleurs. Par exemple, depuis 235 + 120 + 220 = 575, vous ne devez pas changer les couleurs.

» » » » Comment calculer le contraste des couleurs