Hilfe:SELFHTML-Farbtabelle

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

Grundfarben

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

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

Ausgangslage

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

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

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

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)

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

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

• Hilfe:SELFHTML-Logos
• Hilfe:SELFHTML-Boxen