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.

Le blanc est la couleur d'arrière-plan par défaut pour les pages, garantissant une lisibilité optimale du texte et des éléments.

Note : Les ratios de contraste sont calculés sur un fond blanc. Modifier l'arrière-plan peut compromettre l'accessibilité de plusieurs composants. Maintenir le fond blanc par défaut est fortement recommandé.

La couleur par défaut pour la plupart des éléments textuels sur les pages, tels que les paragraphes et les titres.

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. Elle comprend aussi le violet qui est utilisé uniquement pour les liens visités.

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.

Concevoir les interfaces avec des contrastes suffisants (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é.