Calcul du contraste

Le contraste de couleurs est la différence de luminosité entre les couleurs de premier et d'arrière-plan. Il se calcule à partir de la luminance de la couleur. À partir de là, il est possible de calculer le ratio de contraste.

Définition du constraste et du ratio de contraste

Le contraste de couleurs est la différence de luminosité entre les couleurs de premier et d’arrière-plan.
Le rapport de contraste se calcule à partir de la différence de luminance (intensité de lumière émise) de chacune des couleurs ; il est compris entre 1 et 21 et exprimé sous la forme « 1:1 », « 21:1 ». Plus le nombre est grand, plus le contraste est élevé.

Calcul du ratio de contraste

Pour calculer le rapport de contraste entre deux couleurs, on va commencer par calculer la luminance relative de chacune des couleurs.
Une couleur peut être codée selon ses composantes RVB (ou RGB en anglais) ; les valeurs allant de 0 à 255. Ainsi, le noir pur se code rgb(0,0,0) et la blanc pur se code rgb(255,255,255).

Étape 1 : calcul des composantes non linéaires du code couleur

La première étape consiste à calculer à partir des valeurs RVB de la couleur les valeurs non linéaires comprises entre 0 (noir) et 1 (blanc) :

• Prenons la première composante du code couleur RVB, à savoir le code pour le rouge, et calculons le rouge non linéaire.
  • Diviser le premier composant (R) de l’étape 1 par 255 (R1 = R/255)
    • si R1 ≤ 0,03928 alors R2 = R1 / 12,92
    • si R1 > 0,03928 alors R2 = ((R1 + 0.055) / 1.055)
  • Rouge non linéaire (Rnl) : Rnl = R2 x 0,2126
• Prenons la deuxième composante du code couleur RVB, à savoir le code pour le vert, et calculons le vert non linéaire.
  • Diviser le deuxième composant (V) de l’étape 1 par 255 (V1 = R/255)
    • si V1 ≤ 0,03928 alors V2 = V1 / 12,92
    • si V1 > 0,03928 alors V2 = ((V1 + 0.055) / 1.055)
  • Vert non linéaire (Vnl) : Vnl = V2 x 0,7152
• Prenons la troisième composante du code couleur RVB, à savoir le code pour le bleu, et calculons le bleu non linéaire.
  • Diviser le troisème composant (B) de l’étape 1 par 255 (B1 = R/255)
    • si B1 ≤ 0,03928 alors B2 = B1 / 12,92
    • si B1 > 0,03928 alors B2 = ((B1 + 0.055) / 1.055)
  • Bleu non linéaire (Bnl) : Bnl = B2 x 0,0722

Étape 2 : calcul de la luminance relative de la couleur

Pour obtenir la luminance relative (L), additionnez les valeurs non linéaires obtenues à l’étape 1. L = Rnl + Vnl + Bnl

Étape 3 : calcul du ratio de contraste entre 2 couleurs

Après avoir effectué les calculs des étapes 1 et 2 pour la deuxième couleur, on va calculer le rapport de contraste entre les deux couleurs de la manière suivante :
Rapport de contraste = (L1 + 0.05) / (L2 + 0.05), où :

• L1 représente la luminance de la première couleur ;
• L2 représente la luminance de la deuxième couleur.

Selon les cas, le ratio minimal requis par la WCAG entre deux couleurs varie de 3:1 à 4.5:1, voire 7:1. Pour connaître le ratio minimal attendu, consulter la rubrique Coder accessible - Couleurs - Contraste accessible.