Couleurs

Dans Maison, on ne choisit pas une couleur par élément : on définit des palettes de couleurs, puis chaque section en choisit une. Ouvrez Paramètres du thèmeCouleurs pour les modifier.

Les palettes livrées

Le thème est livré avec trois palettes monochromes, parce que dans une maison la couleur vient de la photographie :

Par défaut, la plupart des sections utilisent la palette 1 ; le manifeste, la newsletter et la vidéo la palette 2 ; le bandeau principal et l’en-tête de collection la palette 3.

Les six couleurs d’une palette

Couleur	Sert à
Arrière-plan	Le fond de la section.
Premier plan	Le texte, les icônes, le contour des boutons secondaires et l’anneau de focus.
Texte atténué	Les informations secondaires : prix dans les grilles, dates, compteurs.
Bordure	Les filets décoratifs entre les éléments.
Accent	Le fond du bouton principal (ajouter au panier, payer…).
Texte d’accent	Le texte du bouton principal.

Tout le reste est calculé à partir de ces six couleurs : le contour des champs et des options, le fond derrière les photos de produit, le voile derrière les tiroirs, les couleurs de survol et les illustrations de remplacement.

Créer ou modifier une palette

Garder un texte lisible

Les palettes livrées respectent les seuils de contraste du niveau WCAG AA. Si vous modifiez une palette, veillez à conserver :

• un contraste d’au moins 4,5:1 entre le premier plan et l’arrière-plan, entre le texte atténué et l’arrière-plan, et entre le texte d’accent et l’accent ;
• un contraste d’au moins 3:1 entre le premier plan et l’arrière-plan pour que les contours des champs restent visibles (le thème les calcule à partir de ces deux couleurs).

La bordure est décorative : elle peut rester très claire.

Palettes et images

Plusieurs sections posent du texte sur une photographie (bandeau principal, image derrière le texte, en-tête de collection, fiches « Pleine largeur », en-tête transparent). Leur voile est mélangé à partir de l’arrière-plan de la palette choisi : une palette sombre assombrit l’image, une palette claire l’éclaircit. Choisissez donc pour ces sections une palette dont l’arrière-plan contraste avec le texte que vous voulez lire, par exemple la palette 3 (fond sombre, texte clair).