CSS-Quiz · Runde 1
CSS-Quiz: Farben und Hintergründe – Teil 1
9 Fragen zu Farben und Hintergründe in CSS 2.1. Jede Antwort wird sofort bewertet und erklärt; das Ergebnis erscheint am Ende der Seite.
Wie viele Farben CSS benennt
CSS 2.1 definiert siebzehn Farbnamen. Sie stammen aus der Palette einer frühen Bedienoberfläche und decken die Grundfarben in je einer gedämpften und einer kräftigen Variante ab. Später sind rund hundertvierzig weitere hinzugekommen, die aus einer Farbliste des Fenstersystems eines Betriebssystems übernommen wurden – daher die eigentümlichen Namen von Papayapeitsche bis Zwetschge.
Die Zahl der Namen ist für die Praxis unwichtig, weil die Namen selbst unpraktisch sind: Sie lassen sich nicht abstufen, nicht berechnen und nicht in ein Farbschema einpassen. Als Merkposten in einem Beispiel sind sie unschlagbar, in einem Stylesheet fast immer die falsche Wahl.
Die Zahl der darstellbaren Farben ist eine andere Frage. Mit drei Kanälen zu je 256 Stufen sind es rund 16,7 Millionen, und das war lange die Obergrenze. Spätere Farbräume haben sie überschritten: Angaben in einem größeren Farbraum können Töne beschreiben, die in der klassischen Notation nicht darstellbar sind – ob sie sichtbar werden, hängt am Bildschirm.
Warum Vordergrund und Hintergrund zusammen gehören
Die Empfehlung, beide immer gemeinsam zu setzen, ist keine Stilfrage, sondern eine Folge der Kaskade. Beide Eigenschaften sind voneinander unabhängig, und beide können aus verschiedenen Quellen stammen: die eine aus dem eigenen Stylesheet, die andere aus dem Vorgabe-Stylesheet oder aus einer Einstellung des Nutzers. Wer nur eine von beiden setzt, überlässt die andere dem Zufall – und dunkelgrauer Text auf dunkelgrauem Grund ist ein Ergebnis, das niemand entworfen hat.
Besonders greifbar wird das bei Nutzern, die ein eigenes Farbschema erzwingen, und bei der Darstellung in einem dunklen Modus. Eine gesetzte Textfarbe ohne gesetzte Hintergrundfarbe kann dort unlesbar werden, obwohl sie im Entwurf gut aussah.
Die Vordergrundfarbe wird vererbt, jede Hintergrundangabe nicht. Das ist ebenfalls Absicht: Ein geerbter Hintergrund würde jedes Kind übermalen und die Schichtung unmöglich machen, während eine geerbte Textfarbe genau das tut, was man erwartet. Deshalb genügt eine Angabe der Textfarbe weit oben, während der Hintergrund an jeder Box eigens gesetzt werden muss, an der er erscheinen soll.
Die websicheren Farben und was aus ihnen wurde
Farben, deren drei Kanäle ausschließlich die Werte 00, 33, 66, 99, CC und FF annehmen, hießen websicher. Die Regel entstand, weil Bildschirme mit einer Palette von 256 Farben arbeiteten und die Browser alles andere gerastert annäherten – ein sichtbares Punktmuster statt einer Fläche. Aus sechs Stufen je Kanal ergeben sich 216 Farben, die auf jedem dieser Systeme unverändert dargestellt wurden.
Diese Einschränkung ist seit langem gegenstandslos: Jeder heutige Bildschirm stellt Millionen Farben dar. Geblieben ist die dreistellige Kurzschreibweise, in der jede Stelle verdoppelt wird – sie ist praktisch, aber kein Beleg für Websicherheit, und aus ihr lässt sich die Palette auch nicht ableiten.
Was heute an die Stelle der Frage getreten ist, ist der Kontrast. Ob zwei Farben nebeneinander funktionieren, entscheidet nicht ihre Darstellbarkeit, sondern ihr Helligkeitsverhältnis – und dafür nennen die Richtlinien zur Zugänglichkeit prüfbare Grenzwerte. Eine Farbe ist damit nicht mehr sicher oder unsicher, sondern für eine Textgröße ausreichend kontrastreich oder eben nicht.
Woher der Ausgangswert der Textfarbe kommt
Anders als bei den meisten Eigenschaften ist der Ausgangswert der Vordergrundfarbe in CSS 2.1 nicht festgelegt – die Spezifikation überlässt ihn dem Browser. Praktisch ist es Schwarz, aber verlassen kann man sich darauf nicht: Ein Nutzer kann in seinen Einstellungen eine andere Grundfarbe wählen, und ein Browser mit dunkler Oberfläche kann eine hellere Vorgabe mitbringen.
Damit ist eine Regel wieder da, die weiter oben schon aus einem anderen Grund galt: Vordergrund und Hintergrund gehören zusammen gesetzt. Wer nur den Hintergrund auf Weiß setzt und die Textfarbe der Vorgabe überlässt, hat auf einem System mit heller Vorgabeschrift weiß auf weiß.
Die Farbe der Verweise kommt nicht von dieser Eigenschaft, sondern aus dem Vorgabe-Stylesheet, das sie ausdrücklich setzt. Deshalb erbt ein Verweis die Textfarbe seiner Umgebung nicht – nicht weil die Vererbung nicht griffe, sondern weil eine Regel am Element selbst ansetzt und die Vererbung damit außen vor ist.
Zum Nachlesen: Der Grundlagenartikel zu den Farbwerten geht die Notationen im Einzelnen durch, und die Kapitelseite der Schnellreferenz stellt die sechs Eigenschaften mit ihren Ausgangswerten nebeneinander.
Ein letzter Punkt, der in keiner Frage vorkommt und im Alltag zählt: Farbe allein darf nie der einzige Träger einer Information sein. Ein rot markierter Pflichtfehler in einem Formular, eine grün markierte Zeile in einer Liste – wer Farben schlecht unterscheidet, sieht dort nichts. Ein zweites Merkmal, ein Symbol oder ein Wort, kostet nichts und macht die Aussage für alle lesbar.