nicht angemeldet
Matthias ScharwiesTeil 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
hexoderrgb()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!
Kennzeichnungen von Links
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
- Makeover für das SELF-Wiki
- Oranger Text auf weißem Grund?
- Icons und Grafiken
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 ↩︎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. ↩︎