Text zur Hintergrundprüfung

• Sofortige Textlesbarkeitsanalyse: Die Text-Hintergrundprüfung aktualisiert jeden Wert bei jedem Tastendruck – es muss kein Knopf gedrückt werden. Geben Sie eine beliebige Vorder- und Hintergrundfarbe ein und erhalten Sie sofort das WCAG-Kontrastverhältnis, den AA/AAA-Bestanden/Nicht bestanden-Status und eine Live-Textvorschau. Tauschen Sie Farben aus oder probieren Sie voreingestellte Paare mit einem Klick aus.
• Anpassbare Schriftgröße und -stärke: Wechseln Sie zwischen WCAG-Standard-Textskalen – kleiner Text (normal), großer Text, kleiner Fettdruck und großer Fettdruck – oder legen Sie benutzerdefinierte Schriftgrößen von 12 Pixel bis 48 Pixel und Schriftstärken von 400 bis 700 fest. Sehen Sie genau, wie sich die Lesbarkeit ändert, wenn Sie diese Parameter anpassen, mit einer Live-Textvorschau in der ausgewählten Größe.
• WCAG 2.1-konforme Berechnungen: Alle Kontrastberechnungen verwenden die offizielle relative Luminanzformel und Schwellenwerte von WCAG 2.1. Der Prüfer bewertet die AA-Konformität (4,5:1 für normalen Text, 3:1 für großen Text) und die AAA-Konformität (7:1 für normalen Text, 4,5:1 für großen Text) mit klaren Pass/Fail-Abzeichen.
• 100 % kostenlos – keine Anmeldung erforderlich: Der Text auf der Hintergrundüberprüfung ist völlig kostenlos, ohne Anmeldung, ohne Abonnement und ohne Nutzungsbeschränkungen. Alle Berechnungen werden lokal in Ihrem Browser ausgeführt – Ihre Farben und Texte verlassen nie Ihr Gerät. Keine Werbung blockiert die Benutzeroberfläche.

• Einhaltung der Web-Barrierefreiheit: Frontend-Entwickler verwenden den Text im Hintergrundprüfer, um vor dem Versand zu überprüfen, ob ihre Farbauswahl den WCAG AA- oder AAA-Anforderungen entspricht. Testen Sie Textkörper, Überschriften und Schaltflächenbeschriftungen mit ihren tatsächlichen Schriftgrößen und -stärken, um sicherzustellen, dass es in der Produktion keine Barrierefreiheitsprobleme gibt.
• Farbvalidierung des Designsystems: Betreuer von Designsystemen verwenden den Text im Hintergrundprüfer, um jedes Farbpaar in ihrer Design-Token-Bibliothek zu validieren. Testen Sie Primär-, Sekundär-, Text- und Hintergrundkombinationen in verschiedenen Textmaßstäben, um eine konsistente Zugänglichkeit in der gesamten Komponentenbibliothek sicherzustellen.
• WCAG Audit & Remediation: Barrierefreiheitsprüfer nutzen den Text der Hintergrundprüfung, um Kontrastfehler zu dokumentieren und zu beheben. Mit der Live-Vorschau und den eindeutigen Pass/Fail-Abzeichen können Sie den Beteiligten problemlos Probleme vor Augen führen und vorgeschlagene Farbänderungen testen, bevor Sie sie umsetzen.
• Mobiles und responsives Design: Mobile-Designer verwenden den Text in der Hintergrundprüfung, um die Lesbarkeit bei verschiedenen Bildschirmgrößen zu testen. Kleiner Text (14 Pixel) auf mobilen Hintergründen benötigt das höhere Kontrastverhältnis von 4,5:1, während große Überschriften mit 24 Pixeln den Schwellenwert von 3:1 verwenden können – der Prüfer verarbeitet beide Szenarien.
• E-Mail und digitales Publizieren: E-Mail-Designer und digitale Verleger verwenden den Text in der Hintergrundprüfung, um sicherzustellen, dass ihre Newsletter und Artikel lesbar sind. Durch unterschiedliche Hintergrundfarben und Textgrößen in den einzelnen Abschnitten trägt der Checker dazu bei, die Barrierefreiheit bei der Verwendung von Markenfarben aufrechtzuerhalten.
• Dashboard- und Datenvisualisierung: Datenanalysten und Dashboard-Designer verwenden den Text in der Hintergrundprüfung, um zu überprüfen, ob Beschriftungen, Legenden und Anmerkungen vor Diagrammhintergründen lesbar bleiben. Der benutzerdefinierte Schriftgrößenmodus ermöglicht das Testen mit genau den Größen, die in Datenvisualisierungen verwendet werden.

Der Text-Hintergrund-Kontrast misst den Unterschied in der wahrgenommenen Helligkeit zwischen Text und Hintergrund. Die WCAG (Web Content Accessibility Guidelines) definiert eine Formel für das Kontrastverhältnis, die diesen Unterschied auf einer Skala von 1:1 (kein Kontrast, z. B. schwarzer Text auf schwarzem Hintergrund) bis 21:1 (maximaler Kontrast, z. B. schwarzer Text auf weißem Hintergrund) quantifiziert. Das akzeptable Mindestverhältnis hängt von der Textgröße und davon ab, ob der Text fett ist – unser Text-auf-Hintergrund-Checker wertet alle diese Faktoren automatisch aus.

1. Geben Sie Ihre Farben ein: Geben Sie mithilfe der Farbeingaben oder der Farbauswahl eine Vordergrundfarbe (Textfarbe) und eine Hintergrundfarbe ein oder wählen Sie diese aus. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser – Ihre Farben verlassen nie Ihr Gerät. Nutzen Sie die Voreinstellungsschaltflächen für gängige Farbpaare oder die Tauschschaltfläche, um Vorder- und Hintergrund auszutauschen.
2. Textgröße und -stärke auswählen: Wählen Sie aus WCAG-Standard-Textskalen – Kleiner Text (normal), Großer Text, Kleiner Fettdruck oder Großer Fettdruck – oder wechseln Sie in den benutzerdefinierten Modus, um die Schriftgröße (12 bis 48 Pixel) und die Schriftstärke (400 bis 700) präzise zu steuern. Der Prüfer verwendet basierend auf Ihrer Auswahl automatisch die richtigen WCAG-Schwellenwerte.
3. Lesen Sie die Ergebnisse: Das Kontrastverhältnis wird oben deutlich mit einem farbcodierten Qualitätsindikator (ausgezeichnet, gut, mäßig oder schlecht) angezeigt. Pass/Fail-Abzeichen für WCAG AA und AAA zeigen an, ob Ihr Text die Barrierefreiheitsanforderungen erfüllt. Mit der Live-Textvorschau können Sie genau sehen, wie Ihr Text in der ausgewählten Größe und Stärke aussieht.

• Kleiner Text (Normal): Textkörper, Beschriftungen und Beschriftungen unter 18 pt (24 px) in normaler Schriftstärke oder unter 14 pt (18,67 px) in Fettschrift. Erfordert ein Kontrastverhältnis von 4,5:1 für AA-Konformität und 7:1 für AAA-Konformität. Dies ist die häufigste Textkategorie im Web.
• Großer Text: Text mit mindestens 18 pt (24 px) Normalschrift oder mindestens 14 pt (18,67 px) Fettschrift. Überschriften gelten in der Regel als großer Text. Erfordert ein Kontrastverhältnis von 3:1 für AA-Konformität und 4,5:1 für AAA-Konformität. Für große Texte gelten geringere Anforderungen, da sie leichter zu lesen sind.
• Benutzerdefinierte Größen: Der Prüfer verwendet die WCAG-Definition, um zu bestimmen, welcher Schwellenwert gilt. Wenn Ihre benutzerdefinierte Kombination aus Schriftgröße und -stärke der Definition für großen Text entspricht (24 Pixel normal oder 18,67 Pixel fett), werden automatisch die milderen Schwellenwerte für großen Text verwendet.

Beginnen Sie mit hohem Kontrast: Schwarzer Text auf weißem Hintergrund (21:1) ist die am besten lesbare Kombination. Obwohl Markenfarben wichtig sind, testen Sie sie immer vor Ihrem Hintergrund. Ein häufiger Fehler ist die Verwendung von hellgrauem Text auf weißem Hintergrund – selbst Mittelgrau (#767676) auf Weiß erreicht nur ein Verhältnis von 4,0:1, was die AA-Anforderung von 4,5:1 für normalen Text nicht erfüllt.

Berücksichtigen Sie bei der Auswahl der Farben die Textgröße: Sie können niedrigere Kontrastverhältnisse für große Überschriften verwenden (mindestens 3:1 AA) und gleichzeitig einen höheren Kontrast für den Fließtext beibehalten (mindestens 4,5:1 AA). Dies ermöglicht mehr Designflexibilität für den Anzeigetext, während der Hauptinhalt weiterhin zugänglich bleibt. Wenn eine Hintergrundfarbe zu hell oder zu dunkel ist, geben Sie immer empfohlene Textfarben mit der Schwarz/Weiß-Empfehlung des Checkers an.

Testen Sie mit echten Inhalten: Nutzen Sie die bearbeitbare Textvorschau, um mit Ihrer tatsächlichen Kopie zu testen. Mit dem Checker können Sie beliebigen Text eingeben und sehen, wie er in der ausgewählten Größe und Stärke gerendert wird. So erhalten Sie eine realistische Darstellung davon, wie Ihr Inhalt für Benutzer aussehen wird.