Ich bin mir bewusst, dass die manuelle Auswahl basierend auf menschlichem Urteilsvermögen einen heuristischen Algorithmus für solche Dinge immer übertrumpfen wird ... leider ist das nicht wirklich eine Option. :)
Wie könnte also ein Algorithmus bei einer bestimmten Hintergrundfarbe feststellen, ob weißer Text eine schlechte Wahl zum Überlagern ist (die Alternative wäre schwarz)? Zum Beispiel ist weißer Text auf #F44444 perfekt lesbar, aber weißer Text auf #FBBBBB ist ein Kampf!
Ich kann mir vorstellen, dass es etwas mit der Darstellung der Farbe in einem Modell wie HSL zu tun haben wird? Und dann prüfen, ob Sättigung und/oder Helligkeit bestimmten Bedingungen entsprechen?
Ein Großteil Ihrer Arbeit ist bereits für Sie erledigt, wenn nicht alle.
Das World Wide Web Consortium (w3) veröffentlicht Richtlinien für die Zugänglichkeit von Webinhalten. Ihre Empfehlungen definieren je nach Textgröße und Relevanz drei verschiedene Stufen der Farbkontrastkonformität. Hierfür steht ein Colour-Contrast-Analyzer zur Verfügung.
Es empfiehlt:
Kontrast (Minimum): Die visuelle Darstellung von Text hat ein Kontrastverhältnis von mindestens 4,5:1, außer bei großem Text (18pt.+) mindestens 3:1
Kontrastverhältnis (von w3.org/TR/WCAG20/#contrast-ratiodef)
(L1 + 0,05) / (L2 + 0,05), wobei
relative Luminanz (von w3.org/TR/WCAG20/#relativeluminancedef)
die relative Helligkeit eines beliebigen Punktes in einem Farbraum, normalisiert auf 0 für das dunkelste Schwarz und 1 für das hellste Weiß
Hinweis: Für den sRGB-Farbraum ist die relative Leuchtdichte einer Farbe definiert als
L = 0,2126 * R + 0,7152 * G + 0,0722 * B,
wobei R, G und B wie folgt definiert sind:
wenn RsRGB <= 0,03928 dann R = RsRGB/12,92 sonst R = ((RsRGB+0,055)/1,055) ^ 2.4
wenn GsRGB <= 0,03928 dann G = GsRGB/12,92 sonst G = ((GsRGB+0,055)/1,055) ^ 2.4
wenn BsRGB <= 0,03928 dann B = BsRGB/12,92 sonst B = ((BsRGB+0,055)/1,055) ^ 2.4
und RsRGB, GsRGB und BsRGB sind definiert als:
RSRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
Das Zeichen „^“ ist der Potenzierungsoperator. (Formel entnommen aus [sRGB] und [IEC-4WD]).
Die w3-Empfehlungen definieren drei Konformitätsstufen zu ihren Richtlinien. Priorität 1, 2 und 3. Ihre 2.0-Farbkontrastalgorithmen verwenden zwei davon – Priorität 2 (AA) und Priorität 3 (AAA). Ob Sie eine AAA-Konformität erreichen müssen oder nicht, hängt von Ihrer Zielgruppe ab. Lesen Sie mehr dazu auf der w3-Website. Bei großem Text (über 18 Punkte) beträgt das Kontrastverhältnis für AA 3:1 und für AAA 5:1. Bei kleinem Text ist es 5:1 für AA und 7:1 für AAA.
Weitere Informationen zu Barrierefreiheit und Konformität finden Sie unter:
Web Content Accessibility Guidelines 2.0
Weitere Informationen zu Kontrast (Minimum); insbesondere die Verständnisrichtlinien SC 1.4.3 Visuelle Darstellung von Text und Bildern von Text… finden Sie unter
Verständnis SC 1.4.3
Mein Ansatz wäre, die Hintergrundfarbe zunächst in ihr Graustufenäquivalent umzuwandeln. Wenn der Helligkeitswert (auf einer Skala von 0-100%) davon "zu nah" an Weiß liegt, sollte die Textfarbe zu Schwarz wechseln. "Zu nah" ist etwas subjektiv, aber ich würde den Test mit 65 % Helligkeit beginnen, um den Wechsel zu schwarzem Text auszulösen. Weißer Text sollte auf einer Hintergrundfarbe mit einem dunkleren konvertierten Helligkeitswert lesbar sein. Viel Glück!
Stan
Klasse
Stan
Stan