👁 Ein Toolkit,
jede Designaufgabe

Kontrastprüfer

Überprüfen Sie die WCAG AA/AAA-Konformität für Text und Hintergrundfarben. Erhalten Sie sofort Bewertungen zur Barrierefreiheit.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

👁 Kontrastprüfer

Leitfaden zur Farbkontrastprüfung

Der Farbkontrast ist der Unterschied in der Leuchtdichte zwischen Text und Hintergrund. Ein guter Kontrast gewährleistet die Lesbarkeit für alle Benutzer, auch für Menschen mit Sehbehinderungen.

Geben Sie eine Textfarbe und eine Hintergrundfarbe ein. Das Tool berechnet das Kontrastverhältnis und teilt Ihnen mit, ob es die WCAG-Standards AA (Minimum) oder AAA (erweitert) erfüllt.

Pro Tips

Frequently Asked Questions

Q: Was ist WCAG?
Was ist WCAG? WCAG (Web Content Accessibility Guidelines) ist der internationale Standard für Web-Barrierefreiheit.
Q: Welches Kontrastverhältnis ist gut?
Welches Kontrastverhältnis ist gut? 4,5:1 für normalen Text (AA), 3:1 für großen Text (AA), 7:1 für erweiterten Text (AAA).
Q: Welches WCAG-Level sollte ich anstreben?
Welches WCAG-Level sollte ich anstreben? Zielen Sie bei Standard-Websites auf WCAG AA (4,5:1 für normalen Text). Für barrierefreie Projekte oder Regierungsstandorte zielen Sie auf WCAG AAA (7:1). Großer Text (18 Pixel+ fett) benötigt 3:1 oder 4,5:1.
Q: Prüft dieses Tool auf Farbenblindheit?
Prüft dieses Tool auf Farbenblindheit? Nein, beim Kontrastverhältnis geht es um die Leuchtdichte, nicht um die Farbwahrnehmung. Verwenden Sie unseren Farbenblindheitssimulator zusammen mit dem Kontrastprüfer für umfassende Tests der Barrierefreiheit.
Q: Wie behebe ich ein fehlerhaftes Kontrastverhältnis?
Wie behebe ich ein fehlerhaftes Kontrastverhältnis? Verdunkeln Sie entweder die Textfarbe, hellen Sie die Hintergrundfarbe auf, erhöhen Sie die Schriftgröße oder machen Sie den Text fett. Das Tool zeigt in Echtzeit an, welche WCAG-Level bestanden oder nicht bestanden werden.

Bauhaus-Farben

Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.

Bauhaus Rot #BE1E2D

Das ikonische Rot der Bauhaus-Plakate und Drucksachen

Bauhaus Gelb #FFDE17

Das leuchtende Gelb der Bauhaus-Ästhetik

Bauhaus Blau #00509E

Das tiefe Blau des Bauhaus-Farbkreises

Ultramarin #120A8F

Historisches Pigment aus Lapislazuli, von Goethe beschrieben

Ocker #C78B2C

Erdpigment der deutschen Renaissance-Malerei

Petrol #006D7C

Das Blaugrün der Nachkriegszeit und des Mid-Century-Designs

Lindgrün #7CBA3D

Das frische Grün der Frühlingslinden

Ziegelrot #B22222

Die roten Ziegeldächer der Altstädte

Graphit #38383A

Der dunkle Grauton der Zeichenkunst und des Industriedesigns

Weiß #F4F4F4

Das Weiß der Bauhaus-Wände — Raum und Licht

Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.