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"

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"

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"

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.