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.

L’utilisation des palettes de couleurs du Système de design gouvernemental est obligatoire.

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.

La couleur d’accent est utilisée avec parcimonie pour mettre en évidence quelques éléments de l’interface.

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.

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

Lorsqu’une couleur est utilisée pour transmettre de l’information, il faut également insérer 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, en utilisant les 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é

Afin de confirmer qu’une interface respecte les directives de WCAG 2.0, il est possible d’utiliser un validateur de contraste de couleur. 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 (en anglais seulement). Le téléchargement de ce programme est gratuit, mais nécessite des droits d’administration pour être installé.