Puffinmint
DE
Italiano English Español Français Deutsch Português (Brasil) 日本語 한국어 Polski Türkçe

Kontrast-Checker für WCAG

Vergleichen Sie Text- und Hintergrundfarbe. Berechnen Sie das Kontrastverhältnis und prüfen Sie die WCAG-Grenzwerte AA und AAA für kleine und große Schrift.

Verarbeitung im Browser: Ihre Daten werden nicht hochgeladen.

Daten einstellen

Daten einstellen

Deckende Text- und Hintergrundfarben wählen. Das Verhältnis verwendet relative sRGB-Luminanz und prüft AA und AAA für normalen und großen Text.

Ergebnis

Ihr Ergebnis erscheint hier.

Wir zählen die meistgenutzten Werkzeuge, ohne Eingabewerte oder Dateiinhalte in die Statistik aufzunehmen. Datenschutz

So verwendest du das Werkzeug

  1. Deckende Text- und Hintergrundfarben wählen.
  2. Das Verhältnis verwendet relative sRGB-Luminanz und prüft AA und AAA für normalen und großen Text.

Methode und Grundlagen

Deckende sRGB-Farben; großer Text: 18 pt oder 14 pt fett.

Nur WCAG-2.2-Textkontrast.

Praktisches Beispiel

Eingabe
  • Textfarbe: #000000
  • Hintergrundfarbe: #ffffff
Ergebnis
21:1 AA normaler Text: Erfüllt AA großer Text: Erfüllt AAA normaler Text: Erfüllt AAA großer Text: Erfüllt

Quellen und weiterführende Informationen

PRAKTISCHE RATGEBER

Textkontrast prüfen, ohne einen Grenzwert schönzurunden

Zwei unterschiedliche Farben können schwer lesbaren Text ergeben. Messen Sie das tatsächliche Paar und prüfen Sie Textgröße, Hintergrund und Zustände der Oberfläche.

Schritt für Schritt

Das könnte dir auch helfen

Alle ansehen

Favicon Generator

Erstelle Favicons aus einem Bild, Text oder Emoji. Prüfe die Vorschau und lade mehrere PNG-Größen und eine ICO-Datei im Browser herunter.

Farbpalette Generator

Erstelle analoge, komplementäre, triadische oder monochrome Farbpaletten. Kopiere HEX-Codes und lade CSS-Variablen herunter.

CSS Verlauf Generator

Erstelle lineare und radiale CSS-Verläufe mit zwei Farben, Winkel und Vorschau. Kopiere den Code oder lade die CSS-Datei herunter.

Favoriten