Testez vos Contrastes !

Nous avons tous vu cette combinaison de couleurs quelque part qui nous a fait dire « ah, qui a pensé que c'était une bonne idée ? », et cela peut être particulièrement troublant si nous permettons aux utilisateurs de choisir leurs propres couleurs, car ils peuvent se saboter eux-mêmes. Certaines plates-formes gèrent cela en limitant les couleurs de l'utilisateur à un ensemble de couleurs connu, mais cela limite bien sûr la personnalisation.

Nous avons rencontré ce problème à la fois dans les couleurs des utilisateurs et dans nos propres couleurs, ce qui nous a conduit dans un premier temps à des sondages comme celui-ci :

Cela nécessite des personnes réelles, cependant, qui sont limitées en temps, en énergie, etc. - et signifie également un processus itératif relativement lent. C'est bon pour une combinaison de couleurs initiale , mais pas pour vérifier la lisibilité . Et ce n'est certainement pas adapté aux tests automatisés.

La bonne nouvelle est que le Bon Contraste EST Quantifiable, et donc Testable, et donc Réparable !

Les directives pour l'accessibilité du contenu Web - WCAG - ont des définitions pour un bon contraste ici , calculable par le rapport de contraste entre la luminance relative des deux couleurs.

C'est beaucoup de mots, mais ce n'est pas beaucoup de code !

Calcul du contraste

Dans Kotlin, la fonction Relative Luminance ressemble à ceci :

/** All defined by https://www.w3.org/TR/WCAG20/#relativeluminancedef */
fun getRelativeLuminance(color:Color):Double{
   fun getRelativeChannelLuminance(channel:Float):Double =
           if (channel < 0.03928)  channel / 12.92
           else ((channel + 0.055) / 1.055).pow(2.4)

   val R = getRelativeChannelLuminance(color.r)
   val G = getRelativeChannelLuminance(color.g)
   val B = getRelativeChannelLuminance(color.b)

   return 0.2126 * R + 0.7152 * G + 0.0722 * B
}

/** https://www.w3.org/TR/WCAG20/#contrast-ratiodef */
fun getContrastRatio(color1:Color, color2:Color): Double { // ratio can range from 1 to 21
   val innerColorLuminance = getRelativeLuminance(color1)
   val outerColorLuminance = getRelativeLuminance(color2)

   return if (innerColorLuminance > outerColorLuminance) (innerColorLuminance + 0.05) / (outerColorLuminance + 0.05)
   else (outerColorLuminance + 0.05) / (innerColorLuminance + 0.05)
}

Selon les WCAG, le minimum pour un texte lisible est un rapport de 3:1, le bon rapport étant de 4,5:1. Ainsi, avec 20 lignes de code, vous pouvez maintenant tester la lisibilité de l'utilisateur !

Fixation du contraste

Puisque nous pouvons maintenant calculer à quoi ressemblent le « bon contraste » et le « mauvais contraste », nous pouvons également corriger automatiquement les couleurs existantes pour les mettre en meilleure forme !

La façon dont j'ai procédé est la suivante :

• Prenez les couleurs de base
• Découvrez en utilisant la luminance relative qui est plus claire et qui est plus sombre
• À chaque étape, prenez une version 5 % plus claire de la couleur vive et une version 5 % plus foncée de la couleur foncée, jusqu'à ce que vous atteigniez une combinaison de couleurs qui donne un bon rapport de contraste.
• Suggérer ces nouvelles couleurs à l'utilisateur

if (constrastRatio < 3) {
    val innerColorLuminance = getRelativeLuminance(color1)
    val outerColorLuminance = getRelativeLuminance(color2)

    val lerpColor1:Color
    val lerpColor2:Color

    if (innerColorLuminance > outerColorLuminance) { // inner is brighter
        lerpColor1 = Color.WHITE
        lerpColor2 = Color.BLACK
    }
    else {
        lerpColor1 = Color.BLACK
        lerpColor2 = Color.WHITE
    }

    var text = "Colors do not contrast enough - combination is unreadable!"

    for (i in 1..10){
        val newColor1 = color1.cpy().lerp(lerpColor1, 0.05f *i)
        val newColor2 = color2.cpy().lerp(lerpColor2, 0.05f *i)

        if (getContrastRatio(newColor1, newColor2) > 3){
            // the "*255" is because users speak in 0–255 RGB, and the library speaks in 0–1 RGB
            text += "\n Suggested inner color: (${(newColor1.r*255).toInt()}, ${(newColor1.g*255).toInt()}, ${(newColor1.b*255).toInt()})"
            text += "\n Suggested outer color: (${(newColor2.r*255).toInt()}, ${(newColor2.g*255).toInt()}, ${(newColor2.b*255).toInt()})"
            break
        }
    }

Exemples tirés de Unciv , où j'ai implémenté les "couleurs de correction automatique" comme fonctionnalité pour les mods

Conclusion

La théorie des couleurs semble toujours être une chose abstraite où les gens qui comprennent les couleurs complémentaires sont juste plus magiques et leurs trucs ont l'air mieux. C'est pourquoi des normes telles que les directives pour l'accessibilité du contenu Web sont si importantes - elles sont conçues pour être comprises par les personnes qui les mettent en œuvre, ce qui signifie que même quelqu'un d'aussi incroyablement médiocre en matière d'interface utilisateur que moi peut facilement les mettre en œuvre et faciliter la vie des utilisateurs.