Couleurs
La couleur est un outil qui peut être utilisé pour communiquer la personnalité, le ton et l'importance d'une organisation. Le gouvernement du Québec a créé une palette de couleurs qui est utilisée par tous ses services publics pour avoir une image de marque cohérente.
Utilisez toujours les palettes de couleurs du Système de design gouvernemental.
Palette principale
La palette principale comprend 2 couleurs de base : une couleur principale et une couleur d'accent.
Celles-ci doivent être prédominantes dans les interfaces.
Couleur principale
La couleur principale est un groupe de 6 couleurs, de la plus pâle à la plus foncée. Cela donne aux concepteurs et développeurs web beaucoup de flexibilité lors de la création des interfaces.
Bleu pâle
#DAE6F0
rgb(218, 230, 240)
Bleu clair Mis à jour
#4A98D9
rgb(74, 152, 217)
Bleu
#1479CC
rgb(20, 121, 204)
Bleu PIV
#095797
rgb(9, 87, 151)
Bleu moyen Nouveau
#19406C
rgb(25,64,108)
Bleu foncé
#223654
rgb(34, 54, 84)
Couleur d'accent
La couleur d’accent est utilisée avec parcimonie pour mettre en évidence quelques éléments de l’interface.
Rose Mis à jour
#E58271
rgb(229, 130, 113)
Niveaux de gris
Les couleurs de la palette de niveaux de gris sont utilisées pour la mise en page des contenus et pour organiser l’information. Elle inclut 5 couleurs pour plus de flexibilité de conception.
Gris pâle
#F1F1F2
rgb(241, 241, 242)
Gris clair
#C5CAD2
rgb(197, 202, 210)
Gris
#8893A2
rgb(136, 147, 162)
Gris moyen Nouveau
#6B778A
rgb(107, 119, 138)
Gris foncé Nouveau
#4E5662
rgb(78, 86, 98)
Palettes fonctionnelles
La palette fonctionnelle se compose de 3 couleurs d'état du système, telles que le succès, le danger et l'avertissement. Ces couleurs sont utilisées pour des validations de tâches et dans les formulaires.
Rouges
Rose pâle Mis à jour
#FFDBD6
rgb(255, 219, 214)
Rose Mis à jour
#E58271
rgb(229, 130, 113)
Rouge
#CB381F
rgb(203, 56, 31)
Rouge foncé Nouveau
#692519
rgb(105, 37, 25)
Verts
Vert pâle Mis à jour
#D7F0BB
rgb(215, 240, 187)
Vert
#4F813D
rgb(79, 129, 61)
Vert foncé Nouveau
#2C4024
rgb(44, 64, 36)
Jaunes
Jaune pâle
#F8E69A
rgb(248, 230, 154)
Jaune
#E0AD03
rgb(224, 173, 3)
Jaune foncé Nouveau
#AD781C
rgb(173, 120, 28)
Accessibilité
Si vous utilisez une couleur pour transmettre de l’information, veillez à insérer également un équivalent textuel destiné aux personnes ayant du mal à distinguer les couleurs.
Composer avec une bonne opacité des contrastes (qui fait ressortir le texte de son arrière-plan) facilite la lecture pour tout le monde. Il est également prescrit par la loi de satisfaire au moins aux règles du WCAG 2.0, qui stipulent que le texte régulier doit comporter un rapport de contrastes de couleurs de 4.5:1. Les éléments visuels et le texte en gros caractères doivent avoir un rapport de contraste de 3:1.
Le rapport des contrastes des palettes du système de design satisfait au niveau AA des règles du WCAG 2.1 en matière de contraste des couleurs. Ainsi, tant que vous recourez aux couleurs de la palette selon les indications de la présente ligne directrice, il est possible de créer des interfaces accessibles.
Vérification de l’accessibilité
Pour vous assurer que votre conception respecte les directives de WCAG 2.0, utilisez un valideur de contraste de couleur pour vérifier qu'il est conforme. Voici quelques solutions offertes :
- Grille des contrastes: Toutes les couleurs du Système de design gouvernemental qui ont un rapport minimal de 3:1 ou 4.5:1 sont listées dans cette grille de contrastes
(en anglais seulement). - Outil en ligne: Vérificateur gratuit de contrastes de WebAIM
- Application (Windows et Mac): Programme Analyseur de contrastes de couleurs du Groupe Paciello (le téléchargement de ce programme est gratuit, mais vous devrez soumettre une demande pour l’installer sur votre ordinateur si vous n’avez pas les droits d’administration).
Dernière mise à jour : 3 mars 2023