|
Le contraste des couleurs des éléments de la page web dépend de la différence entre leurs niveaux de luminosité et de leurs teintes. Si la luminosité et la teinte différences entre les 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 , le World Wide Web Consortium recommande de changer les couleurs . Vous pouvez calculer le contraste des couleurs si vous connaissez les valeurs RVB ( 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. Instructions
de calcul de différence de couleur Luminosité
1 désignent les valeurs de rouge , vert et bleu de la couleur du texte par R1, G1 et B1 respectivement . Notons les valeurs de rouge , vert et bleu de la couleur de fond par R2 , G2 et B2 respectivement .
2 Compute ( 299 * 587 * R1 + G1 + 114 * B1) /1000 . Il s'agit de la luminosité de la couleur du texte . Par exemple , supposons que vous avez un texte vert sombre où R1 = 20 , G1 = 100 et B1 = 20, puis la luminosité de la couleur du texte est 66.96 , puisque ( 299 * 20 + 587 * 100 + 114 * 20) /1000 = 66,96 .
3 Compute ( 299 * 587 * R2 + G2 + 114 * B2) /1000 . Il s'agit de 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 , puisque ( 299 * 255 + 587 * 220 + 114 * 240) /1000 = 232,75 .
4 calculer la différence entre les niveaux de luminosité . Si l'écart est inférieur à 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
5 calculer la différence entre les valeurs rouges de chacun. couleur . En utilisant l'exemple ci-dessus, la différence entre les valeurs de rouge est de 235 255 depuis - . 20 = 235
6 Répétez l'étape 1 pour les valeurs vertes et bleues. En utilisant l'exemple ci-dessus, la différence est vert 120 ( depuis 220-100 = 120) , et la différence bleu est de 220 ( depuis 240-20 = 220).
7 Ajouter les trois différences d'obtenir la différence totale de teinte . Si la différence de teinte est inférieur à 500, vous devez modifier l'un ou l'autre des couleurs. Par exemple, depuis 235 + 120 + 220 = 575, vous n'avez pas besoin de changer les couleurs .
|
