Barrierefreier CSS-Gradient- & Kontrast-Generator

Erstelle barrierefreie Verläufe und Box-Shadows mit Live-WCAG-2.1-Kontrastcheck

Verlauf
135°
Effekt
Box-Shadow
0px
12px
30px
-8px
30%
Karteninhalt

Dein barrierefreies Design

Text auf einem Verlauf ist nur lesbar, wenn der Kontrast reicht – dieses Tool prüft das für dich in Echtzeit.

WCAG-Kontrastcheck
Worst-Case über den Verlauf – AA groß 3:1, AA 4.5:1, AAA 7:1.
CSS-Ausgabe

                
            

        


        
        

            

            
Der Kontrastcheck nutzt den Worst-Case über den Verlauf: das Minimum aller Probepunkte. Achte darauf, dass Überschrift (großer Text, 3:1), Fließtext (4.5:1) und Button-Text mindestens AA erreichen.

        


        
        

            

            
Du brauchst nur eine einzelne Farbe oder eine HEX/RGB/HSL-Umrechnung? Nutze unseren Colorpicker & Farbumrechner.

        


        
        

            
 Barrierefreier CSS-Gradient-Generator mit WCAG-Kontrastcheck

            
Erstelle schöne CSS-Verläufe, die wirklich lesbar sind. Der barrierefreie Gradient-Generator kombiniert einen linearen Verlauf (zwei Farben und Winkel), einen Box-Shadow und einen Live-WCAG-2.1-Kontrastcheck – damit dein Design die Kontrast-Standards AA und AAA erfüllt.


            
Wie funktioniert der WCAG-Kontrast auf einem Verlauf?

            
WCAG 2.1 misst Kontrast als Verhältnis zwischen Text- und Hintergrundfarbe. Auf einem Verlauf ändert sich der Hintergrund, daher prüft dieses Tool die Textfarbe gegen den Worst-Case über den gesamten Verlauf und warnt sofort, wenn AA oder AAA nicht erreicht wird.


            
CSS-Textverlauf und Mesh-Gradient

            
Neben dem klassischen linearen Verlauf kannst du einen CSS-Textverlauf (Verlauf per background-clip: text in die Überschrift geschnitten) und einen Mesh-Gradient mit mehrschichtigen radialen Verläufen erstellen – direkt kopierbar als CSS oder Tailwind-Klassen.


            
Tailwind-Gradient-Generator-Ausgabe

            
Wechsle die Ausgabe auf Tailwind und kopiere fertige Klassen wie bg-gradient-to-br from-[#2563eb] to-[#7c3aed] sowie beliebige Schattenwerte direkt in dein Markup.

        


        

            
 Häufig gestellte Fragen

            

                

                    
Was bedeuten WCAG AA und AAA?

                    
AA verlangt ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text (3:1 für großen Text), AAA verlangt 7:1 (4.5:1 für großen Text). Dieses Tool prüft alle Vorschau-Texte in Echtzeit gegen diese Schwellenwerte.

                

                

                    
Wie wird der Kontrast auf einem Verlauf berechnet?

                    
Der Hintergrund variiert entlang des Verlaufs, daher probt das Tool mehrere Punkte zwischen den beiden Farben und meldet den Worst-Case – den niedrigsten Kontrast, der irgendwo auf dem Verlauf auftreten kann. Wenn dieser Punkt besteht, ist der gesamte Verlauf sicher.

                

                

                    
Ist das Tool wirklich kostenlos?

                    
Ja. Der CSS-Gradient-Generator ist zu 100% kostenlos, läuft komplett in deinem Browser und lädt keine Daten auf einen Server hoch.

                

                

                    
Kann ich das generierte CSS in Tailwind-Projekten verwenden?

                    
Ja. Wechsle das Ausgabeformat auf Tailwind, um fertige Gradient-, Schatten- und Textfarben-Klassen zu kopieren (inklusive beliebiger Werte für eigene Winkel, Farben und Schatten).

                

                

                    
Kann ich dieses Tool auf meiner Website einbetten?

                    
Ja, absolut! Du kannst den CSS-Gradient-Generator kostenlos auf deiner eigenen Website einbetten – einfach über einen iframe. Auf der Embed-Widgets-Seite findest du den fertigen Embed-Code und kannst Farben und Stil anpassen.