Matthias Scharwies: Oranger Text auf weißem Grund?

Weblog

Oranger Text auf weißem Grund?

Matthias Scharwies E-Mail-Adresse des Autors
+1 Informationen zu den Bewertungsregeln

Teil 2 unserer Makeover-Serie

Die bis 2022 im SELF-Wiki verwendete Linkfarbe #2673bf hat auf weißem Hintergrund einen Kontrast von 4.90:1, was für großen Text ausreicht, für kleinen Fließtext jedoch nicht akzeptiert werden kann. Auf farbigen Hintergünden ist der Kontrast noch schlechter.

Als das CSS untersucht wurde, fiel auf, dass die Farbe der Linktexte bei :hover zu orange (auf weiß! - Kontrast 3.33:1) wechselte.

Vergleich der bisher verwendeten Linkfarben

In dieser Tabelle sieht man das alte dunkelblau und weitere Farbvarianten im Vergleich zur aktuellen Linkfarbe und zum SELF-blau der Farbtabelle. [1]

Farbe Beispiel Kontrast
#2673bf
hsl(210 67% 45%) 		aktuelle Linkfarbe im Wiki 4.90:1
FAIL
#3481CD
hsl(210 60% 50%) 		aktuelle Linkfarbe im Forum und Blog 4.06:1
FAIL
ehemaliges SELF-Blau
#3983ab
hsl(201 50% 45%) 		Linktext in SELF-blau 4.19:1
FAIL
neues SELF-Blau
#337599
hsl(201 50% 40%) 		Vorschlag, bei dem alle oben aufgeführten Hintergründe passen 5.06:1
PASS
visited
#24219d
bisheriges visited im Wiki 11.8:1
PASS
orange
#df6c20
a:hover im Wiki 3.33:1
WTF ?
rot-braun
#990909
a:hover im Wiki (in Navigationen) 8.75:1
PASS

Höchste Zeit unser Farbkonzept zu überprüfen und zu verbessern!

unsere SELF-Farbpalette

... wurde 2010 von schuer aus dem gekauften Waipoua-Theme für den Wordpress-Blog entwickelt und 2012-2014 von performer für die ganze SELF-Welt angepasst:

Die SELF-Farbpalette besteht aus je 4 Grund- und Pastelltönen, die die 0.1fache Deckung des Grundtons haben, (Ausnahme ist hellgrün mit 0.2)

  • müssen in hex oder rgb() ohne Alphakanal umgerechnet werden, damit dunkler Hintergrund nicht durchscheint.
  • die blaue Linkfarbe hat aber besonders bei Pastellhintergründen nicht genug Kontrast
    → 2 Alternativen:
    • dunklere Linkfarbe oder
    • Verzicht auf farbigen Hintergrund!

Diese Farbpalette wurde so erweitert, dass sie überall ausreichende Kontraste erzielt und auch im Dunklen Modus noch ganz gut aussieht!

Grundsätzlich sollten Links durch mehrere Merkmale erkennbar sein, was gerade bei den Vorlagen mit den farbigen Hintergründen nicht eingehalten wurde. Im Fließtext sind Links durch die blaue Linkfarbe und Unterstreichung erkennbar. [2] Bei :hover und :focus kommt hellblauer Hintergrund dazu.

Blog-Serie zum Makeover 2022

  1. Makeover für das SELF-Wiki
  2. Oranger Text auf weißem Grund?
  3. Icons und Grafiken

  1. Ist ihnen aufgefallen, dass die hsl()-Funktionen ohne Komma notiert wurden? - Normalerweise werden mehrere Werte in CSS durch Leerzeichen getrennt. Dies wurde nun vom W3C vereinheitlicht.
    SELF-Wiki: Farbmodelle ↩︎

  2. Textlinks in Aufzählungen wie in der Sidebar oder auf den Inhaltsverzeichnissen der Portalseiten werden nur durch die Linkfarbe gekennzeichnet. Dies wird auch vom W3C z. B. hier so gehandhabt. ↩︎

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
+1
Informationen zu den Bewertungsregeln

  1. Oranger Text auf weißem Grund?

    Robert B.
    +2 Informationen zu den Bewertungsregeln

    Den Beitrag muss man sich allein schon wegen des Links zu diesem Kontrast-Checker speichern, vielen Dank für den Hinweis!

    Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
    +2
    Informationen zu den Bewertungsregeln