Texte blanc sur bleu #3B82F6
Le blanc sur le bleu #3B82F6 donne environ 3,7 : 1 : suffisant pour un grand texte, pas pour un texte normal.
Par Jimenez Julien, éditeur de Calepin Binaire · mis à jour le
- Rapport de contraste
- 3,67 : 1
- AA, texte normal (4,5 : 1)
- Échoué
- AA, grand texte (3 : 1)
- Réussi
- AAA, texte normal (7 : 1)
- Échoué
- AAA, grand texte (4,5 : 1)
- Échoué
- Éléments d'interface (3 : 1)
- Réussi
Le cas en détail
Un bleu moyen est un fond de bouton fréquent. Le blanc dessus paraît lisible, mais le calcul révèle un rapport inférieur à 4,5. Le texte du bouton doit donc être grand et gras, ou le bleu plus foncé.
À retenir : Assombrir le fond d'un bouton de quelques points de luminosité suffit souvent à passer le seuil AA.
L'exemple chiffré
Valeurs utilisées dans ce cas (des exemples, pas des mesures) :
- Couleur du texte (hexadécimal) : « #FFFFFF »
- Couleur du fond (hexadécimal) : « #3B82F6 »
- Rapport de contraste
- 3,67 : 1
- AA, texte normal (4,5 : 1)
- Échoué
- AA, grand texte (3 : 1)
- Réussi
- AAA, texte normal (7 : 1)
- Échoué
- AAA, grand texte (4,5 : 1)
- Échoué
- Éléments d'interface (3 : 1)
- Réussi
Modifiez les champs ci-dessus pour adapter le calcul à votre situation : le résultat se met à jour tout de suite.
Comment ça se calcule
Chaque canal est converti en valeur linéaire, puis la luminance relative vaut 0,2126 R + 0,7152 V + 0,0722 B. Le rapport est (L1 + 0,05) / (L2 + 0,05), L1 étant la plus claire des deux. Les seuils des WCAG sont 4,5 pour un texte normal en AA, 3 pour un grand texte et 7 pour un texte normal en AAA.
Les résultats sont fournis à titre indicatif, sans valeur de conseil juridique, fiscal ou financier.