Farben und Einheiten

Hellgrauer Text in #bbbbbb auf Weiß hat ein Kontrastverhältnis von 1.92 zu 1. Die WCAG verlangen für normalen Text mindestens 4.5 zu 1.

Wie man eine Farbe schreibt

CSS akzeptiert Farben in mehreren Schreibweisen, und alle laufen auf dasselbe hinaus: Anteile von rotem, grünem und blauem Licht auf dem Bildschirm. Farbnamen wie red, navy oder rebeccapurple sind gut lesbar, aber begrenzt. Die Hex-Schreibweise gibt Rot, Grün und Blau mit je zwei Hexadezimalziffern an, von 00 bis ff (0 bis 255): #1a5fb4 ist 26 Rot, 95 Grün und 180 Blau, ein mittleres Blau. rgb(26 95 180) sagt dasselbe im Dezimalsystem. hsl(210 80% 40%) beschreibt eine Farbe über Farbton (einen Winkel auf dem Farbkreis, wobei 0 Rot ist, 120 Grün und 240 Blau), Sättigung und Helligkeit. So bekommt man leicht einen helleren oder dunkleren Ton derselben Farbe, indem man eine einzige Zahl ändert.

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

Ein vierter Wert nach einem Schrägstrich setzt den Alphakanal: rgb(0 0 0 / 50%) ist Schwarz mit halber Deckkraft, sodass durchscheint, was dahinter liegt. color setzt die Textfarbe, background-color die Füllung hinter einem Element und border-color seinen Rahmen. Das Schlüsselwort currentColor steht für die Textfarbe des Elements. Das ist praktisch für Icons und Rahmen, die zum Text passen sollen.

Kontrast ist keine Kür

Text, dessen Helligkeit zu nah an der des Hintergrunds liegt, ist für viele Menschen schwer lesbar: für Menschen mit Sehbehinderung, für ältere Leserinnen und Leser und für alle, die ihr Handy in der Sonne lesen. Die WCAG 2.2, die Barrierefreiheitsrichtlinien des W3C, messen das als Kontrastverhältnis von 1 zu 1 (kein Unterschied) bis 21 zu 1 (Schwarz auf Weiß). Erfolgskriterium 1.4.3 verlangt mindestens 4.5 zu 1 für normalen Text und 3 zu 1 für großen Text, den die WCAG als mindestens 18 Punkt oder 14 Punkt fett definieren. Dunkelgrau #767676 auf Weiß besteht mit 4.54 zu 1 gerade so, #777777 fällt mit 4.48 knapp durch. Die Entwicklerwerkzeuge des Browsers zeigen das Verhältnis an, wenn du ein Textelement untersuchst. Raten musst du also nicht.

Farbe darf auch nie der einzige Weg sein, eine Information zu zeigen. Ein Formular, das Fehler nur durch einen roten Rahmen markiert, schließt alle aus, die Rot schlecht sehen. Füg zusätzlich eine Meldung oder ein Icon hinzu.

Absolute und relative Einheiten

Längen brauchen eine Einheit, außer bei null. px ist das CSS-Pixel, eine feste Einheit. Auf Bildschirmen mit hoher Pixeldichte deckt ein CSS-Pixel mehrere physische Pixel ab, so wirkt es fürs Auge ungefähr gleich groß. Relative Einheiten wachsen mit etwas anderem mit. em bezieht sich auf die eigene Schriftgröße des Elements, also sind padding: 0.5em bei 20 Pixel großem Text 10 Pixel. rem bezieht sich auf die Schriftgröße der Wurzel (html). Die beträgt im Browser 16 Pixel, solange die Leserin oder der Leser sie nicht geändert hat, also sind 1.25rem normalerweise 20 Pixel. % bezieht sich auf das Elternelement, meist auf dessen Breite. vw und vh sind Hundertstel der Breite und Höhe des Viewports, und ch ist ungefähr so breit wie die Ziffer Null in der aktuellen Schrift.

Was nimmt man wann? Schriftgrößen in rem respektieren die Leserschaft: Stellt jemand im Browser größere Schrift ein, wächst alles in rem mit, während Text mit fester px-Größe das vielleicht nicht tut. Innenabstand in em wächst mit dem Text, den er umgibt. Pixel passen für Dinge, die nicht mitwachsen sollen, etwa einen Rahmen von 1 Pixel.