Hilfe:SELFHTML-Farbtabelle
Die SELFHTML-Farbtabelle ist die Ausgangslage für das Erscheinungsbild von SELFHTML.
Inhaltsverzeichnis
Grundfarben[Bearbeiten]
Die SELFHTML-Farbpalette besteht aus vier Grundfarben:
Farbe | Farbwert | Verwendung | Beispiel | Kontrast |
---|---|---|---|---|
gelb | #dfac20 hsl(44, 75%, 50%) |
selfhtml-Logo, Quelltextbeispiele | background-color: #dfac20; background-color: #dfac20; |
2.09:1 6.05:1 |
grün | #8db243 hsl(80, 45%, 48%) |
Suche auf Startseite, Hinweis, Empfehlung | background-color: #8db243; color:white; | 2.45:1 |
rot | #c32e04 hsl(13, 96%, 39%) |
Achtung, Beachten, Löschen | background-color: #c32e04; color:white; | 5.66:1 |
blau | #306f91 hsl(201, 50%, 38%) |
selfhtml-Logo, ToDo, Fortsetzung | 5.55:1 |
Farbtöne[Bearbeiten]
Durch eine Abstufung der Helligkeit lassen sich aus diesen vier Grundfarben weitere Farbtöne erstellen, die für Hintergründe und andere Dekorationen wie Rahmen und Unterstreichungen verwendet werden.
Farbe | Farbwert | Verwendung | Beispiel | Kontrast |
---|---|---|---|---|
gelb | #dfac20 hsl(44, 75%, 50%) |
selfhtml-Logo, Quelltextbeispiele | background-color: #dfac20; background-color: #dfac20; |
2.09:1 6.05:1 |
lichtes gelb | hsla(44, 75%, 50%,.1) | selfhtml-Logo, Quelltextbeispiele | background-color: #fdfcf3; Linktext |
6.05:1 5.36:1 |
grün | #8db243 hsl(80, 45%, 48%) |
Suche auf Startseite, Hinweis, Empfehlung | background-color: #8db243; color:white; | 2.45:1 |
lichtes grün | hsla(80, 45%, 48%,.2) | background-color: #ebf5d7; border: #8db243 | 5.16:1 | |
rot | rgba(195, 46, 4, 1) hsl(13, 96%, 39%) |
Achtung, Beachten, Löschen | background-color: #c32e04; color:white; | 5.66:1 |
lichtes rot | hsla(13, 96%, 39%,.1) | background-color: #ffebe6; border: #c32e04 | 11.00:1 | |
blau | #306f91 hsl(201, 50%, 38%) |
selfhtml-Logo, ToDo, Fortsetzung | 5.55:1 | |
lichtes blau | hsla(201, 50%, 38%,.1) | background-color: #e6f2f7; border: #3983ab | 11.08:1 | |
schwarz | #333 hsl(0, 0%, 20%) |
Schriften, allgemein | Schriften, allgemein | 12.63:1 |
dunkles blaugrau | #5d7380 hsl(202, 16%, 45%) |
.autor a (Forum)
|
4.97:1 | |
blaugrau | hsla(202, 16%, 45%,.75) | selfhtml-Logo, Info, Autor (Forum) | Die Energie des Verstehens | 2.81:1 |
stimmt noch nicht | hsla(202, 16%, 45%, .5) | selfhtml-Logo, spitze Klammern | <!selfhtml/> | [1.84:1] |
helles graublau | #c4d4da hsl(196, 23%, 81%) |
Strich, 2px | Strich, helles graublau, 2px | |
lichtes blaugrau | hsla(202, 16%, 45%, .2) | background-color: #e4ebf2; border: #8a9da8 | 10.51:1 |
Farbschema mit ausreichenden Kontrasten[Bearbeiten]
Ausgangslage[Bearbeiten]
Die derzeit 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.
Grundsätzlich sollten Links durch mehrere Merkmale erkennbar sein, was gerade bei den Vorlagen mit den farbigen Hintergründen nicht eingehalten wurde. (Siehe Übersichtsseite: Hilfe:SELFHTML-Boxen)
mögl: Lösung[Bearbeiten]
Könnte man den zum SELF-Farbschema passenden Blauton hsl(201, 50%, 45%) nicht soweit verdunkeln, dass er
- weiterhin ins Farbschema passt
- auch bei farbigen Hintergründen ausreichende Kontraste hat.
Nach einigem Experimentieren bin ich auf diesen Blauton hsl(201, 50%, 40%) gestoßen, den ich ab jetzt dunkelblau nenne:
Farbe | Farbwert | Beispiel | Kontrast |
---|---|---|---|
weiß | #fff hsl(0, 100%, 100%) |
Linktext | 5.06:1 |
gelb | #dfac20 hsl(44, 75%, 50%) |
Linktext | 2.42:1 FAIL |
lichtes gelb | #fdfcf3 hsl(54, 71%, 97%) |
Linktext | 4.92:1 |
lichtes grün | #ebf5d7 hsl(80, 60%, 90%) |
Linktext | 4.88:1 |
lichtes rot | #ffebe6 hsl(12, 100%, 95%) |
Linktext | 4.88:1 |
lichtes blau | #e6f2f7 hsl(198, 52%, 94%) |
Linktext | 4.83:1 |
lichtes grau | #f1f3f4 hsl(200, 12%, 95%) |
Linktext | 4.95:1 |
lichtes blaugrau | #e4ebf2 hsl(210, 35%, 92%) |
Linktext | 4.59:1 |
Zwischenergebnis: Dieses hsl(201, 50%, 38%) würde für alle Hintergründe ausreichenden Kontrast bieten, außer für das (mittlerweile nicht mehr verwendete) Gelb der Beispiel-Vorlage.
Während der Titel der Hinweis-Vorlage immer gleich bleibt und daher nur pure decoration ist, enthält die Beispiel-Vorlage als einzige Vorlage neben einem individuellen Titel auch Links auf die Live-Beispiele. Dies müsste wohl abweichend vom Grundschema geregelt werden. (Alternativ könnte man die Hinweis-Vorlage analog zur Empfehlungs-Vorlage nur mit grünem Rand realisieren.)
Vergleich der verwendeten Linkfarben[Bearbeiten]
In deser Tabelle sieht man das dunkelblau im Vergleich zur aktuellen Linkfarbe und zum SELF-blau der Farbtabelle.
Farbe | Farbwert | Beispiel | Kontrast |
---|---|---|---|
dunkelblau | #306f91 hsl(201, 50%, 38%) |
Vorschlag, bei dem alle oben aufgeführten Hintergründe passen | 5.55:1 PASS |
#2673bf | #2673bf hsl(210, 67%, 45%) |
aktuelle Linkfarbe im Wiki | 4.90:1 FAIL |
#3481CD | #3481CD hsl(210, 60%, 50%) |
aktuelle Linkfarbe im Forum und Blog | 4.06:1 FAIL |
blau | #3983ab hsl(201, 50%, 45%) |
Linktext in SELF-blau | 4.19:1 FAIL |
KOMPROMISS | #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 |
Kennzeichnungen von Links[Bearbeiten]
Wie oben erwähnt, sollten Links durch mehrere Merkmale gekennzeichnet werden.
Dies trifft im Wiki teilweise zu
bei Textlinks im Fließtext
- aber nicht bei Textlinks in Aufzählungen
- bei externen Links
ToDo (weitere ToDos)
a
, a:visited
und a:hover,a:focus
eine eindeutige Kennzeichnung ermöglicht
--Matthias Scharwies (Diskussion) 09:37, 3. Sep. 2018 (CEST)nicht verwendete Reservefarben[Bearbeiten]
Farbe | Farbwert | Verwendung | Beispiel |
---|---|---|---|
hsl(47, 100%, 53%) #866a00 |
background-color: #e7c157; color: #866a00 | ||
helles gelb | hsl(44, 75%, 62%) #e7c157 |
||
orange | #df6c20 hsl(24, 75%, 50%) |
||
lichtes orange | #ffede0 hsl(25, 100%, 94%) |
background-color: #ffede0; border: #df6c20 | |
dunkelgrün | hsl(85, 100%, 30%) #5a9900 |
||
kühles blau | hsl(222, 62%, 61%) #5c82d9 |
||
lila | #9357b9 hsl(277, 53%, 73%) |
einzige Verwendung: sociallink-Spenden der Landing Page |