Utilisez le sélecteur de couleurs pour gérer les couleurs du texte, des arrière-plans, des superpositions, etc. Vous pouvez choisir des couleurs dans une palette, saisir des valeurs HEX ou RGB, ou créer des dégradés personnalisés. La fonction « Couleurs récentes » vous permet de conserver une apparence professionnelle et cohérente sur l’ensemble de votre site.
Choisir un style de couleur
Avant de choisir une couleur, décidez si l'élément doit utiliser une couleur unie ou un dégradé.
-
Couleur unique
Si vous utilisez une seule couleur, choisissez-en une dans l'onglet « Couleurs récentes » ou sélectionnez « Choisir une autre couleur ».
-
Dégradé
Des dégradés sont disponibles pour l'arrière-plan des lignes, des colonnes et des widgets, ainsi que pour les superpositions d'images. Pour appliquer un dégradé, assurez-vous de :
- Choisissez deux couleurs pour les arrêts du dégradé. Vous pouvez inverser les couleurs pour ajuster la position de l'arrêt.
- Choisissez une direction de dégradé :
- L'option centrale génère un dégradé radial.
- Les options latérales créent un dégradé linéaire.
Note:
Les dégradés ne peuvent pas être enregistrés dans les couleurs du thème .
Gestion des couleurs globales
Les couleurs globales vous permettent de définir une palette de couleurs principale et d'associer ces couleurs à des widgets. Lorsque vous modifiez une couleur globale, tous les éléments associés sont automatiquement mis à jour. Cela réduit le temps de conception et garantit une cohérence de style sur toutes les pages. Pour savoir comment les configurer, consultez notre article sur les couleurs du thème.
Sauvegarder et utiliser les couleurs
Couleurs enregistrées
Enregistrez vos couleurs et dégradés préférés dans la liste « Couleurs enregistrées » pour y accéder facilement. Vous pouvez y enregistrer jusqu'à 48 couleurs et dégradés.
- Ajouter une couleur : Cliquez sur l’onglet Couleurs enregistrées dans le sélecteur de couleurs et cliquez sur + .
- Supprimer une couleur : Cliquez avec le bouton droit sur la couleur et sélectionnez Supprimer .
Couleurs récentes
Le menu « Couleurs récentes » affiche un échantillon des couleurs récemment utilisées sur votre site, vous permettant de réappliquer rapidement les teintes existantes.
Choisissez une autre couleur
Sélectionnez une teinte à l'aide de la palette de couleurs ou du panneau de couleurs. Vous pouvez également saisir une valeur HEX ou RGB dans la zone de texte.
Pour reproduire parfaitement une couleur d'un élément existant du site, cliquez sur l'icône pipette et sélectionnez la couleur souhaitée sur la page.
Ajuster l'opacité
Utilisez le curseur d'opacité pour régler la transparence d'un élément. Plus vous réduisez l'opacité, plus la couleur ou l'image d'arrière-plan se fond avec l'élément.
Vérification du contraste du texte pour l'accessibilité
Le vérificateur de contraste améliore l'accessibilité du site en indiquant si le contraste entre le texte et son arrière-plan est conforme aux normes AA ou AAA. Cet outil s'affiche automatiquement lors de l'utilisation du sélecteur de couleurs pour les éléments de texte.
Les critères suivants déterminent les niveaux d'accessibilité :
| Type de texte | Normes* | Taille de la police | Rapport de contraste minimal |
|---|---|---|---|
| Texte normal | AAA | Moins de 18 points | 7:1 |
| Texte en gros caractères | AAA | 18 pt ou 14 pt | 4,5:1 |
| Texte normal | AA | Moins de 18 points | 4,5:1 |
| Texte en gros caractères | AA | 18 points gras ou 24 points et plus | 3:1 |
- Niveau AA : Les couleurs présentent un contraste suffisant pour être lisibles par la plupart des utilisateurs, mais peuvent néanmoins poser problème à certains d’entre eux.
- Niveau AAA : Contraste élevé, lisible par la grande majorité des utilisateurs.
Voici un exemple de mire de contraste indiquant que le contraste entre le texte et l'arrière-plan répond à la norme AAA :
Le vérificateur de contraste est désactivé dans les cas suivants :
- Le texte sélectionné contient plusieurs couleurs.
- Le texte est placé sur un fond dégradé.
- Le texte est placé sur un fond d'image.
Considérations
- Les dégradés ne sont pas disponibles pour le texte. Cette option n'apparaît pas dans le sélecteur de couleurs des éléments de texte, ni dans l'onglet « Design global », ni dans les éditeurs de widgets.
- Lors de la manipulation des arrière-plans, le passage de « Couleur » à « Image » rétablit la sélection précédente. Par exemple, le passage d'une couleur à une image supprime les paramètres de couleur ou de dégradé.
- Les dégradés remplacent l'arrière-plan de chaque bouton. Pour rétablir l'arrière-plan initial, sélectionnez à nouveau l'arrière-plan de chaque bouton.
