Hauptfarbe und Menüfarbe
des Templates seiten-individuell abwandeln
Die Farben des gesamten Templates (also die generellen Vorgaben für alle Seiten und alle Farbdeklarationen) können über die Bearbeitung der colordefinition.css eingestellt werden.
Die nachstehend beschriebenen Einstellungen gelten jeweils genau nur für die Seite, bei deren Bearbeitung sie eingestellt werden.
Werden die Farbwerte "von Hand", also per Tastatur eingegeben und nicht über den Farbwähler, erfolgt keine Plausibilitätskontrolle. Das bedeutet: Eine unsinnige Eingabe erzeugt eine manchmal unvorhersehbare Farbe. Fast immer führt eine unsinnige Farbfestlegung zum gleichen Ergebnis als hätte man '#000000' eingegeben.
Um die Template-Haupt-Farbe zu ändern, klickt man in das Farbwählfeld und gibt entweder den HEX-Wert (z.B.: #DEC45D) ein oder benutzt das Auswahlfeld:
Weil die Schrift in der Navigationszeile (Brotkrümel-Navi, zuletzt geändert, Schriftgröße, Suche und Sprachumschaltung) und im Menü immer weiß ist, muss, um ausreichend Kontrast zu haben, der Hintergrund wahrnehmbar dunkler sein.
Da sich beim Farbwählfeld der gültige Farbraum nicht begrenzen lässt, wird im Template eine Korrektur vorgenommen, wenn der maximale Helligkeitswert einer Farbe überschritten wird. Als maximal erlaubter Helligkeitswert jeder Einzelfarbe (rot, grün, blau) wurde willkürlich #DD festgelegt.
Wird also z.B. #ffa500 eingegeben, kommt tatsächlich #dda500 zur Anwendung. Wenn es zu einer Abweichung von gewählter Farbe zu angezeigter Farbe kommt, dann liegt die Ursache in dieser Begrenzung der Einzelfarbe auf maximal #DD.
Um die Menü-Hintergrund-Hover-Farbe zu ändern, klickt man in das entsprechende Farbwählfeld und gibt entweder den HEX-Wert (z.B.: #daa520) ein oder benutzt das Auswahlfeld.
Wollen Sie exakt die gleiche Farbe wie die Template-Haupt-Farbe wählen, dann geben Sie als Farbwert '---' oder '#---' ein. Das Template erkennt dies, als Anweisung die gleiche Farbe wie für die Template-Haupt-Farbe zu nehmen. Falls bei der Haupt-Farbe eine Korrektur notwendig war, wird diese auch hier vorgenommen.
Bei der Menü-Hintegrund-Hover-Farbe wird die Farbe festgelegt, die erscheint, wenn die Maus über einen nicht aktiven Menüpunkt gestellt wird. Die übrigen nicht aktiven Menüpunkte haben eine Hintergrundfarbe, bei der jede der RGB-Einzelfarben um den Wert #22 dunkler ist als bei der Hover-Farbe.
Die Farbe des aktiven Menüpunktes ist nocheinmal bei jeder RGB-Einzelfarbe um #22 dunkler. Die Hover-Farbe ist also um #444444 heller als die Farbe der aktiven Menüpunkte.
Daraus folgt natürlich auch, dass die Menü-Hintergrund-Hover-Farbe mindestens die Helligkeit #444444 haben muss!
Wird eine geringere Helligkeit definiert, hebt das Template diese automatisch an.
Auch hier gilt wegen der weißen Schrift die Begrenzung auf eine maximale Helligkeit von #DDDDDD.
Color Contrast Analyser Portable
Der „Colour Contrast Analyser Portable” ermöglicht Ihnen, Probleme beim Farb-Text-Kontrast einer Webseite unter WCAG 2-Anforderungen zu analysieren. Unter verschiedenen Kriterien wie Grün-, Rot- oder Blaublindheit können Ihnen Fotos, partiell oder ganze Internetseiten sowie PDF-Dokumente simuliert werden. Als Ergebnis wird Ihnen angezeigt, ob die Konformitätsstufe und das Kontrastverhältnis von Vorder- und Hintergrund stimmt. Diese portable Version der Software starten Sie ohne Installation von einem USB-Stick.
https://www.computerbild.de/download/Colour-Contrast-Analyser-Portable-16435897.html
Gerade am Anfang der Farbgestaltung einer Website kommt es immer wieder dazu, dass man am eigenen Bildschirm Farb-Kombinationen wählt, die unter kritischer Betrachtung als suboptimal eingestuft werden.
Um solche vermeidbaren Fehler zu minimieren, sind Werkzeuge wie der Color Contrast Analyser sehr nützlich.