Farbkontrast von Text und Hintergrund prüfen (WCAG)
Auf dieser Seite
Kurz gesagt: Öffnen Sie Farbpalette aus Bild von Imgovo, öffnen Sie den Tab Kontrast, wählen Sie eine Textfarbe und eine Hintergrundfarbe und lesen Sie das WCAG-2.2-Ergebnis ab. Ein Verhältnis von 4,5:1 besteht AA für normalen Text, 3:1 besteht AA für großen Text und 7:1 besteht AAA für normalen Text. Die Farben können Sie aus einem Foto aufbauen oder als HEX-Codes eingeben. Es wird nichts hochgeladen.
Was das Kontrastverhältnis bedeutet
Das Kontrastverhältnis vergleicht, wie hell zwei Farben sind. Es reicht von 1:1 (gleiche Farben) bis 21:1 (Schwarz auf Weiß). Text mit zu wenig Kontrast ist schwer lesbar, besonders für Menschen mit eingeschränktem Sehvermögen, auf einem Smartphone in der Sonne oder auf einem schlechten Bildschirm.
Die Zahlen zum Merken
| Stufe | Normaler Text | Großer Text | Bedienelemente und Symbole |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
Großer Text bedeutet mindestens 24 px oder 18,66 px bei Fettdruck.
Schritt für Schritt
- Öffnen Sie Farbpalette aus Bild. Fügen Sie ein Bild hinzu, um eine Palette zu erstellen, oder nutzen Sie Palette ohne Bild erstellen.
- Öffnen Sie den Tab Kontrast.
- Wählen Sie Textfarbe und Hintergrundfarbe aus Ihrer Palette oder geben Sie eigene ein.
- Sehen Sie sich die Beispiele (großer und normaler Text) und die WCAG-2.2-Ergebnisse für dieses Paar an: das Verhältnis und bestanden oder nicht bestanden für AA und AAA.
- Besteht das Paar nicht, klicken Sie auf Lesbare Textfarbe vorschlagen und dann auf Vorschlag verwenden.
- Mit Tauschen probieren Sie hellen Text auf dunklem Hintergrund und umgekehrt. Unter Alle Paare sehen Sie jede Kombination der Palette.
Farben aus einem Foto
Haben Sie eine Palette aus einem Foto extrahiert, gehen Sie nicht davon aus, dass sie für Text taugt. Weiche oder ähnliche Farben fallen oft durch. Wählen Sie ein dunkles Farbfeld für den Text und ein helles für den Hintergrund oder umgekehrt, und testen Sie das Paar. Wie Sie die Palette erstellen, lesen Sie in Farbpalette aus einem Bild erstellen.
Sehen, wie andere die Palette wahrnehmen
Das Tool zeigt auch eine Annäherung an verbreitete Unterschiede beim Farbsehen. So erkennen Sie Farben, die für manche Menschen ähnlich aussehen. Es ist kein Kontrasttest und kein medizinisches Tool.
Farben in einer Oberfläche ausprobieren
Der Tab Vorschau zeigt Ihre Farben in einem kleinen Seitenlayout mit Seite, Karte, Text, Akzent und Rahmen, damit Sie sie im Zusammenhang sehen, bevor Sie die Codes in Ihr CSS kopieren.
Grenzen
Die Prüfung misst jeweils ein Paar einfarbiger Farben. Sie prüft keine Fotos hinter Text, keine Verläufe, keine Hover-Zustände und nicht den Rest der Barrierefreiheit. Verstehen Sie das Ergebnis als hilfreiche Prüfung, nicht als Zertifikat.
Datenschutz
Die Farben werden in Ihrem Browser geprüft. Es wird nichts hochgeladen.
Jetzt ausprobieren
Öffnen Sie Farbpalette aus Bild, gehen Sie zu Kontrast und testen Sie Ihre Text- und Hintergrundfarben.
Häufig gestellte Fragen
Welches Kontrastverhältnis brauche ich?
WCAG 2.2 verlangt auf Stufe AA mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Stufe AAA verlangt 7:1 für normalen Text und 4,5:1 für großen Text. Bedienelemente und Icons brauchen 3:1.
Was gilt als großer Text?
Mindestens 24 px oder 18,66 px bei Fettdruck.
Ist das ein Nachweis, dass mein Design barrierefrei ist?
Nein. Die Prüfung misst ein Paar einfarbiger Farben. Sie ist kein Zertifikat für ein ganzes Design und prüft weder Bilder noch Verläufe, Text auf Fotos oder andere Teile der Barrierefreiheit.
Kann Imgovo eine lesbare Textfarbe vorschlagen?
Ja. Wählen Sie eine Hintergrundfarbe und nutzen Sie „Lesbare Textfarbe vorschlagen“. Dann können Sie den Vorschlag übernehmen oder bei Ihrer eigenen Farbe bleiben.
Kann ich alle Farben einer Palette auf einmal prüfen?
Ja. Die Ansicht „Alle Paare“ listet jedes Text-Hintergrund-Paar Ihrer Palette mit seinem Ergebnis.
Wird mein Bild hochgeladen?
Nein. Die Farben werden in Ihrem Browser geprüft, nichts verlässt Ihr Gerät.