♀

WCAG Kontrast Checker

Testen Sie mehrere Text-/Hintergrundfarbpaare anhand der WCAG-2.1-AA- und -AAA-Standards. Die Live-Vorschau zeigt genau, wie Text in verschiedenen Größen und Schriftschnitten aussieht.

Design-Tools Läuft lokal Keine Daten gesendet
WCAGBarrierefreiheitKontrastverhältnisa11y
Farbpaare exportieren 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA erfordert 4.5:1 für normalen Text, 3:1 für großen Text (18pt oder 14pt fett). WCAG AAA erfordert 7:1 für normalen Text, 4.5:1 für großen Text. AA anzustreben ist in den meisten Barrierefreiheitsvorschriften das gesetzliche Minimum.
    

  


  



  

    
Was ist der WCAG-AA-Kontrast-Checker?

    
Prüfen Sie Farbkontrastverhältnisse gegen die WCAG-AA- und -AAA-Standards. Testen Sie mehrere Text-/Hintergrund-Farbpaare gleichzeitig. Kostenlos, browserbasiert, keine Datenübertragung.

  


  

    
So verwendest du den WCAG Kontrast Checker

    
    
      
  1. Gib eine Vordergrundfarbe (Textfarbe) und eine Hintergrundfarbe über die Farbwähler ein oder indem du HEX-Werte eingibst.
    2. 
      
  2. Das Tool berechnet sofort das Kontrastverhältnis zwischen den beiden Farben.
    3. 
      
  3. Prüfe die AA- und AAA-Ergebnisse (bestanden/nicht bestanden) für normalen und großen Text.
    4. 
      
  4. Passe die Farben an, bis deine Kombination die benötigte WCAG-Stufe erfüllt.
    5. 
      
  5. Kopiere die bestandenen Farbwerte zur Verwendung in deinem CSS.
    6. 
    

  






  
Verwandte Tools

  

    👁️
Farbblindheit Simulator
Simuliere Protanopie, Deuteranopie, Tritanopie für jedes Bild

    🎨
Farbe wählen
Konvertieren Sie Farben zwischen HEX, RGB, HSL und CMYK

    🎨
Farbpalette Generator
Erzeugen Sie komplementäre, analoge und triadische Farbpaletten

  






  
    WCAG-AA-Kontrast verstehen
    ▾
  
  

    

      Beispiel
      

        

          

            Eingabe
            Vordergrund #1F2937 auf Hintergrund #FFFFFF
          

          

            Ausgabe
            Erfüllt WCAG AA für normalen Text und großen Text
          

        

      

    

    

      Häufige Anwendungsfälle
      

        
    
          
  • Textfarben vor dem Launch gegen WCAG AA prüfen
    • 
          
  • Barrierefreiheits-Regressionen in Design-System-Tokens überprüfen
    • 
          
  • Kontrast von Überschriften- und Fließtext getrennt prüfen
    • 
          
  • Konforme Farbpaare an Produktteams übergeben
    • 
        

      

    

    

      Häufig gestellte Fragen
      

        
Was ist der Unterschied zwischen AA und AAA?
AA ist die übliche Konformitätsstufe, die die meisten Vorschriften verlangen. AAA ist erhöht — nicht für alle Inhalte erforderlich, verbessert aber die Lesbarkeit.

        
Prüft dieser Checker den Nicht-Text-Kontrast?
WCAG 1.4.11 fordert 3:1 Kontrast für UI-Komponenten und grafische Elemente — dieser Checker deckt diese Anforderung ab.

        
Was macht der WCAG Kontrast Checker - Batch AA/AAA Test?
Der WCAG Kontrast Checker - Batch AA/AAA Test läuft vollständig in Ihrem Browser und hilft Ihnen, diese Aufgabe zu erledigen, ohne Daten auf einen Server hochzuladen.

        
Ist der WCAG Kontrast Checker - Batch AA/AAA Test kostenlos nutzbar?
Ja. Dieses Tool ist kostenlos nutzbar und erfordert keine Anmeldung.