WCAG-Kontrastprüfer
Überprüfen Sie das Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe gemäß den WCAG-Barrierefreiheitsschwellen, bevor Sie sie auf Ihrer Website verwenden.
Beispieltitel
Hier ist ein Beispielabsatz, der die oben gewählte Text- und Hintergrundfarbe verwendet, um die Lesbarkeit zusätzlich zum WCAG-Wert visuell zu beurteilen.
So funktioniert es
Die WCAG-Empfehlungen definieren Mindestkontrastverhältnisse zwischen Text und Hintergrund, um sicherzustellen, dass eine Website für sehbehinderte Menschen oder bei schwierigen Anzeigebedingungen (schwach beleuchteter Bildschirm, Reflexionen) lesbar bleibt. Bevor Sie eine in Figma gewählte Farbkombination oder ein Erscheinungsbild bestätigen, berechnet dieses Tool das tatsächliche Verhältnis zwischen den beiden Farben und zeigt an, ob es die AA-Schwellen (empfohlenes Mindestniveau) und AAA (verstärktes Niveau) erfüllt.
Was ist der Unterschied zwischen „normalem Text“ und „großem Text“?
Der erforderliche Kontrastschwellenwert hängt von der Textgröße ab: Großer Text (ab etwa 18pt oder 14pt fett) bleibt mit geringerem Kontrast lesbar als Text normaler Größe, da die Buchstabenformen größer und leichter zu unterscheiden sind.
Sollte ich AA oder AAA anstreben?
Das Niveau AA ist der allgemein empfohlene und für die meisten Websites ausreichende Standard (und je nach Rechtsordnung oft eine gesetzliche Pflicht). Das Niveau AAA ist strenger und für Inhalte empfohlen, bei denen Barrierefreiheit Priorität hat, aber es ist mit bestimmten Markenpaletten manchmal schwer zu erreichen, ohne sie deutlich zu ändern.
100% lokale Verarbeitung: Die Berechnung des Kontrastverhältnisses erfolgt direkt in Ihrem Browser über WebAssembly, ohne jeglichen Aufruf eines externen Servers.