Barrierefreiheits-Prüfer für Farbe + Schriftgröße
Erhalten Sie ein eindeutiges WCAG-Bestanden/Nicht-bestanden-Ergebnis für Ihre exakten Schrifteinstellungen. Geben Sie Vordergrund- und Hintergrundfarben ein und legen Sie dann Schriftgröße und Schriftstärke fest - das Tool wendet automatisch die richtige WCAG-Schwelle an (großer Text ≥18 pt / ≥14 pt fett benötigt 3:1, normaler Text benötigt 4,5:1). Die Live-Vorschau zeigt genau, wie Ihr Text aussehen wird. Vollständig privat, 100 % kostenlos und ohne Anmeldung.
Color Presets
#000000 · rgb(0, 0, 0)
#FFFFFF · rgb(255, 255, 255)
Font Settings
Quick Font Presets
Live Preview
The quick brown fox jumps over the lazy dog. Accessibility matters for everyone.
16px / weight 400 - Normal text (WCAG)
21.00:1
Excellent contrast · Passes WCAG AAA (normal text requires 7:1). Excellent contrast.
WCAG normal text threshold applies. Suggested text color for this background: #ffffff
Warum unseren Barrierefreiheits-Prüfer für Farbe + Schriftgröße verwenden?
- Schriftgrößen- und Schriftstärken-bewusst: Anders als einfache Kontrastprüfer berücksichtigt dieses Tool Ihre exakte Schriftgröße und -stärke, um die korrekte WCAG-Schwelle zu bestimmen. Großer Text (≥18 pt oder ≥14 pt fett) benötigt für AA nur 3:1, während normaler Text 4,5:1 benötigt - das Tool übernimmt dies automatisch.
- Sofortige WCAG-Bestanden/Nicht-bestanden-Ergebnisse: Sehen Sie das eindeutige Ergebnis für WCAG AA und AAA bei jeder Änderung einer Eingabe. Die Kontrastanzeige visualisiert, wo Ihr Verhältnis relativ zu den WCAG-Schwellen liegt, und die Live-Vorschau zeigt genau, wie Ihr Text in der angegebenen Größe und Stärke aussehen wird.
- 100 % privat - kein Upload: Alle Kontrastberechnungen laufen lokal in Ihrem Browser mit der offiziellen WCAG-2.1-Formel für die relative Luminanz. Ihre Farbwerte und Texteinstellungen verlassen niemals Ihr Gerät.
- Kostenlos und ohne Limits: Prüfen Sie unbegrenzt Farbkombinationen und Schrifteinstellungen ohne Anmeldung, ohne Abonnement und ohne Nutzungsgrenzen. Der Barrierefreiheits-Prüfer für Schriftgröße ist für immer völlig kostenlos, ohne Werbung, die die Oberfläche blockiert.
Was ist der Barrierefreiheits-Prüfer für Farbe + Schriftgröße?
Der Barrierefreiheits-Prüfer für Farbe + Schriftgröße ist ein kombiniertes WCAG-Kontrastbewertungstool, das nicht nur die Vordergrund- und Hintergrundfarben berücksichtigt, sondern auch Schriftgröße und Schriftstärke Ihres Textes. WCAG 2.1 definiert unterschiedliche Kontrastanforderungen für normalen und großen Text: Großer Text (≥18 pt normal oder ≥14 pt fett) benötigt für AA-Konformität nur ein Verhältnis von 3:1, während normaler Text 4,5:1 benötigt. Dieses Tool bestimmt automatisch, welche Schwelle anhand Ihrer exakten Schrifteinstellungen gilt, und liefert Ihnen ein präzises, eindeutiges Bestanden/Nicht-bestanden-Ergebnis für Ihren konkreten Anwendungsfall.
So funktioniert unser Barrierefreiheits-Prüfer für Schriftgröße
- Geben Sie Ihre Farben ein: Tippen oder fügen Sie HEX- oder RGB-Werte für die Vordergrundfarbe (Text) und Hintergrundfarbe ein. Sie können auch den nativen Farbwähler verwenden oder aus den vordefinierten Farbkombinationen wählen, um schnell zu starten.
- Legen Sie Schriftgröße und -stärke fest: Passen Sie den Schieberegler für die Schriftgröße (8-72 px) an und wählen Sie eine Schriftstärke über die Schaltflächen. Nutzen Sie die schnellen Schriftvorlagen für gängige Textgrößen wie Fließtext (16 px), Überschriften (28 px) oder Bildunterschriften (11 px).
- Erhalten Sie eindeutige Ergebnisse: Das Tool berechnet das WCAG-Kontrastverhältnis und wendet automatisch die korrekte Schwelle anhand Ihrer Schrifteinstellungen an. Die Live-Vorschau zeigt genau, wie Ihr Text aussehen wird, und die Bestanden/Nicht-bestanden-Badges geben Ihnen einen klaren AA- und AAA-Konformitätsstatus.
Großer Text vs. normaler Text in der WCAG
- Normaler Text (<18 pt normal / <14 pt fett): Erfordert ein Mindestkontrastverhältnis von 4,5:1 für WCAG AA und 7:1 für WCAG AAA. Fließtext, Beschriftungen, Bildunterschriften und die meisten UI-Texte fallen in diese Kategorie.
- Großer Text (≥18 pt / 24 px normal oder ≥14 pt / 18,67 px fett): Erfordert ein Mindestkontrastverhältnis von 3:1 für WCAG AA und 4,5:1 für WCAG AAA. Überschriften, große Hervorhebungen und Display-Typografie gelten in der Regel als großer Text.
- Warum der Unterschied? Größerer Text hat dickere Striche und mehr Fläche, sodass er auch bei geringeren Kontrastverhältnissen leichter lesbar ist. Die WCAG trägt dem Rechnung, indem sie niedrigere Schwellen für großen Text festlegt.
Wichtige Einschränkungen
Der Barrierefreiheits-Prüfer für Schriftgröße bewertet Kontrastverhältnisse anhand der mathematischen Schwellen von WCAG 2.1. Das Bestehen der Kontrastverhältnis-Prüfung garantiert keine vollständige Barrierefreiheit - WCAG-Konformität erfordert auch korrektes semantisches HTML, Tastaturnavigation, Screenreader-Kompatibilität, Fokusverwaltung und andere nicht farbbasierte Faktoren. Darüber hinaus berücksichtigt die WCAG-Kontrastformel nicht alle Arten von Farbsehschwächen. Die vollständige Barrierefreiheitsvalidierung erfordert manuelle Tests mit assistiven Technologien und eine fachkundige Barrierefreiheitsprüfung. Testen Sie Ihre Designs stets mit echten Nutzern und assistiven Technologien als Teil Ihres Barrierefreiheits-Workflows.
Häufig gestellte Fragen
Ein Barrierefreiheits-Prüfer für Farbe + Schriftgröße kombiniert die Berechnung des WCAG-Kontrastverhältnisses mit der Bewertung von Schriftgröße und Schriftstärke. Statt anzunehmen, dass jeder Text 4,5:1 benötigt, berücksichtigt er, ob Ihr Text als »großer Text« (≥18 pt normal oder ≥14 pt fett) nach WCAG 2.1 gilt, der für AA nur 3:1 benötigt. So erhalten Sie ein präzises Bestanden/Nicht-bestanden-Ergebnis für Ihr exaktes Text-Styling.
WCAG 2.1 definiert großen Text als mindestens 18 Punkt (24 px) in normaler Schriftstärke oder mindestens 14 Punkt (etwa 18,67 px) in Fettschrift. Der Barrierefreiheits-Prüfer für Schriftgröße wendet diese Schwelle automatisch anhand Ihrer Eingaben für Schriftgröße und -stärke an - die Regeln müssen nicht manuell nachgeschlagen werden.
Größerer Text hat dickere Striche und nimmt mehr visuelle Fläche ein, sodass er auch bei geringeren Kontrastverhältnissen leichter lesbar ist. Die WCAG trägt dem Rechnung, indem sie niedrigere Schwellen festlegt - 3:1 für großen Text in AA statt 4,5:1. Deshalb können Überschriften manchmal AA mit Farben bestehen, die für Fließtext scheitern würden.
Das Tool berechnet dies automatisch. Normaler Text (unterhalb der Schwelle für großen Text) benötigt 4,5:1 für AA und 7:1 für AAA. Großer Text (auf oder über der Schwelle) benötigt 3:1 für AA und 4,5:1 für AAA. Geben Sie einfach Schriftgröße und -stärke ein, und das Tool zeigt das korrekte erforderliche Verhältnis an.
Absolut. Alle Kontrastberechnungen laufen zu 100 % clientseitig in Ihrem Browser mit der offiziellen WCAG-2.1-Formel für die relative Luminanz. Es werden niemals Farbdaten, Schrifteinstellungen oder sonstige Informationen an einen Server gesendet.
Ja. Er ist zu 100 % kostenlos, ohne Anmeldung, ohne Premiumfunktionen und ohne Nutzungsgrenzen. Prüfen Sie unbegrenzt Farb- und Schriftkombinationen ohne Einschränkungen.
Das Tool unterstützt HEX-Farben (#RGB, #RRGGBB, #RRGGBBAA) und RGB/RGBA-Werte (rgb(r,g,b) und rgba(r,g,b,a)). Sie können auch den nativen Farbwähler verwenden, um eine Farbe visuell auszuwählen. Das Tool zeigt sowohl die HEX- als auch die RGB-Entsprechung der gewählten Farbe an.
Nein. Das Bestehen der Kontrastverhältnis-Prüfung ist eine wichtige Anforderung der WCAG-Konformität, aber vollständige Barrierefreiheit erfordert auch korrektes semantisches HTML, Tastaturnavigation, Kompatibilität mit Screenreadern, Fokusverwaltung, ausreichende Farbe über den Kontrast hinaus (z. B. Informationen nicht allein durch Farbe vermitteln) und viele weitere Faktoren. Der Barrierefreiheits-Prüfer ist ein nützliches Ersteinschätzungs-Tool, aber die vollständige WCAG-Validierung erfordert manuelle Tests mit assistiven Technologien.