Zum Hauptinhalt springen
BilderProcessado no seu navegador

WCAG-Kontrastprüfer

Prüfen Sie Farbkontrast und WCAG-AA/AAA-Konformität mit Vorschau und Export.

0 von 3 Nutzungen heute · 3 übrig. Werde Pro und entferne das Limit.

Upgrade

WCAG-Kontrastprüfer

WCAG 2.1Lokale Verarbeitung

WCAG 2.1-Konformität mit Live-Vorschau und barrierefreier Farbvorschlag.

Algorithmus
Vordergrund
Vordergrund anpassen0
Hintergrund
Hintergrund anpassen0
Live-Vorschau
Beispielinhalt

Dieser Absatz zeigt das Farbpaar im Fließtext für schnelle visuelle Kontrastprüfung.

Kleiner Hilfstext, der das höchste Kontrastniveau erfordert.

Ergebnis

Kontrastdiagnose

Teilbarer Link
Verhältnis
9.7:1
Level
AAA
Normaltext
AA · Bestanden
AAA · Bestanden
Großer Text
AA · Bestanden
AAA · Bestanden
UI-Elemente
AA · Bestanden
APCA Lc
Lc
92.1
Polarität
Dunkler Text / heller Hg
Band
Hoher Kontrast
Größenspezifische Bewertungen (APCA Bronze/Silver)
Beschriftung 12px· normal · min Lc 90
Bronze · BestandenSilver · Durchgefallen
Fließtext klein 14px· normal · min Lc 75
Bronze · BestandenSilver · Bestanden
Fließtext 16px· normal · min Lc 60
Bronze · BestandenSilver · Bestanden
Unterüberschrift 20px· mittel · min Lc 60
Bronze · BestandenSilver · Bestanden
Überschrift 32px· fett · min Lc 45
Bronze · BestandenSilver · Bestanden
Simulation von Farbsehschwächen
Geschätzte Reichweite: 100%
Normal
Aa
9.7:1Besteht AA
~92.987% der Bevölkerung
Deuteranopie
Aa
16.1:1Besteht AA
~6% der Bevölkerung
Protanopie
Aa
14.7:1Besteht AA
~1% der Bevölkerung
Tritanopie
Aa
11.1:1Besteht AA
~0.01% der Bevölkerung
Achromatopsie
Aa
12.1:1Besteht AA
~0.003% der Bevölkerung
Barrierefreier Vorschlag
Aktuelle Kombination besteht bereits AA — kein Vorschlag nötig.
Gespeicherte Paare0 Paare
Noch kein Paar gespeichert.

§ So verwenden

So prüfen Sie den Farbkontrast (WCAG)

Prüfen Sie den Text-/Hintergrundkontrast gegen WCAG AA und AAA, mit Farbenblindheits-Simulation — im Browser.

  1. Farben wählen

    Legen Sie Vordergrund- (Text) und Hintergrundfarbe mit den Auswahlfeldern oder HEX-Eingaben fest.

  2. Verhältnis ablesen

    Sehen Sie das Kontrastverhältnis und ob es WCAG AA und AAA für normalen und großen Text besteht.

  3. Simulieren und anpassen

    Sehen Sie eine Vorschau der Farbenblindheits-Modi und passen Sie die Farben an, bis der Kontrast besteht.

Verwandte

Verwandte Werkzeuge

Da mesma categoria.