Farben der Website – und Suche nach einer Hervorhebung für Zitate
Logo vom Rosenpark
Im Logo (der Rosenseiten) ist die Schriftfarbe Richtung eines (leuchtenden) Bordeauxrot (Hexadezimal: #993366; rgb(153, 51, 102);).
Diese Farbe (schon im Logo vor 2010) nahm ich für die Überschriften, die Sie hier sehen, sodann für die Kennzeichnung geöffneter Seiten im Menü.
Die Hintergrundfarbe schwankt immer mal wieder zwischen zwei leicht gebrochenen Weißtönen: #fefefe; oder #fdfdfd;
Rein weißer Hintergrund ist wohl sehr grell, mehr „Hintergrundfarbe“ als ein gebrochenes Weiß aber will ich als Grundfarbe nicht.
Die Schriftfarbe ist ein leicht aufgehelltes Schwarz, wie Sie es jetzt sehen: #222222; (#333; ist mir schon zu blass, und rein schwarz zu dunkel, verrückt!).
Die Farbe der Links
Logo Gestaltung
In 2013 und folgend war sie blue – nach dem Vorbild Tim Berner Lee …
Sodann über Jahre ein helleres, gedämpftes Blau: #3377bb; (von dieser Farbe hieß es, sie werde gerne gesehen und als Link wahrgenommen). Dieses Blau füllt bis heute das (transparente) Logo der Gestaltungsseiten.
Diese Farbe aber ist nicht barrierefrei – insbesondere die Sehschwäche für Blau betreffend.
Wechselte also zu dieser Farbe für Links: #0060a6; – die liegt im Farbschema der Überschriften, erzeugt keinen Bruch im Design, da sehr ähnlich der alten Linkfarbe – aber funktioniert auch bei einer Blausehschwäche.
Diese Link-Farbe sehen Sie jetzt auf der Website.
Früh kam die Entscheidung dazu, externe Links deutlich zu kennzeichnen … die http-Adresse im Fließtext mit aufzunehmen finde ich für mich selbst sehr hilfreich, wenngleich es gehäuft in Fließtexten manchmal etwas stören mag …
Beispiele finden Sie unten in der Linkliste …
Zwischenfazit
- Farbschema für mich zufriedenstellend abgearbeitet für
- Hintergrundfarbe,
- Schriftfarbe (und Serife) im Fließtext,
- für Überschriften
- sowie für Links
Zitate
Ein Zitat sollte kenntlich sein.
Die Browser rücken Zitatblöcke zum Beispiel deutlich ein und setzen die passenden Anführungszeichen auch in Fließtexten (je nach Sprachauszeichnung der Website).
Das Einrücken funktioniert gut bei einem längeren Zitat, das halt in einem eigenen Absatz erscheint. Im Fließtext aber gibt es kein Einrücken und die Anführungszeichen gehen doch im Lesefluss eher unter; und manchmal werden ja auch Anführungszeichen für Hervorhebungen anderer Art verwendet.
Also suchte ich nach einer Farbe für Zitate, die ins Farbschema passt und zugleich tauglich ist, um Zitate – insbesondere in Fließtexten – ausreichend hervorzuheben.
Nach gefühlt zwei Dutzend Versuchen kapitulierte ich zu darkslategray als Schriftfarbe und einem hellen Grau als Hintergrundfarbe – eine Übergangslösung.
Barrierefrei war dies nicht! Mindestens die Hintergrundfarbe musste weg … Rahmen um Zitate wollte ich keine, allein in Fließtexten passt das nicht.
Entfernte die Hintergrundfarbe und änderte die Schriftfarbe für Zitate: darkolivegreen (#556b2f), die aber leider auch nicht bei allen Farbtests bezüglich Barrierefreiheit bestand und im Fließtext auch etwas „schwach auf der Brust“ erschien (wie Sie sehen).
Zudem wollte ich in keinen Fällen Richtung „Gärtner-Grün“, so von wegen, Grün und Rot gehörten doch zu einer Rosenseite hinzu … NÖ!
Also wieder Richtung alles neu: Farbschema und diverse Farben ausprobiert, ob sie im Fließtext gut erkennbar sind, ob sie mir gefallen, ob sie Hürden für Nutzer bedeuten …
Herausgekommen ist: #715600; – meine Schriftfarbe für Zitate.
Ich könnte auch spöttisch einen eigenen Gedanken dazu zitieren:
Fazit
Dieser ganze Text ist für Sie vermutlich weniger interessant (aber für mich gut).
Für Sie gibt es eine kleine Liste mit hilfreichen Links rund um Farben im Web, rund um Farben und Bewegungen auf Websites: [*]
- SELFHTML – eigentlich in allen Fragen rund ums Web hilfreich. Hier über das Thema
Farben und Kontraste
. - MDN – Mozilla
Ziel dieses open-source-Projektes (übersetzt aus dem Englischen):
Entwickler weltweit zu befähigen, ein besseres, offenes Web aufzubauen
.Auch in deutscher Sprache verfügbar.
Themen unter vielen anderen: Werkzeuge und Test für Barrierefreiheit. Zahlreiche taugliche weiterführende Links, zum Beispiel zu:
- Barrierefreiheit? – die Relevanz von weitgehend von Hürden frei gestalteten Websites am Beispiel verschiedener Einschränkungen: Sehschwächen bis Epilepsie.
- Browser-Entwicklertools – erneut Seite von Mozilla: Browser Firefox zum Beispiel erlaubt eine Überprüfung von Websites über verschiedene Werkzeuge; vorgestellt ebenda.
- HTML: Eine gute Grundlage für Barrierefreiheit – Eine gut mit HTML strukturierte Website ist semantisch aufgebaut und zeigt schon ein barrierefreies (und responsives!) Webdesign … So einige Akteure des Webdesigns könnten sich diese Weisheit durchaus erneut zu Gemüte führen …
- WebAIM – Contrast Checker – liefert sofort Ergebnisse über ausgewählte Farben bezüglich ausreichendem Kontrast.
- WAVE (Web Accessibility Evaluation Tools) – nach Eingabe einer Webadresse wird die gesamte Website bezüglich Barrierefreiheit untersucht; Ergebnisse sind hilfreich, um Fehler zu finden.
- mindscreen – kleine Zusammenstellung verschiedener
Tools für barrierefreie Farbkontraste
. - Digitale Barrierefreiheit – ein Informationsportal von Domingos de Oliveira.
Macht auf die Probleme aufmerksam, wenn Barrierefreiheit von Seiten der Seiteninhaber/-innen übertrieben wird (hauseigene Sonderlösungen meiden).