Le RGAA oblige-t-il à respecter le contraste des couleurs ?
Oui. Le Référentiel Général d'Amélioration de l'Accessibilité (RGAA 4.1) impose aux organismes publics français de respecter les critères WCAG 2.1 niveau AA. Cette obligation découle de la loi du 11 février 2005 pour l'égalité des droits des personnes handicapées, renforcée par l'article 47 de la loi du 7 octobre 2016 et le décret du 24 juillet 2019. La Direction interministérielle du numérique (DINUM) publie des audits de conformité et des outils de vérification RGAA.
En pratique, le critère RGAA 3.2 exige un rapport de contraste d'au moins 4,5:1 pour le texte courant et 3:1 pour les grands textes (18pt ou 14pt en gras). Un formulaire de contact avec un label gris clair sur fond blanc est un manquement typique.
Les entreprises privées ne sont pas soumises à cette obligation légale, mais les sites recevant plus de 250 millions d'euros de chiffre d'affaires annuel en France peuvent y être soumis via le règlement européen EAA (European Accessibility Act) applicable depuis juin 2025.
Quels ratios de contraste dois-je atteindre pour le RGAA ?
Le RGAA 4.1 reprend les deux niveaux WCAG :
- Niveau AA (minimum légal secteur public) : 4,5:1 pour le texte normal, 3:1 pour les grands textes et les composants d'interface
- Niveau AAA (objectif supérieur) : 7:1 pour le texte normal, 4,5:1 pour les grands textes
Un piège courant : un gris #767676 sur blanc atteint exactement 4,5:1, juste au niveau minimum. Une nuance plus claire et le critère est raté. Le vérificateur de contraste calcule le ratio à partir de deux couleurs et affiche un aperçu du rendu en temps réel.
Comment convertir une couleur entre HEX, RGB, HSL et OKLCH ?
Chaque format a son usage dans un workflow CSS moderne :
- HEX (
#1d70b8) est le standard dans les fichiers de design et les outils navigateur - RGB (
rgb(29, 112, 184)) est plus lisible quand on ajuste des canaux individuellement en JavaScript - HSL (
hsl(210, 73%, 42%)) sépare la teinte, la saturation et la luminosité, utile pour générer des gammes de nuances sans dériver la teinte - OKLCH est l'espace perceptuel moderne derrière CSS Color Level 4, désormais supporté nativement par tous les navigateurs
La conversion manuelle entre ces formats implique des calculs trigonométriques. Le convertisseur de couleurs accepte les quatre formats et retourne les autres instantanément.
Comment gérer les couleurs pour l'impression (print vs écran) ?
Une page web pensée pour l'écran pose des problèmes à l'impression : les fonds colorés consomment de l'encre, certaines couleurs RVB n'ont pas d'équivalent fidèle en CMJN, et le mode d'impression du navigateur désactive souvent les arrière-plans par défaut.
Quelques règles pratiques :
- Utiliser une feuille de style
@media printpour supprimer les fonds colorés et forcer le texte en noir sur blanc - Vérifier que les couleurs principales restent lisibles sans fond grâce au contraste texte/blanc
- Pour les documents destinés à l'impression professionnelle, convertir les couleurs HEX en CMJN via un profil ICC avant de transmettre au prestataire
Le convertisseur de couleurs retourne les valeurs HEX, RGB et HSL, un point de départ pour la conversion vers CMJN dans un logiciel de PAO.
Comment créer un dégradé CSS sans tâtonnements ?
Un dégradé linéaire s'écrit background: linear-gradient(angle, arrêt1, arrêt2, ...). Trouver le bon angle et les bonnes positions d'arrêt manuellement prend du temps.
Le générateur de dégradé CSS permet de choisir les couleurs, déplacer les arrêts et ajuster l'angle visuellement. Il génère le code CSS prêt à coller, avec les préfixes navigateur si nécessaire. Les dégradés radiaux sont aussi disponibles.
Note d'accessibilité : ne jamais utiliser un dégradé seul pour transmettre de l'information. Un utilisateur daltonien ou malvoyant a besoin d'un indicateur non coloriel en complément.
Comment générer une palette de couleurs cohérente pour un projet ?
Une palette de design système inclut typiquement une couleur principale avec dix nuances (50 à 900), une gamme de gris neutres et des couleurs sémantiques (succès, avertissement, erreur). La construire manuellement produit des résultats incohérents, les nuances 300 et 400 peuvent sembler visuellement trop proches.
Le générateur de palette prend une couleur de base et retourne une gamme complète avec les codes HEX. Sur un projet soumis au RGAA, vérifier que la couleur de texte principale sur la nuance la plus claire atteint bien 4,5:1.
Comment extraire les couleurs d'une image ou d'une maquette ?
Quand le client transmet un logo en PNG sans les fichiers source, le point de départ est l'extraction des couleurs dominantes. L'extracteur de palette analyse l'image avec l'API Canvas, rien n'est envoyé à un serveur.
La sortie donne HEX, RGB et HSL pour chaque couleur détectée. De là, passer chaque candidat dans le vérificateur de contraste pour identifier les paires texte/fond qui atteignent AA avant de les intégrer dans les tokens du projet.