Was ist Hochkontrastmodus?

Teste, wie deine Webinhalte unter verschiedenen Hochkontrasteinstellungen aussehen. Füge HTML ein oder lade einen URL-Screenshot hoch, um WCAG-konforme Kontrastmodi zu prüfen – darunter Windows-Hochkontrast, invertierte Farben und benutzerdefinierte Kontrastthemen.

Wähle aus Voreinstellungen (Windows High Contrast, Invertiert, Gelb auf Schwarz) oder lege Vorder- und Hintergrundfarbe selbst fest. Das Kontrastverhältnis aktualisiert sich live und zeigt, welche WCAG-Stufen — AA, AAA, normaler Text, großer Text — die Kombination besteht. Das HTML aus der Vorschau kannst du mit den Inline-Stilen exportieren.

Anleitung

1. Schritt 1 — Füge deinen HTML-Code oder einfachen Text in den Editor ein.
2. Schritt 2 — Wähle einen Kontrastmodus aus den Voreinstellungen: Windows Hochkontrast (Schwarz/Weiß), Invertiert, Gelb auf Schwarz oder benutzerdefinierte Farben.
3. Schritt 3 — Prüfe die Live-Vorschau auf Lesbarkeit. Nutze den Kontrastverhältnis-Prüfer, um die WCAG-AA/AAA-Konformität für Textelemente zu verifizieren.

Wann verwenden

• Eine Landingpage vor dem Kampagnenstart auf WCAG AA prüfen.
• Sicherstellen, dass Fokus-Indikatoren und reine Icon-Buttons in Windows High Contrast sichtbar bleiben.
• Eine Fließtextfarbe finden, die gegen den Markenhintergrund 4,5:1 erreicht.

Ergebnis

Ein Entwickler fügt den HTML-Code seiner Navigationsleiste ein und wechselt in den Windows-Hochkontrastmodus. Er stellt fest, dass seine Nur-Symbol-Schaltflächen auf dem schwarzen Hintergrund unsichtbar sind, und fügt sichtbare Textbeschriftungen hinzu.

Häufige Fragen

Welches Kontrastverhältnis verlangt WCAG AA?

4,5:1 für Fließtext und 3:1 für großen Text (ab 18pt regulär oder 14pt fett). AAA schraubt die Werte auf 7:1 und 4,5:1 hoch. Das Tool kennzeichnet jede Kombination mit den Stufen, die sie besteht oder verfehlt.

Warum verschwinden Icon-Buttons im Windows High Contrast?

Windows ersetzt Farben durch Systemtokens und ignoriert Hintergrundbilder. Icons als background-image oder als SVG nur mit fill werden unsichtbar. Setze stattdessen inline SVG mit currentColor auf den stroke ein oder ergänze ein sichtbares Textlabel.

Ist Gelb auf Schwarz wirklich ein Barrierefreiheitsthema?

Ja. Es zählt zu den ursprünglichen Windows-High-Contrast-Themes und wird von vielen sehbehinderten Nutzern bis heute geschätzt, weil Gelb selbst bei Makuladegeneration leuchtend bleibt. Manche bevorzugen es gegenüber reinem Weiß auf Schwarz.

Bedeutet WCAG AA bestanden, dass die Seite zugänglich ist?

Kontrast ist nur ein Teil von WCAG. Die Seite braucht außerdem Tastaturnavigation, semantisches HTML, Alt-Texte, Formularlabels, Fokus-Indikatoren und Respekt vor reduzierter Bewegung. Die Verhältniszahl spricht ausschließlich über Farbe.

Warum scheitert mein Marken-Orange auf weißem Hintergrund?

Gesättigte Mitteltöne (Orange, Gelb, Limette) bleiben auf Weiß oft unter 3:1, weil ihre Leuchtdichte zu hoch ist. Dunkler abgemischtes Orange für Fließtext, oder Orange nur für Flächen und große Überschriften nutzen, wo 3:1 ausreicht.

Ähnliche Tools