Générateur accessible de dégradés et de contraste CSS

Créez des dégradés et des ombres accessibles avec une vérification du contraste WCAG 2.1 en direct

Dégradé
135°
Effet
Ombre portée
0px
12px
30px
-8px
30%
Contenu de la carte

Votre design accessible

Le texte sur un dégradé n'est lisible que si le contraste est suffisant : cet outil le vérifie pour vous en temps réel.

Vérification du contraste WCAG
Cas le plus défavorable sur le dégradé – AA grand 3:1, AA 4.5:1, AAA 7:1.
Sortie CSS

                
            

        


        
        

            

            
La vérification du contraste utilise le cas le plus défavorable sur le dégradé : le minimum de tous les points échantillonnés. Assurez-vous que le titre (grand texte, 3:1), le corps (4.5:1) et le texte du bouton atteignent au moins AA.

        


        
        

            

            
Besoin d'une seule couleur ou d'une conversion HEX/RGB/HSL ? Utilisez notre sélecteur & convertisseur de couleurs.

        


        
        

            
 Générateur de dégradés CSS accessible avec vérificateur de contraste WCAG

            
Créez de beaux dégradés CSS réellement lisibles. Le générateur de dégradés accessible combine un dégradé linéaire (deux couleurs et un angle), une ombre portée et une vérification du contraste WCAG 2.1 en direct pour que votre design respecte les normes AA et AAA.


            
Comment fonctionne le contraste WCAG sur un dégradé ?

            
WCAG 2.1 mesure le contraste comme un rapport entre la couleur du texte et celle du fond. Comme le fond change le long du dégradé, cet outil compare la couleur du texte au cas le plus défavorable et vous avertit immédiatement si AA ou AAA n'est pas atteint.


            
Dégradé de texte et dégradé mesh

            
En plus du dégradé linéaire classique, vous pouvez créer un dégradé de texte (rogné dans le titre via background-clip: text) et un dégradé mesh avec des dégradés radiaux en couches, copiables directement en CSS ou en classes Tailwind.


            
Sortie du générateur de dégradés Tailwind

            
Passez la sortie en Tailwind et copiez des classes prêtes à l'emploi comme bg-gradient-to-br from-[#2563eb] to-[#7c3aed] ainsi que des valeurs d'ombre arbitraires directement dans votre code.

        


        

            
 Questions fréquentes

            

                

                    
Que signifient WCAG AA et AAA ?

                    
AA exige un rapport de contraste d'au moins 4.5:1 pour le texte normal (3:1 pour le grand texte), AAA exige 7:1 (4.5:1 pour le grand texte). Cet outil vérifie tous les textes de l'aperçu en temps réel contre ces seuils.

                

                

                    
Comment le contraste est-il calculé sur un dégradé ?

                    
Le fond varie le long du dégradé, l'outil échantillonne donc plusieurs points entre les deux couleurs et indique le cas le plus défavorable, le contraste le plus faible pouvant apparaître n'importe où sur le dégradé. Si ce point passe, tout le dégradé est sûr.

                

                

                    
L'outil est-il vraiment gratuit ?

                    
Oui. Le générateur de dégradés CSS est 100 % gratuit, fonctionne entièrement dans votre navigateur et n'envoie aucune donnée à un serveur.

                

                

                    
Puis-je utiliser le CSS généré dans des projets Tailwind ?

                    
Oui. Passez le format de sortie en Tailwind pour copier des classes prêtes à l'emploi de dégradé, d'ombre et de couleur de texte (y compris des valeurs arbitraires pour les angles, couleurs et ombres personnalisés).

                

                

                    
Puis-je intégrer cet outil sur mon site web ?

                    
Oui, absolument ! Vous pouvez intégrer le générateur de dégradés CSS gratuitement sur votre propre site web – simplement via une iframe. Sur la page des widgets à intégrer, vous trouverez le code d'intégration prêt à l'emploi et pourrez personnaliser les couleurs et le style.