Refonte accessible - Page d’accueil Picard
Rôle
UX/UI Designer
Type
Exploration UX/UI
Focus
Accessibilité
Période
Mars 2026
Outils
Figma, Notion
Contexte
Présentation de Picard
Picard est une enseigne française spécialisée dans les produits surgelés et leader sur son marché. La marque propose une large gamme de produits et s’adresse à un public varié.
La page d’accueil du site joue un rôle central : elle permet de faire ses courses en ligne, découvrir les nouveautés, les promotions, ou encore des idées de recettes.
Enjeu d'accessibilité
L’accessibilité numérique est aujourd’hui un enjeu majeur pour les sites e-commerce, en particulier dans le secteur alimentaire où les services en ligne doivent être accessibles à tous.
Pour cette exploration, j’ai choisi de travailler sur l’accessibilité visuelle, en particulier pour les utilisateurs malvoyants, daltoniens ou utilisant des lecteurs d’écran.
En France, environ 8 % des hommes et 0,5 % des femmes sont concernés par le daltonisme.
Problèmes
Un premier audit de la page d’accueil met en avant plusieurs problèmes d’accessibilité :
🎨
Contrastes de couleurs insuffisants
👀
Hiérarchie visuelle peu claire
🖥️
Structure HTML peu adaptée aux lecteurs d’écran
⌨️
Navigation clavier complexe
Audit d'accessibilité
Méthodologie
Pour identifier les principaux problèmes d’accessibilité, j’ai réalisé un audit rapide de la page d’accueil en me basant sur les principes des WCAG (Web Content Accessibility Guidelines).
🛠️ Outils utilisés : testeurs de contraste, lecteur d’écran, outils d’audit d’accessibilité.
01. Contraste des couleurs
Plusieurs titres et boutons présentent un contraste insuffisant avec leur arrière-plan.
⚠️ Impact : lecture difficile pour les utilisateurs malvoyants ou daltoniens.
02. Lisibilité des boutons
Certains boutons sont placés sur des images, ce qui réduit leur contraste et leur visibilité.
⚠️ Impact : les actions principales sont plus difficiles à identifier.
03. Hiérarchie visuelle
La page présente peu d’espaces entre les sections, avec des blocs de contenu compacts.
⚠️ Impact : la lecture et la compréhension de la page sont difficiles.
Principaux enjeux
L’audit met en évidence plusieurs axes prioritaires pour améliorer l’accessibilité de la page d’accueil :
- Améliorer les contrastes de couleurs
Clarifier la hiérarchie visuelle
Améliorer la lisibilité des éléments interactifs
Axes d'amélioration
À partir de ces constats, j’ai défini plusieurs axes de travail pour améliorer l’accessibilité et la lisibilité de la page d’accueil.
🎨
Améliorer les contrastes
Optimiser les couleurs pour garantir une lisibilité conforme aux standards WCAG.
👀
Clarifier la hiérarchie visuelle
Structurer la page avec des titres plus visibles et des espacements cohérents.
🖱️
Rendre les boutons accessibles
Définir des états de boutons clairs pour améliorer leur visibilité et leur accessibilité.
🎯
Harmoniser l’interface
Réduire le nombre de styles et de couleurs pour une interface plus cohérente.
Solution
01. Structure et wireframes
J’ai repensé la page d’accueil pour améliorer la lisibilité, la hiérarchie visuelle et l’accessibilité des éléments interactifs.
🎯 Objectifs
- Clarifier la structure des sections.
- Définir une grille cohérente pour les cartes produits.
Wireframe d’une section – hiérarchie et structure claires
02. Refonte visuelle
1
Couleurs & typographie
Pour répondre aux problèmes de contraste identifiés, j’ai limité l’usage des couleurs et renforcé les contrastes pour garantir une lisibilité conforme aux standards WCAG (AA).
Palette de couleurs simplifiée – contrastes conformes
Hiérarchie typographique clarifiée
2
Composants clés
Les composants principaux ont été repensés pour améliorer la lisibilité et l’accessibilité.
Carte produit : avant / après
Pour répondre aux problèmes de hiérarchie et de lisibilité identifiés lors de l’audit, j’ai retravaillé la carte produit :
- Titres et informations secondaires hiérarchisés
- Prix principal mis en valeur
- “Prix carte” encadré pour rester lisible sans masquer le prix normal
Différents états des boutons
Pour améliorer la visibilité et l’accessibilité des boutons, j’ai défini des états clairs (hover, focus) et renforcé les contrastes.
Résultat final
Avant / après de la page d’accueil : une interface plus lisible, mieux structurée et plus accessible.
Page d'accueil - Avant
➡️ Faites défiler pour découvrir toute la page
Page d'accueil - Après
➡️ Faites défiler pour découvrir toute la page
Améliorations
Synthèse des améliorations apportées
Impact attendu
Ces améliorations permettent une expérience plus accessible et plus fluide :
🔎
Faciliter la lecture pour les utilisateurs malvoyants ou daltoniens
🧠
Améliorer la compréhension des contenus
🎯
Rendre les actions plus facilement identifiables
🧑🏻💻
Offrir une navigation plus fluide
Apprentissages
Ce projet m’a permis de renforcer ma pratique du design en intégrant les enjeux d’accessibilité et de lisibilité.
✅
Approfondir les principes d’accessibilité (WCAG)
📋
Travailler la hiérarchie visuelle pour améliorer la compréhension
🎨
Mieux comprendre l’impact des choix UI sur l’expérience utilisateur
Une prochaine étape serait de tester ces améliorations auprès d’utilisateurs pour valider leur efficacité.