colorize
ColorKit
CK

Farbkontrast-Prüfer

Testen Sie Farbkombinationen für Vorder- und Hintergrund auf barrierefreie WCAG- und APCA-Konformität.

Contrast Ratio

6.29 : 1

WCAG AA (Normal)PASS
WCAG AA (Large)PASS
WCAG AAA (Normal)FAIL
UI ComponentsPASS

Auto-Adjust to Pass:

Live Preview Headline

This is a subheadline that demonstrates slightly smaller text. It needs at least a 4.5:1 ratio to be considered legible under WCAG AA guidelines.

This is a standard body paragraph. Good contrast ensures that all users, including those with visual impairments, can read your content without eye strain.

UI components and borders require a 3.0:1 ratio.

Was leistet dieser Farbkontrast-Prüfer?

Das Tool berechnet das exakte mathematische Kontrastverhältnis zwischen Text und Hintergrund, um sicherzustellen, dass Ihre Designs den Web Content Accessibility Guidelines (WCAG 2.2) entsprechen.

Für wen ist dieses Werkzeug bestimmt?

Für UI/UX-Designer, Frontend-Entwickler und Accessibility-Auditoren, die barrierefreie und gesetzlich konforme digitale Produkte entwickeln.

WCAG AA und AAA Anforderungen

  • WCAG AA (Normaler Text): Mindestens 4.5:1.
  • WCAG AA (Großer Text): Mindestens 3.0:1 bei 18pt oder 14pt fett.
  • WCAG AAA (Strengster Standard): Verlangt 7.0:1.
Wissensdatenbank & FAQ

Häufig gestellte Fragen

Direkte Antworten und Lösungen zu häufigen Fragen, technischen Herausforderungen und Webstandards.

Was ist das gesetzliche Mindestkontrastverhältnis für Texte nach WCAG und Barrierefreiheit?expand_more
Gemäß WCAG 2.1 / 2.2 Stufe AA (dem maßgeblichen internationalen Standard für barrierefreie Webinhalte):
  • Normaler Text (< 18pt oder 14pt fett): Mindestens ein Kontrastverhältnis von 4.5:1 zum Hintergrund erforderlich.
  • Großer Text (≥ 18pt normal oder 14pt fett): Mindestens 3.0:1 erforderlich.
  • Bedienelemente & Grafiken: Formularrahmen, Fokusindikatoren und Icons müssen mindestens 3.0:1 aufweisen.
Was unterscheidet die WCAG-Stufen AA und AAA voneinander?expand_more
WCAG AA ist der weltweit gesetzlich geforderte Standard für E-Commerce, Banken, Behörden und Unternehmen (4.5:1 für Fließtext). WCAG AAA ist die höchste Konformitätsstufe für medizinische Einrichtungen und Seniorendienste, die ein Kontrastverhältnis von mindestens 7.0:1 für normalen Fließtext verlangt.
Warum fallen Formular-Platzhalter (Placeholders) oft durch Barrierefreiheitsprüfungen?expand_more
Standard-Browserstile verwenden für Platzhalter oft schwache Grautöne (z. B. #9CA3AF auf Weiß), die nur 2.0:1 bis 2.5:1 erreichen. Bewährte Praxis: Verwenden Sie stets explizite <label>-Elemente und formatieren Sie den Platzhaltertext mit ausreichendem Kontrast.
Wie berechnet die W3C-Formel die relative Leuchtdichte (Luminanz)?expand_more
Die relative Leuchtdichte (L) beschreibt die wahrgenommene Helligkeit von 0,0 (tiefes Schwarz) bis 1,0 (reines Weiß). Da das menschliche Auge für Grün am empfindlichsten ist, werden die linearisierten sRGB-Kanäle gewichtet: 
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
Das Kontrastverhältnis ergibt sich aus (L1 + 0.05) / (L2 + 0.05).
Darf man weißen Text auf rein gelbem Hintergrund (#FFFF00) verwenden?expand_more
Nein. Reines Gelb und Cyan besitzen eine extrem hohe Eigenhelligkeit. Mit weißem Text kombiniert entsteht ein unzureichendes Kontrastverhältnis von nur 1.07:1 bis 1.25:1. Mit dunklem Text (#0F172A) kombiniert erreicht Gelb hingegen ein exzellentes Verhältnis von 16.8:1.