Farben & Kontrast
Farben werden je nach Zweck unterschiedlich angegeben. Und damit Text gut lesbar ist, braucht er genug Kontrast zum Hintergrund.
Stand: Oktober 2026 · werkzeugkisterl.at/spickzettel/farben-kontrast
Für ein PDF im Druckfenster „Als PDF speichern“ wählen.
Farbangaben
| Schreibweise | Beispiel | Verwendung |
|---|---|---|
| HEX | #F59E0B | Web, Grafikprogramme; je zwei Stellen für Rot, Grün, Blau |
| HEX kurz | #FA0 | entspricht #FFAA00 |
| HEX mit Deckkraft | #F59E0B80 | die letzten zwei Stellen: 80 ≈ 50 % |
| RGB | rgb(245 158 11) | Rot, Grün, Blau je 0–255 |
| HSL | hsl(38 92% 50%) | Farbton, Sättigung, Helligkeit – gut zum Abstufen |
| OKLCH | oklch(77% 0.19 70) | gleichmäßig wahrgenommene Helligkeit, modernes CSS |
| CMYK | 0 / 36 / 96 / 4 | Druck: Cyan, Magenta, Gelb, Schwarz in % |
Kontrast nach WCAG
Großer Text: ab 24 px, fett ab 18,5 px. Kontrast reicht von 1:1 (gleiche Farbe) bis 21:1 (Schwarz auf Weiß).
| Was | Stufe AA (Mindestmaß) | Stufe AAA (erhöht) |
|---|---|---|
| Normaler Text | 4,5 : 1 | 7 : 1 |
| Großer Text | 3 : 1 | 4,5 : 1 |
| Bedienelemente und Grafiken | 3 : 1 | – |
Beispiele auf Weiß
| Textfarbe | Kontrast | Ergebnis |
|---|---|---|
| #000000 | 21 : 1 | besteht AAA |
| #595959 | 7 : 1 | besteht AAA |
| #767676 | 4,5 : 1 | gerade noch AA – hellstes Grau für normalen Text |
| #999999 | 2,8 : 1 | zu schwach für Text |
Gut zu wissen
- Farbe nie als einziges Merkmal verwenden: Etwa jeder zwölfte Mann sieht Rot und Grün schlecht. Zusätzlich Text, Symbol oder Muster nutzen.
- Bildschirme mischen Licht (RGB), Drucker Farbe (CMYK). Kräftige Bildschirmfarben wirken im Druck oft blasser – vorher einen Probedruck machen.
Sorgfältig zusammengestellt, aber ohne Gewähr. Mehr dazu in den Nutzungshinweisen. Fehlt etwas oder ist dir ein Fehler aufgefallen? Wir freuen uns über dein Feedback.