Le sélecteur de couleurs est une fonctionnalité de votre éditeur qui vous permet de gérer les couleurs du texte, de l'arrière-plan, des superpositions et plus encore. Vous pouvez choisir une couleur dans la palette, saisir une valeur HEX ou RGB, ou même créer un dégradé personnalisé. La fonction « Couleurs récentes » vous aide à conserver une palette de couleurs cohérente et à maintenir un aspect professionnel sur votre site.
Lorsque vous utilisez le sélecteur de couleurs, vous disposez des options suivantes :
Style de couleur
Avant de choisir votre palette de couleurs, déterminez où vous souhaitez utiliser une couleur unique ou un dégradé .
Si vous utilisez l' option couleur unique , vous pouvez choisir une couleur dans l'onglet « Couleurs récentes » ou accéder directement à « Choisir une autre couleur ».
L'arrière-plan dégradé sera disponible pour les lignes, les colonnes, les widgets et 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érera un dégradé radial.
- Les options latérales créeront un dégradé linéaire.
Note:
Les dégradés ne peuvent pas être enregistrés dans les couleurs du thème .
Couleurs globales
Les couleurs globales vous permettent de définir une palette de couleurs et d'associer chaque couleur à un ou plusieurs widgets disposant de paramètres de couleur. La couleur de tout élément associé aux couleurs globales sera automatiquement mise à jour lorsque la couleur associée est modifiée dans les paramètres des couleurs globales. Vous pouvez ainsi modifier rapidement les couleurs, ce qui réduit le temps de conception et garantit la cohérence du style de votre site sur toutes les pages. Pour savoir comment configurer les couleurs globales, consultez la section Couleurs du thème.
Couleurs enregistrées
Enregistrez les couleurs fréquemment utilisées sur votre site en les ajoutant à la liste « Couleurs enregistrées » du sélecteur de couleurs. Pour ajouter une couleur, cliquez sur l’onglet « Couleurs enregistrées » du sélecteur de couleurs, puis sur « + ». Pour supprimer une couleur, faites un clic droit dessus et sélectionnez « Supprimer ».
Note:
Vous pouvez enregistrer jusqu'à 48 couleurs et dégradés dans la liste des couleurs enregistrées.
Couleurs récentes
Lors du choix d'une couleur, le menu des couleurs récentes affiche un échantillon des couleurs récemment utilisées sur votre site. Cela vous permet de sélectionner rapidement les couleurs déjà présentes sur votre site.
Choisissez une autre couleur
Sélectionnez la teinte d'une couleur à l'aide de la palette de couleurs à droite ou du panneau de couleurs. Vous pouvez également saisir la valeur HEX ou RGB de la couleur souhaitée dans la zone de texte située sous le dégradé de couleurs vertical.
Pour reproduire fidèlement une couleur présente sur votre site (images, textes, etc.), cliquez sur l'outil Pipette et sélectionnez la couleur souhaitée. Inutile de chercher son nom ou valeur exacte.
Opacité
Le curseur d'opacité détermine la transparence d'un élément. Sachez que lorsque vous réduisez l'opacité d'un élément, ce qui se trouve derrière (image ou couleur d'arrière-plan) commence à se fondre avec lui.
Vérificateur de contraste pour les couleurs de texte
L'outil de vérification du contraste des couleurs de texte contribue à améliorer l'accessibilité des sites en indiquant si le contraste entre le texte et le fond est conforme à la norme AA ou AAA*. Cet outil apparaît dans le sélecteur de couleurs dès que celui-ci est utilisé pour le texte.
Voici les critères permettant de déterminer si la norme AA ou AAA est respectée:
| 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 |
*Dans les normes d'accessibilité, « AA » et « AAA » représentent différents niveaux d'exigences en matière de contraste des couleurs.
- Le niveau AA signifie que vos couleurs ont un contraste suffisant pour être lisibles, mais peuvent tout de même poser problème à certains utilisateurs.
- Le niveau AAA signifie que le contraste est élevé et que l'image devrait être lisible pour 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 circonstances suivantes :
- Le texte sélectionné comporte plusieurs couleurs. Par exemple, si certains mots du texte sont bleus et d'autres roses.
- Le texte se détache sur un fond dégradé.
- Le texte se détache sur un fond d'image.
Considérations
L'effet de dégradé n'est pas disponible pour les éléments de texte ; vous ne le verrez donc pas dans le sélecteur de couleurs des éléments de texte de l'éditeur de conception des widgets de l'onglet « Conception globale ».
Lorsque vous travaillez avec des arrière-plans, le passage de « Couleur » à « Image » annule les paramètres de l'option précédente. Par exemple, si vous utilisiez une couleur et que vous passiez à « Image », tous les paramètres de couleur ou de dégradé seront supprimés.
Les dégradés remplacent l'arrière-plan de chaque bouton. Pour les rétablir, resélectionnez l'arrière-plan de chaque bouton.
