Sélecteur de couleurs

Color Picker est la fonction de votre éditeur qui vous permet de gérer la palette de couleurs du texte, de l'arrière-plan, des superpositions, etc. Vous pouvez choisir une couleur dans la palette de couleurs, saisir une valeur HEX ou RGB ou même créer un dégradé personnalisé. La fonctionnalité de couleurs récentes vous aidera à maintenir la cohérence de votre palette de couleurs et à conserver une apparence professionnelle sur votre site.

Style de couleur

Avant de choisir la palette de couleurs, vous devez choisir où vous souhaitez utiliser une seule couleur ou un dégradé.

Si vous utilisez l'option d'une seule couleur, vous pouvez choisir une couleur parmi Couleurs récentes onglet ou passez à Choisissez une autre couleur.

arrière-plan dégradé sera une option disponible pour les arrière-plans de lignes, de colonnes et de widgets et pour les superpositions d'images. Pour appliquer un dégradé, avec le sélecteur de couleurs ouvert, cliquez sur la liste déroulante au-dessus de la palette de couleurs (cela peut indiquer couleur), sélectionnez Dégradé, puis assurez-vous de :

Choisissez 2 couleurs des arrêts de dégradé
- Vous pouvez inverser les couleurs pour ajuster le positionnement des butées
Choisissez la direction du dégradé
- L'option Center générera un gradient radial
- Les options latérales créeront un dégradé linéaire

Note

Les dégradés ne peuvent pas être enregistrés dans Couleurs du thème.

Couleurs du thème

Les couleurs du thème vous permettent de définir une palette de couleurs et de lier les couleurs individuelles à tout ou partie des widgets dotés de paramètres de couleur. La couleur de tout élément lié aux couleurs du thème sera automatiquement mise à jour lorsque la couleur liée sera modifiée dans les paramètres des couleurs du thème. Cela vous permet de modifier rapidement les couleurs, ce qui contribue à réduire le temps de conception et garantit la cohérence du style de votre site sur toutes les pages.

Pour savoir comment configurer les couleurs des thèmes, voirCouleurs du thème.

Couleurs enregistrées

Enregistrez les couleurs fréquemment utilisées sur votre site en les ajoutant à la liste des couleurs enregistrées dans le sélecteur de couleurs.

Pour ajouter une couleur aux couleurs enregistrées, cliquez sur l'onglet Couleurs enregistrées dans le sélecteur de couleurs, puis sur+icône. Pour supprimer une couleur de la liste des couleurs enregistrées, cliquez dessus avec le bouton droit de la souris et sélectionnezSupprimer.

Vous pouvez enregistrer jusqu'à 48 couleurs et dégradés dans la liste des couleurs enregistrées.

Couleurs récentes

Lorsque vous choisissez 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 des 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 sur la 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 couleur vertical

Pour faire correspondre parfaitement une couleur où que vous soyez sur votre site (images, textes, etc.), cliquez sur l'outil pipette et sélectionnez la couleur de votre site que vous souhaitez utiliser. Inutile de passer du temps à essayer de déterminer le nom ou la valeur exacts d'une couleur.

Opacité

Le curseur d'opacité détermine la transparence d'un élément. N'oubliez pas que lorsque vous réduisez l'opacité d'un élément, tout ce qui se trouve derrière celui-ci (image ou couleur d'arrière-plan) commencera à se fondre dans cet élément

Vérificateur de contraste pour les couleurs de texte

Le correcteur de contraste pour les couleurs du texte permet d'améliorer l'accessibilité des sites en indiquant si le contraste entre le texte et l'arrière-plan est conforme à la norme AA ou AAA*. Le correcteur de contraste apparaît dans le sélecteur de couleur chaque fois que celui-ci est utilisé pour

Voici les critères qui déterminent si la norme AA ou AAA est respectée :

Type de texte	Normes*	Taille de police	Rapport de contraste minimal
Texte normal	AAA	Moins de 18 points	7:1
Texte de grande taille	AAA	18 ou 14 points en gras	4.5:1
Texte normal	AA	Moins de 18 points	4.5:1
Texte de grande taille	AA	18 points en 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 présentent un contraste suffisant pour être lisibles, mais cela peut tout de même présenter des problèmes pour certains utilisateurs. Le niveau AAA signifie que vous avez un contraste élevé qui devrait être lisible pour la grande majorité de vos utilisateurs.

Voici un exemple du correcteur de couleur de contraste indiquant que le contraste du texte et de l'arrière-plan est conforme à la norme AAA.

Le correcteur de contraste sera désactivé dans les cas suivants :

Si le texte sélectionné comporte plusieurs couleurs. Par exemple, si plusieurs mots du texte sont bleus et plusieurs autres sont roses.
Si le texte est sur un fond dégradé.
Si le texte se trouve sur le fond d'une image.

Considérations relatives au sélecteur de couleurs

Le dégradé n'est pas disponible pour les éléments de texte, vous ne le verrez donc pas dans un sélecteur de couleurs pour les éléments de texte dans l'éditeur de conception de widgets de l'onglet Thème.
Lorsque vous travaillez avec des arrière-plans, si vous passez de la couleur à l'image, les paramètres de l'option précédente sont définis sur null. Par exemple, si vous utilisiez une couleur et que vous avez modifié le paramètre en Image, tous les paramètres de couleur ou de dégradé seront supprimés.
Les dégradés remplacent l'arrière-plan des boutons individuels. Pour les modifier à nouveau, sélectionnez de nouveau l'arrière-plan de chaque bouton