Générateur de palette Elementor : kit global et contraste
Choisissez les quatre couleurs et quatre polices globales, vérifiez que le texte est lisible et téléchargez un kit à importer dans Elementor ou les variables CSS.
- Gratuit
- sans inscription
- tout se passe dans votre navigateur
Contraste (WCAG AA)
| Combinaison | Ratio | Texte normal | Grand texte |
|---|
Aperçu avec les polices installées sur votre ordinateur
Titre principal
Sous-titre secondaire
Texte de paragraphe pour vérifier qu'il se lit bien sur le fond choisi.
BoutonImporter dans Elementor : Outils › Importer/Exporter le kit › Importer. Faites une sauvegarde avant.
Comment créer le kit global avec l'outil
Définissez la palette
Principale, secondaire, texte et accent, avec les mêmes ID qu'Elementor utilise pour ses globaux. Pour chacun, une couleur, une police et une graisse.
Vérifiez le contraste
Choisissez la couleur de fond de votre site. Chaque combinaison affiche son ratio et indique si elle passe WCAG AA pour le texte normal et grand.
Téléchargez
Un kit .zip à importer dans Elementor, ou les variables CSS --e-global-* à coller dans votre thème.
Ce que génère le kit global
Un kit qu'Elementor importe
Le .zip suit le format d'export d'Elementor : un manifest.json et un site-settings.json avec les couleurs et polices du système.
Variables CSS avec les noms d'Elementor
Les variables utilisent les mêmes noms qu'Elementor génère (--e-global-color-primary, --e-global-typography-primary-font-family…).
Contraste WCAG AA
Le tableau calcule le ratio de chaque couleur sur le fond. AA exige 4,5:1 pour le texte normal et 3:1 pour le texte grand.
Aperçu
Un titre, un sous-titre, un paragraphe et un bouton avec vos couleurs et polices, pour vérifier que la combinaison est lisible.
Comment définir les couleurs globales d'Elementor manuellement
Dans l'éditeur Elementor, ouvrez le menu et allez dans Paramètres du site. Les couleurs globales et les polices globales se trouvent là. Les quatre premières (principale, secondaire, texte et accent) sont les couleurs système.
Un widget utilise une couleur globale quand vous la choisissez depuis l'icône des globaux. Modifiez ce global et il change dans tous les widgets qui l'utilisent.
Le faire manuellement convient pour un site. Si vous construisez plusieurs sites avec la même marque, le kit économise du temps.
Et les couleurs saisies manuellement sur le site ?
Un nouveau kit ne modifie pas les widgets avec une couleur saisie manuellement. Le plugin de système de design les trouve et les convertit en globaux ou en variables Elementor 4.
Design system · Bientôt disponible
Ce que cet outil ne fait pas
- Il ne modifie pas les couleurs saisies manuellement dans les widgets : il définit uniquement les globaux.
- Pour les polices, il définit la famille et la graisse ; la taille et la hauteur de ligne sont réglées ensuite dans Elementor.
- L'aperçu utilise les polices installées sur votre ordinateur ; sur le site, Elementor les charge.
- Il ne crée pas de variables Elementor 4, qui sont un système distinct des couleurs globales.
Autres outils gratuits
Chercher et remplacer dans le JSON Elementor
Modifiez textes et liens dans un modèle exporté sans casser le JSON.
Texte de consentement pour formulaires
La notice de protection des données de premier niveau et les cases à cocher, en HTML.
Smart Search & Replace
Recherchez et remplacez textes et liens dans tout Elementor, avec aperçu et annulation.
Couleurs globales Elementor : questions fréquentes
Où se trouvent les couleurs globales dans Elementor ?
Dans l'éditeur, sous le menu › Paramètres du site › Couleurs globales. Les polices sont à côté, sous Polices globales.
Le kit supprimera-t-il mes couleurs personnalisées ?
Non : en important un kit, Elementor remplace les quatre couleurs et polices système et ajoute les personnalisées à celles que vous avez déjà. Faites une sauvegarde avant.
Quel ratio de contraste faut-il ?
WCAG 2.2 niveau AA exige 4,5:1 pour le texte normal et 3:1 pour le texte grand (24 px, ou 18,66 px en gras).
Fonctionne-t-il avec Elementor 4 ?
Oui. Le kit a été testé en l'important dans Elementor 4.4. Les variables Elementor 4 sont autre chose et ce kit ne les crée pas.