Color

Le champ de type color_contrast permet de sélectionner une couleur via un sélecteur visuel et de vérifier automatiquement le contraste avec d'autres couleurs définies. Ce champ est particulièrement utile pour s'assurer de l'accessibilité des textes sur fond coloré.

Utilisation de base

exemple-basique.yaml

primary_color:
    label: "Couleur principale"
    type: "color_contrast"
    default: "#000000"
    check_contrast_colors_ids: "color-primary,color-secondary,color-tertiary"
    add_to_editor: true

Intégration avec SCSS

Pour une intégration optimale avec votre feuille de style SCSS, vous pouvez lier la valeur du champ à une variable SCSS. Assurez-vous que la variable est déclarée avec !default pour permettre la surcharge :

style.scss

$color-primary: #000000 !default;
$color-secondary: #ffffff !default;

body {
    color: $color-primary;
    background-color: $color-secondary;
}

Paramètres

Paramètre obligatoire

type Requis

• Type : string
• Valeur : "color_contrast"
• Description : Spécifie qu'il s'agit d'un champ de sélection de couleur avec vérification de contraste

Paramètres optionnels

default

• Type : string
• Défaut : "#000000"
• Format : Code couleur hexadécimal (#RRGGBB ou #RGB)
• Description : Définit la couleur par défaut du sélecteur
• Exemple : "#ff0000" (rouge), "#00f" (bleu)

check_contrast_colors_ids

• Type : string
• Défaut : "" (chaîne vide)
• Format : Liste d'ID de champs séparés par des virgules
• Description : Liste des identifiants d'autres champs color_contrast avec lesquels vérifier le contraste
• Exemple : "header-bg,footer-bg,button-bg"

add_to_editor

• Type : bool
• Défaut : false
• Description : Ajoute la couleur à la palette Gutenberg
• Exemple : true

Exemple avancé

customize/theme_colors.yaml

# Définition des couleurs du thème
theme_colors:
    label: "Couleurs du thème"
    type: "section"
    fields:
        primary_color:
            label: "Couleur principale"
            type: "color_contrast"
            default: "#2c3e50"
            check_contrast_colors_ids: "text_color,link_color"
            description: "Couleur principale du thème, utilisée pour les titres et éléments importants"

        text_color:
            label: "Couleur du texte"
            type: "color_contrast"
            default: "#333333"
            check_contrast_colors_ids: "primary_color,background_color"

        background_color:
            label: "Couleur de fond"
            type: "color_contrast"
            default: "#ffffff"
            check_contrast_colors_ids: "text_color,link_color"

        link_color:
            label: "Couleur des liens"
            type: "color_contrast"
            default: "#3498db"
            check_contrast_colors_ids: "background_color"

Intégration avec la palette Gutenberg

La propriété add_to_editor permet d'ajouter automatiquement la couleur à la palette de l'éditeur Gutenberg.

customize/colors.yaml

elementum_primary:
    label: "Couleur principale"
    type: "color_contrast"
    default: "#2d2a24"
    add_to_editor: true
    editor_slug: "primary"

Propriété	Type	Défaut	Description
add_to_editor	bool	false	Ajoute la couleur à la palette Gutenberg
editor_slug	string	ID du champ	Slug CSS propre (ex: primary). Si absent, l'ID du champ Customizer est utilisé, ce qui peut générer un slug long.

astuce

Toujours définir un editor_slug court et en kebab-case. Gutenberg génère les classes CSS .has-{slug}-color à partir de ce slug — un slug long produit des classes illisibles.

Bonnes pratiques

1. Accessibilité : Vérifiez toujours le contraste entre la couleur du texte et celle de son arrière-plan
2. Cohérence : Limitez le nombre de couleurs principales pour maintenir une identité visuelle cohérente
3. Documentation : Documentez le rôle de chaque couleur dans votre thème
4. Valeurs par défaut : Fournissez toujours des valeurs par défaut accessibles

Notes importantes

attention

Le champ de type color est obsolète. Utilisez toujours color_contrast pour bénéficier des fonctionnalités de vérification de contraste.

Pour plus d'informations sur les ratios de contraste recommandés, consultez les exigences du RGAA sur le contraste des couleurs.