Testen Sie Ihre Kontraste!

Wir haben alle diese Farbkombination irgendwo gesehen, die uns dazu gebracht hat zu sagen: „Pfui, wer dachte, das wäre eine gute Idee?“, und das kann besonders beunruhigend sein, wenn wir Benutzern erlauben, ihre eigenen Farben zu wählen, weil sie sich selbst sabotieren können. Einige Plattformen gehen damit um, indem sie die Benutzerfarben auf einen bekannten Satz von Farben beschränken, aber dies schränkt natürlich die Anpassung ein.

Wir sind sowohl bei Benutzerfarben als auch bei unseren eigenen Farben auf dieses Problem gestoßen, was uns zunächst zu Umfragen wie dieser geführt hat:

Das erfordert allerdings Actual People, die nur begrenzt Zeit, Energie usw. haben – und bedeutet auch einen relativ langsamen iterativen Prozess. Es ist gut für eine erste Farbkombination, aber nicht zum Überprüfen der Lesbarkeit . Und es ist definitiv nicht für automatisierte Tests geeignet.

Die gute Nachricht ist, dass ein guter Kontrast quantifizierbar und daher prüfbar und daher korrigierbar ist!

Die Web Content Accessibility Guidelines – WCAG – haben hier Definitionen für guten Kontrast , berechenbar anhand des Kontrastverhältnisses zwischen der relativen Leuchtdichte der beiden Farben.

Das sind viele Worte, aber es ist nicht viel Code!

Kontrast berechnen

In Kotlin sieht die Relative Luminance-Funktion so aus:

/** 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)
}

Laut WCAG ist das absolute Minimum für lesbaren Text ein Verhältnis von 3:1, wobei ein Verhältnis von 4,5:1 ein gutes Verhältnis ist. Mit 20 Codezeilen können Sie also jetzt die Benutzerlesbarkeit testen!

Kontrast fixieren

Da wir jetzt berechnen können, wie „guter Kontrast“ und „schlechter Kontrast“ aussehen, können wir auch vorhandene Farben automatisch korrigieren, um sie in eine bessere Form zu bringen!

Der Weg, den ich dabei ging, ist:

• Nehmen Sie die Grundfarben
• Finden Sie anhand der relativen Leuchtdichte heraus, was heller und was dunkler ist
• Nehmen Sie bei jedem Schritt eine um 5 % hellere Version der hellen Farbe und eine um 5 % dunklere Version der dunklen Farbe, bis Sie eine Farbkombination erreichen, die ein gutes Kontrastverhältnis ergibt
• Schlagen Sie dem Benutzer diese neuen Farben vor

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
        }
    }

Beispiele aus Unciv , wo ich die „Autokorrektur-Farben“ als Feature für Mods implementiert habe

Fazit

Die Farbtheorie scheint immer eine abstrakte Sache zu sein, bei der Menschen, die Komplementärfarben verstehen, einfach magischer sind und ihre Sachen einfach besser aussehen. Aus diesem Grund sind Standards wie die Richtlinien für barrierefreie Webinhalte so wichtig – sie sind so aufgebaut, dass sie von den Menschen verstanden werden, die sie implementieren, was bedeutet, dass selbst jemand, der so unglaublich mittelmäßig in der Benutzeroberfläche ist, wie ich, sie leicht implementieren und das Leben der Benutzer erleichtern kann