Die Farben, die Sie für die Oberfläche Ihrer App auswählen, beeinflussen, wie leicht ein Nutzer deren Inhalte lesen und verstehen kann. Ein ausreichend hoher Farbkontrast erhöht bei Texten und Bildern die Lesbarkeit und Nutzer können sie leichter verstehen.
Ausreichend hohe Farbkontraste helfen zum einen Nutzern mit Sehschwäche, zum anderen helfen sie aber auch allen anderen Nutzern dabei, eine Oberfläche auf Geräten unter extremen Lichtverhältnissen zu erkennen, beispielsweise bei direkter Sonneneinstrahlung oder auf einem Bildschirm mit geringer Helligkeit.
Implementierung
Geben Sie bei der Implementierung der Benutzeroberfläche einer App Vorder- und Hintergrundfarben mit ausreichend hohem Farbkontrast an.
Ein „Kontrastverhältnis“ ist der aus der Differenz zwischen der Helligkeit bzw. Intensität des ausgestrahlten Lichts von zwei auf einem Display benachbarten angezeigten Farben errechnete Wert. Dieses Verhältnis reicht von 1 bis 21 (häufig als 1:1 bis 21:1 geschrieben). Höhere Zahlen bedeuten hier, dass der Kontrast höher ist. Zur Berechnung des Kontrastverhältnisses zweier benachbarter Farben gibt es viele verschiedene Tools, wie zum Beispiel diesen Farbkontrastrechner.
Wenn Sie Text mithilfe von TextView anzeigen lassen, verwenden Sie android:textColor und android:background, um Vorder- und Hintergrundfarben mit einem hohen Kontrastverhältnis festzulegen. Wenn Sie Text in Compose verwenden, verwenden Sie dazu den color-Parameter und Modifier.background.
Laut W3C wird Folgendes empfohlen:
- Mindestens 4,5:1 bei kleinem Text (unter 18 Punkte bei regulärem Schriftschnitt oder 14 Punkte bei fetter Schrift)
- Mindestens 3,0:1 bei großem Text (18 Punkte und mehr bei regulärem Schriftschnitt und 14 Punkte und mehr bei fetter Schrift)
Hinweise zu Farbkontrasten:
-
Wenn Sie grafische Inhalte oder Ikonografie mit
ImageViewoderImageanzeigen lassen, muss der Kontrast zwischen den Vorder- und Hintergrundfarben mindestens den empfohlenen Verhältniswerten entsprechen. - Kontrastverhältnisse werden basierend auf der sichtbaren Farbe des Vorder- und Hintergrunds einer App gemessen, wenn diese über andere Elemente gelegt wird. Wenn Sie Farben im RGB-Format definieren (Hexadezimalwerte im Format #AARRGGBB), beachten Sie, dass bei lichtdurchlässigen Farben, also Farben mit einem Alphakanal-Wert von weniger als 255, eine andere Farbe angezeigt wird, da der gerenderte Inhalt unter der Farbe eingeblendet wird.
- Durch Schrift- und Kantenglättung kann die angezeigte Farbe bei einigen Inhalten beeinflusst werden, beispielsweise bei Inhalten mit niedriger Strichstärke. Um die Lesbarkeit zu erhöhen, wählen Sie eine Farbkombination mit einem höheren Kontrastverhältnis aus oder erhöhen Sie die Strichstärke des Inhalts.
Design
Wählen Sie beim Entwerfen einer Benutzeroberfläche eine Farbpalette mit ausreichend hohem Farbkontrast für benachbarte Farben aus.
- Halten Sie sich bei Texten und Symbolen an die Mindestkontrastverhältnisse der W3C-Richtlinien.
- Nutzen Sie optional ein Design mit einem höheren Kontrast oder lassen Sie Nutzer selbst die Farben für die Hauptinhalte auswählen.
Weitere Informationen finden Sie in den Farb- und Kontrastrichtlinien für Bedienungshilfen in Material Design.
Test
So prüfen Sie den Farbkontrast in einer App manuell:
- Öffnen Sie die App.
- Machen Sie einen Screenshot.
- Verwenden Sie in einem Programm zum Anzeigen oder Bearbeiten von Bildern ein Pipetten-Tool, um eine Farbprobe vom Screenshot zu extrahieren.
- Verwenden Sie einen Kontrastverhältnisrechner, um das Kontrastverhältnis benachbarter Farben zu bestimmen.
- Liegt das Kontrastverhältnis unter dem in den W3C-Richtlinien angegebenen Wert, können Sie Ihre Oberfläche durch einen höheren Farbkontrast verbessern.
Mit den automatischen Testtools von Android können viele Probleme mit Farbkontrasten erkannt werden. Sie können Ihre App direkt auf einem Gerät manuell testen, indem Sie den Accessibility Scanner für Android verwenden. Wenn die Tests automatisch durchgeführt werden sollen, aktivieren Sie die Bedienungshilfetests von Espresso und Robolectric.