„Kontrast erhöhen“ ist eine in iOS verfügbare Barrierefreiheitsfunktion, mit der Nutzer den Kontrast aller Texte und Bedienelemente auf ihrem gesamten Gerät erhöhen können. Selbst wenn Ihre App den WCAG-Richtlinien entspricht, kann es für manche Nutzer von Vorteil sein, wenn Bedienelemente und andere Elemente in Ihrer App besser hervorstechen. In diesem Blogbeitrag werde ich folgende Themen behandeln:
- So überprüfen Sie, ob Ihre App auf die Funktion „Kontrast erhöhen“ reagiert
- die verschiedenen Möglichkeiten, „Increase Contrast“ zu unterstützen
- Wie sich dies auf den Dunkelmodus auswirkt
- Einige bewährte Vorgehensweisen zur Unterstützung der Funktion „Kontrast erhöhen“
Wenn ihr möchtet, könnt ihr die Schritte mit einer App nachvollziehen, die ich für diesen Blogbeitrag erstellt habe!
Einhaltung der WCAG-Richtlinien
Bevor wir loslegen, noch ein Hinweis: Die Unterstützung der Funktion „Kontrast erhöhen“ macht Ihre App noch nicht WCAG-konform. In diesem Blogbeitrag geht es ausschließlich um die Unterstützung einer großartigen Funktion in iOS, die dazu beitragen kann, dass sich Nutzer bei der Nutzung Ihrer App wohler fühlen. Weitere Informationen zum Testen des Farbkontrasts in mobilen Apps finden Sie hier.
Kontrast erhöhen
Bevor Sie direkt loslegen, sollten Sie zunächst prüfen, welche Komponenten Ihrer App bereits auf die Funktion „Kontrast erhöhen“ reagieren. Um dies zu testen, gehen Sie zu „Einstellungen“ > „Barrierefreiheit“ > „Anzeige & Textgröße“ und wählen Sie „Kontrast erhöhen“ aus. Wenn diese Funktion aktiviert ist, werden Sie in den Einstellungen feststellen, dass der Text sofort dunkler wird, die einzelnen Zellen klarer hervortreten und alle Steuerelemente, einschließlich der Zurück-Schaltfläche, dunkler erscheinen. Genau dieses Verhalten möchten Sie in Ihrer App erzielen.
 |
 |
| Standard | Kontrast erhöhen Ein |
So können Sie den Kontrast erhöhen
Es gibt vier verschiedene Möglichkeiten, die Funktion „Kontrast erhöhen“ zu unterstützen. Welche Methode Sie wählen, hängt davon ab, wie Farben bereits in Ihrer App eingesetzt werden und ob Sie eine bestimmte Farbpalette im Sinn haben.
Verwendung der Standardfarben
Die einfachste Möglichkeit, die Funktion „Kontrast erhöhen“ zu unterstützen, besteht darin, einfach das Standardfarbschema zu verwenden. Alle Steuerelemente und Texte werden dunkler, wenn „Kontrast erhöhen“ aktiviert ist.
 |
 |
| Standard | Kontrast erhöhen Ein |
Systemfarben verwenden
Wenn Sie von den Standardfarben abweichen möchten, können Sie alternativ die „Systemfarben“ verwenden. Systemfarben passen sich automatisch an den Dunkelmodus und an Barrierefreiheitseinstellungen (wie z. B. „Kontrast erhöhen“) an. Weitere Informationen zu Systemfarben finden Sie in den Human Interface Guidelines von Apple. In diesem Beispiel habe ich die Farbe „Label“ für den Text, „System Indigo“ für die Farbtöne der Schaltflächen und Schieberegler sowie „System Orange“ für den Farbton des Schalters verwendet. Als Hintergrundfarbe habe ich außerdem „System Gray 6“ gewählt.
 |
 |
| Standard | Kontrast erhöhen Ein |
Verwendung von Farben in Assets
Wenn Sie bestimmte Designanforderungen haben, können Sie Ihre Farben als Farbsatz in einem xcassets-Ordner definieren. Damit diese Farben die Funktion „Kontrast erhöhen“ unterstützen, wählen Sie einfach unter „Darstellung“ die Option „Hoher Kontrast“ aus. Anschließend können Sie die Farbe für den hohen Kontrast anpassen.
In den folgenden Screenshots sehen Sie, wie die Farben „Switch Tint“ und „Tint“ in meinen Assets definiert sind und wie sie in meiner App aussehen. Vielleicht fällt Ihnen auch auf, dass sich die „Background“-Farben (oben) im Farbsatz nicht wesentlich unterscheiden, in der App jedoch ein riesiger Unterschied zu erkennen ist!
 |
 |
| Standard | Kontrast erhöhen Ein |
Verwendung von Farbcodes
Wenn Ihre Farben im Code definiert sind, haben Sie zwei Möglichkeiten: Sie können entweder auf die UIAccessibility.darkerSystemColorsStatusDidChange Benachrichtigung, oder Sie können die Einstellung überschreiben traitCollectionDidChange.
Benachrichtigungs-Listener
Falls Sie lieber die UIAccessibility.darkerSystemColorsStatusDidChange Benachrichtigung, einen Beobachter in einem Initialisierer hinzufügen (oder in viewDidLoad auf einem ViewController):
NotificationCenter.default.addObserver(self,
selector: #selector(updateColors),
name:
UIAccessibility.darkerSystemColorsStatusDidChangeNotification,
object: nil)
Ändere dann in deiner Funktion „updateColors“ die Farben je nachdem, ob die Eigenschaft aktiviert ist:
@objc
private func updateColors() {
if UIAccessibility.isDarkerSystemColorsEnabled {
label.textColor = UIColor.black
} else {
label.textColor = UIColor(white: 0.9, alpha: 1.0)
}
}
In meiner App habe ich, anstatt eine Farbe zu ändern, diesen Benachrichtigungs-Listener verwendet, um jedem Steuerelement und der dazugehörigen Beschriftung einen Rahmen hinzuzufügen.
„TraitCollectionDidChange“ überschreiben
Falls Sie es vorziehen würden, die TraitCollectionDidChange Funktion verwenden Sie die Eigenschaft „accessibilityContrast“ in traitCollection um die Farben je nachdem, ob „Kontrast erhöhen“ aktiviert ist, anzupassen:
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
// Increase Contrast disabled
if traitCollection.accessibilityContrast != .high {
self.label.textColor = .brown
}
// Increase Contrast enabled
} else {
self.label.textColor = .darkText
}
}
Wie sieht es mit dem Dunkelmodus aus?
Es kann Nutzer geben, die auch im Dunkelmodus einen höheren Kontrast wünschen. Das bedeutet: Wenn Ihre App den Dunkelmodus unterstützt, muss sie auch die Funktion „Kontrast erhöhen“ im Dunkelmodus unterstützen!
 |
 |
| Kontrast erhöhen: Aus, Dunkelmodus: Ein | Kontrast erhöhen und Dunkelmodus aktivieren |
Glücklicherweise unterstützen Standard- und Systemfarben den Dunkelmodus bereits, wenn die Kontrastverstärkung aktiviert ist. Bei benutzerdefinierten Farben müssen Sie jedoch möglicherweise Ihre Farb-Assets für die Einstellung „Hoher Kontrast“ anpassen (beachten Sie, dass „Dunkles Erscheinungsbild mit hohem Kontrast“ eine eigene Farbe ist):
Wenn Sie Ihre Farben im Code definiert haben, können Sie beide Varianten am einfachsten unterstützen, indem Sie traitCollectionDidChange. Hier ist ein Beispiel, wie das gemacht werden kann:
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
let darkModeIsEnabled = traitCollection.userInterfaceStyle == .dark
// Increase Contrast disabled
if traitCollection.accessibilityContrast != .high {
if darkModeIsEnabled {
self.label.textColor = .lightGray
} else {
self.label.textColor = .brown
}
// Increase Contrast enabled
} else {
if darkModeIsEnabled {
self.label.textColor = .lightText
} else {
self.label.textColor = .darkText
}
}
}
So unterstützen Sie bewährte Verfahren mit „Kontrast erhöhen“
Nun haben wir alle verschiedenen Möglichkeiten behandelt, wie Sie „Kontrast erhöhen“ in Ihrer App unterstützen können. Bedeutet das, dass buchstäblich jede einzelne Farbe in Ihrer App auf diese Barrierefreiheits-Einstellung reagieren sollte? Die kurze Antwort lautet: „Nein.“
Generell würde ich empfehlen, Textfarben, Tönungsfarben und alle „Akzentfarben“ an die Funktion „Kontrast erhöhen“ anzupassen. Wie wir beispielsweise zu Beginn dieses Beitrags in den Einstellungen gesehen haben, ändert sich die Hintergrundfarbe einer TableView in eine dunklere Farbe, während die TableViewCells dieselbe Hintergrundfarbe beibehalten. Auch die visuelle Trennlinie zwischen den einzelnen TableViewCells wird dunkler. Dies soll es den Nutzern erleichtern, zu unterscheiden, was eine Zelle ist (und somit antippbar) und was nicht.
Stellen Sie bei den Farben, die letztendlich die Funktion „Kontrast erhöhen“ unterstützen sollen, sicher, dass sie den Kontrast tatsächlich erhöhen. Achten Sie außerdem darauf, dass die hinzugefügten Farben nicht ablenken. Befolgen Sie wie immer die Human Interface Guidelines von Apple, um Farben optimal in Ihre App zu integrieren.
Abschließende Gedanken
Ganz gleich, wie Sie sich letztendlich für die Unterstützung von „Kontrast erhöhen“ entscheiden – tun Sie das, was für Ihre Nutzer am besten ist! Die Unterstützung dieser Barrierefreiheitsfunktion mag zwar einfach sein, kann aber einen riesigen Unterschied machen.
