--- title: "Kontrastverhältnis" url: "https://www.insideuxdesign.com/de/glossar/kontrastverhaeltnis" language: "de" description: "Was bedeutet Kontrastverhältnis? Einfach erklärt mit den WCAG-Werten 4,5:1, 3:1 und 7:1 und einem Beispiel. Erfahre, wie du Kontraste richtig prüfst." published: "2026-10-14T15:20:32+02:00" updated: "2026-10-14T15:20:32+02:00" --- # Kontrastverhältnis Das Kontrastverhältnis beschreibt, wie stark sich zwei Farben in ihrer Helligkeit unterscheiden, etwa Text und Hintergrund. Die WCAG fordern für normalen Text mindestens 4,5:1. - **Buchstabe:** K - **Englischer Begriff:** Contrast Ratio UX-Glossar · engl. Contrast Ratio # Kontrastverhältnis Das Kontrastverhältnis beschreibt, wie stark sich zwei Farben in ihrer Helligkeit unterscheiden, etwa Text und Hintergrund. Die WCAG fordern für normalen Text mindestens 4,5:1. Stell dir vor, du stehst an einem sonnigen Tag an der Bushaltestelle und willst auf dem Smartphone schnell nachsehen, wann der nächste Bus kommt. Die App zeigt die Abfahrtszeiten in hellem Grau auf weißem Grund. Du kneifst die Augen zusammen, drehst das Display, hältst die Hand darüber. Der Bus ist weg, bevor du die Zahl lesen kannst. Das Problem ist nicht die Schriftgröße. Es ist das Kontrastverhältnis. ## Einfach erklärt Das Kontrastverhältnis gibt an, wie stark sich zwei Farben in ihrer Helligkeit unterscheiden, meist Text und Hintergrund. Gemessen wird nicht der Farbton, sondern die sogenannte relative Leuchtdichte, also wie hell eine Farbe für das menschliche Auge wirkt. Daraus ergibt sich ein Wert zwischen 1:1 (kein Unterschied, etwa Weiß auf Weiß) und 21:1 (Schwarz auf Weiß). Ein Vergleich aus dem Alltag: Ein mit Kreide beschriebenes Schild ist auf einer dunklen Tafel gut lesbar. Dieselbe Kreide auf einer hellgrauen Betonwand verschwindet fast. Die Schrift ist gleich, nur der Helligkeitsunterschied fehlt. ## Die wichtigsten Grenzwerte Die [WCAG](https://www.insideuxdesign.com/de/glossar/wcag) legen feste Mindestwerte fest: - **1.4.3 Kontrast (Minimum), Stufe AA:** Normaler Text braucht mindestens 4,5:1. Großer Text (ab 18 Punkt, fett ab 14 Punkt, das sind etwa 24 bzw. 18,5 CSS-Pixel) braucht mindestens 3:1. - **1.4.6 Kontrast (erhöht), Stufe AAA:** 7:1 für normalen und 4,5:1 für großen Text. - **1.4.11 Nicht-Text-Kontrast, Stufe AA:** Bedienelemente und wichtige Grafiken brauchen mindestens 3:1 zur Umgebung, etwa der Rahmen eines Eingabefelds oder ein Fokusrahmen. Die Werte sind harte Schwellen. Ein Ergebnis von 4,49:1 wird nicht aufgerundet und erfüllt 4,5:1 nicht. Ausgenommen sind unter anderem Logos, rein dekorative Elemente und deaktivierte Bedienelemente. ## Ein Beispiel Ein Beispiel: Ein Onlineformular nutzt für Hilfetexte das Grau #999999 auf Weiß. Das ergibt etwa 2,8:1 und fällt bei normaler Schriftgröße durch. Die Rahmen der Eingabefelder sind in #DDDDDD gehalten, rund 1,4:1. Viele erkennen kaum, wo sie klicken sollen. Nach der Überarbeitung bekommen die Hilfetexte #767676 (etwa 4,5:1, knapp AA) und die Feldrahmen ein mittleres Grau mit mehr als 3:1. Das Design wirkt immer noch ruhig, ist aber für deutlich mehr Menschen lesbar. ## Warum das wichtig ist Zu schwacher Kontrast ist der häufigste automatisch erkannte Fehler im Web. Laut „WebAIM Million“ hatten 2026 rund 83,9 Prozent der untersuchten Startseiten Text unter den WCAG-AA-Grenzwerten. Betroffen sind nicht nur Menschen mit Sehbeeinträchtigung, sondern alle, die bei Sonnenlicht, auf alten Displays oder mit müden Augen lesen. Warum Kontrast trotzdem nur ein Baustein ist, zeigt der Artikel [Warum Barrierefreiheit mehr als Kontrast und Größe ist](https://www.insideuxdesign.com/de/blog/warum-barrierefreiheit-mehr-als-kontrast-und-groesse-ist). ## In der Praxis - **Miss, statt zu schätzen.** Das Auge täuscht. Der [WebAIM Contrast Checker](https://www.insideuxdesign.com/de/ressourcen/webaim-contrast-checker) zeigt dir für zwei Farbwerte sofort Verhältnis und Ergebnis für AA und AAA. - **Leg geprüfte Farbpaare fest.** Halte zulässige Kombinationen aus Text- und Hintergrundfarbe direkt im [Design System](https://www.insideuxdesign.com/de/glossar/design-system) fest, dann muss niemand jedes Mal neu rechnen. - **Vergiss die Zustände nicht.** Prüfe auch Platzhalter, Fehlermeldungen, Fokusrahmen und Text auf Bildern. Dort fallen schwache Kontraste am häufigsten durch. ## Verwandte Begriffe [Barrierefreiheit](https://www.insideuxdesign.com/de/glossar/barrierefreiheit), [WCAG](https://www.insideuxdesign.com/de/glossar/wcag), [Farbsehschwäche](https://www.insideuxdesign.com/de/glossar/farbsehschwaeche), [Design System](https://www.insideuxdesign.com/de/glossar/design-system) ## Quellen - [W3C WAI: Understanding Success Criterion 1.4.3: Contrast (Minimum). W3C, 2026](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) - [W3C WAI: Understanding Success Criterion 1.4.6: Contrast (Enhanced). W3C, 2026](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html) - [W3C WAI: Understanding Success Criterion 1.4.11: Non-text Contrast. W3C, 2026](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) - [WebAIM: The WebAIM Million: The 2026 report on the accessibility of the top 1,000,000 home pages. WebAIM, 2026](https://webaim.org/projects/million/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion)