Prüfe den Textkontrast, bevor du deine Farben wählst
Dasselbe Grün, ein anderer Hintergrund und ein anderes Ergebnis. Vier Paare, die du selbst ausprobieren kannst.
Ein Grün, das in einer Palette gut aussieht, kann als kleines Label schwer lesbar sein. Prüfe die Textfarbe zusammen mit ihrem Hintergrund, bevor du sie in einem Design verwendest.
Hier sind vier Kombinationen, die du in Farbstudio nachstellen kannst. Die dritte verwendet exakt dasselbe Grün wie die zweite; nur der Hintergrund ändert sich.
Ein anderer Hintergrund kann den Kontrast zu stark verringern
| Muster | Text / Hintergrund | Kontrastverhältnis |
|---|---|---|
| 1 | #8DAA91 / #FFFFFF |
2.53:1 |
| 2 | #647C66 / #FFFFFF |
4.55:1 |
| 3 | #647C66 / #F3E7CE |
3.71:1 |
| 4 | #4B7051 / #F3E7CE |
4.59:1 |
Muster 2 und 4 bestehen den WCAG-AA-Kontrastschwellenwert für normalen Text. Muster 1 und 3 nicht. Die hier angezeigten Zahlen sind für die Anzeige gerundet; die Prüfungen verwenden die vollständigen berechneten Werte.
Der Wechsel von Weiß zu Creme ließ Muster 2 durchfallen. Das Abdunkeln des Grüns in Muster 4 brachte es wieder über den Schwellenwert. Dies sind Beispielfarben, keine erforderliche Palette für dein Projekt. Lade ihr CSS herunter, um sie in deinem eigenen Layout auszuprobieren.
Prüfe auch die Textgröße
Die Textkontrast-Richtlinie von WCAG legt ein Mindestverhältnis von 4.5:1 für normalen Text auf Stufe AA fest. Großer Text hat einen niedrigeren Schwellenwert von 3:1. „Groß“ bedeutet mindestens 24 CSS-Pixel für regulären Text oder etwa 18.67 CSS-Pixel für fetten Text.
Diese Unterscheidung ist wichtig für ein kleines Label unter einer Überschrift. Ein Farbpaar kann für die Überschrift bestehen und trotzdem für das Label durchfallen. Beurteile jedes in seiner tatsächlichen Anzeigegröße, auch wenn ein Social-Bild in einem Feed verkleinert wird.
Runde einen fehlgeschlagenen Wert nicht auf ein Bestehen auf. Ein Ergebnis von 4.499:1 liegt immer noch unter 4.5:1.
Probiere die vier Paare im Tool aus
- Öffne Farbstudio und wähle Kontrast.
- Gib das erste Paar in Textfarbe und Hintergrundfarbe ein.
- Prüfe Normaler Text AA und vergleiche dann Großer Text AA.
- Wiederhole mit den anderen Paaren. Bei Muster 2 und 3 ändere nur den Hintergrund, um zu sehen, warum beide Werte wichtig sind.
- Setze dein gewähltes Paar in das echte Design und lies es in seiner endgültigen Größe. Prüfe kleinere Labels und Links, nicht nur die große Beispielüberschrift.
Auf einem Telefon erscheinen Vorschau und Einstellungen nacheinander. Die Prüfungen verwenden dieselben Werte wie auf dem Desktop.
Einfarbige Flächen sind nur der Ausgangspunkt
Der Prüfer vergleicht zwei deckende, einheitliche Farben. Er untersucht nicht jedes Pixel hinter Text auf einem Foto oder Verlauf und berücksichtigt keine teilweise transparenten Overlays. Prüfe die hellsten und dunkelsten Bereiche unter der Schrift oder gib dem Text eine einfarbige Fläche, deren Farbe du testen kannst.
Teste das Design in hellen und dunklen Themes, falls du sie anbietest. Ein Bestehen auf einer weißen Karte sagt nichts über denselben Text auf einem dunklen Menü aus. Dünne Schrift kann auch schwerer lesbar sein, als das Verhältnis vermuten lässt. Lasse also etwas Spielraum über dem Minimum, anstatt den Grenzwert nur knapp zu erreichen.
Was wir geprüft haben
Am 5. Oktober 2026 haben wir alle vier Paare durch dieselbe Kontrastfunktion wie Farbstudio laufen lassen. Die Ergebnisdatei dokumentiert die genauen Verhältnisse und AA-Entscheidungen. Das herunterladbare CSS und die Illustration verwenden dieselben Farbwerte.
Dies prüft Textkontrast, nicht die Barrierefreiheit einer gesamten Seite. Es bewertet keine Tastaturzugänglichkeit, Labels, Lesereihenfolge oder ob jemand deinen Inhalt verstehen kann.