Barrierefreie Apps · Farbkontrast

Farbkontrast in Apps: Welche Werte Text und Bedienelemente brauchen

Heller, grauer Text auf weißem Grund sieht edel aus, ist aber für viele kaum lesbar. Wer eine Sehbeeinträchtigung hat, im Sonnenlicht auf das Display schaut oder einfach älter wird, braucht ausreichenden Kontrast. Apple, Google und die WCAG fordern dafür dieselben Mindestwerte: 4,5:1 für normalen Text und 3:1 für große Schrift und Bedienelemente. Diese Seite erklärt die Werte, den Unterschied zwischen Text und Nicht-Text und wie du beides in iOS- und Android-Apps prüfst.

  • 9 Minuten Lesezeit
  • Stand: Juni 2026

Warum Kontrast zählt

Kontrast ist der Helligkeitsunterschied zwischen zwei Farben, ausgedrückt als Verhältnis. Reines Schwarz auf Weiß ergibt 21:1, der höchstmögliche Wert. Je näher zwei Farben in der Helligkeit beieinanderliegen, desto kleiner das Verhältnis und desto schwerer die Unterscheidung. Bei 1:1 sind beide Farben gleich hell, der Text verschwindet.

Auf einem mobilen Bildschirm verschärft sich das: Sonnenlicht, Fingerabdrücke, gedimmte Helligkeit zum Stromsparen. Was im Büro am Monitor noch lesbar wirkt, kann unterwegs unleserlich werden. Menschen mit einer Sehbeeinträchtigung oder altersbedingt nachlassender Sehkraft sind besonders betroffen, profitieren aber tun alle.

Drei Kontraststufen von zu schwach bis ausreichend Drei Felder nebeneinander mit demselben Wort Text. Links sehr heller Grauton auf Weiß mit dem Verhältnis 1,6 zu 1, als unzureichend und mit Kreuz markiert. Mitte mittlerer Grauton mit 3 zu 1, ausreichend nur für große Schrift, mit Tilde markiert. Rechts dunkler Ton mit 4,5 zu 1, ausreichend für normalen Text, mit Haken markiert. Dasselbe Wort, drei Kontraststufen Text 1,6:1 ✗ zu schwach Text 3:1 ~ nur große Schrift Text 4,5:1 ✓ auch normaler Text
Schaubild: Mit dem Verhältnis steigt die Lesbarkeit. 1,6:1 ist zu schwach, 3:1 reicht nur für große Schrift, 4,5:1 ist für normalen Text geeignet. Die Werte sind zusätzlich mit Symbolen markiert, nicht nur über Farbe.

Die Mindestwerte im Überblick

Die Zahlen stammen aus den WCAG und sind in beiden Plattform-Welten identisch übernommen. Entscheidend ist, was als große Schrift gilt: ab etwa 18 pt (rund 24 px) normaler Stärke oder ab 14 pt (rund 18,7 px) fett. Erst ab dieser Größe genügt das niedrigere Verhältnis von 3:1.

Kontrast-Mindestwerte für Apps
Element Mindestkontrast Grundlage
Normaler Text 4,5:1 WCAG 1.4.3 (AA). Von Apple und Material Design gleichlautend übernommen.
Große Schrift (ab 18 pt bzw. 14 pt fett) 3:1 WCAG 1.4.3 (AA). Gilt auch für große, fette Überschriften.
Bedienelemente und Zustände 3:1 WCAG 1.4.11 (AA): Ränder von Eingabefeldern, Umschalter, Fokus-Anzeige.
Wichtige Teile von Grafiken 3:1 WCAG 1.4.11 (AA): etwa die Balken in einem Diagramm oder ein bedeutungstragendes Icon.

Text und Nicht-Text getrennt denken

Ein verbreiteter Fehler ist, nur den Text zu prüfen. Die WCAG verlangen mit Kriterium 1.4.11 auch Kontrast für Nicht-Text: die sichtbare Begrenzung eines Eingabefelds, der Haken in einer Checkbox, der Rahmen eines Schalters, die Fokus-Markierung. Wenn ein Eingabefeld nur durch einen blassgrauen Rahmen erkennbar ist, der mit 1,5:1 kaum heraussticht, finden manche Nutzer:innen es schlicht nicht.

Bedienelement mit zu schwachem und mit ausreichendem Rand Zwei Eingabefelder im Vergleich. Links ein Feld mit sehr blassem Rand, der kaum sichtbar ist, mit Kreuz und 1,4 zu 1 beschriftet. Rechts dasselbe Feld mit deutlich dunklerem Rand, mit Haken und 3 zu 1 beschriftet. Auch Ränder brauchen Kontrast (1.4.11) RAND ZU BLASS Eingabe 1,4:1 ✗ Feldgrenze kaum sichtbar RAND DEUTLICH Eingabe 3:1 ✓ Feldgrenze klar erkennbar
Schaubild: Links ist der Rand des Eingabefelds zu blass und das Feld kaum als solches erkennbar. Rechts hebt sich der Rand mit 3:1 deutlich ab.

Farbe nie als einziges Mittel

Kontrast und Farbe sind zwei verschiedene Fragen. Selbst bei perfektem Kontrast darf eine Information nicht allein über die Farbe transportiert werden. Ein rot eingefärbtes Pflichtfeld hilft niemandem, der Rot und Grün nicht unterscheiden kann. Es braucht zusätzlich ein Zeichen: ein Symbol, einen Text, eine Form.

Web oder App: gleiche Werte, andere Werkzeuge

Die Kontrastwerte gelten im Web wie in der App, denn sie stammen beide Male aus den WCAG. Für native Apps werden diese Anforderungen über den europäischen Standard EN 301 549 verbindlich, der die WCAG-Kriterien auf Software und mobile Anwendungen überträgt. Der Unterschied liegt nur in den Werkzeugen und in den Plattform-Themes.

In der Praxis umsetzen

Beide Plattformen bringen Hilfen mit. Wer die System-Farbrollen nutzt, etwa die semantischen Farben von iOS oder die Farb-Token von Material Design, startet meist schon mit ausreichend kontrastierenden Kombinationen. Eigene Markenfarben dagegen musst du selbst prüfen.

  • System-Einstellungen respektieren: iOS bietet „Kontrast erhöhen", Android einen Modus für hohen Kontrast. Apps sollten diese Einstellungen nicht überschreiben, sondern unterstützen.
  • Dynamische Schrift erlauben: Größerer Text hilft zusätzlich. Wer Dynamic Type (iOS) oder skalierbare Schriftgrößen (Android) unterstützt, macht Inhalte für mehr Menschen lesbar.
  • Werte messen, nicht schätzen: Ein Kontrast lässt sich nicht zuverlässig mit dem Auge beurteilen. Nutze einen Kontrastrechner oder den Accessibility Scanner für Android.

Ein Mythos

Mythos

„Hellgraue Schrift wirkt modern, das ist eine reine Geschmacksfrage."

Geschmack endet dort, wo Lesbarkeit beginnt. Sehr heller Text auf weißem Grund kann unter 4,5:1 fallen und ist dann für viele Menschen nicht mehr gut lesbar, besonders im Sonnenlicht oder bei nachlassender Sehkraft. 1.4.3 und 1.4.11 sind Stufe-AA-Kriterien und damit der gängige Maßstab für Apps. Ein dezentes Design und ausreichender Kontrast schließen sich nicht aus, man muss die Werte nur kennen und messen.

Auf einen Blick

Wenn du Farben für eine App festlegst, geh diese Punkte durch:

Damit deckst du die häufigsten Stolperstellen ab. Tiefer steigen die Design-Richtlinien von Apple und Google sowie die WCAG-Begleitdokumente ein, die auch Sonderfälle und die genaue Berechnung erklären.