Hilfe:SELFHTML-Farbtabelle

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die SELFHTML-Farbtabelle ist die Ausgangslage für das Erscheinungsbild von SELFHTML.


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%, 38%) gestoßen, den ich ab jetzt dunkelblau nenne:

Farbe Farbwert Beispiel Kontrast
weiß #fff
hsl(0, 100%, 100%) 		Linktext 5.55:1
gelb #dfac20
hsl(44, 75%, 50%) 		Linktext 2.64:1
FAIL
lichtes gelb #fdfcf3
hsl(54, 71%, 97%) 		Linktext 5.36: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
dunkelblau #306f91
hsl(201, 50%, 38%) 		Vorschlag, bei dem alle oben aufgeführten Hintergründe passen 5.55:1
PASS
orange #df6c20
a:hover im Wiki 3.33:1
WTF ?

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

ToDo (weitere ToDos)

Entwickeln eines Farbschemas, das ausreichende Kontraste erzielt und für 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

Siehe auch[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Hilfe:SELFHTML-Farbtabelle&oldid=64421“