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 Cet hyperlien s'ouvrira dans une nouvelle fenêtre. (en anglais seulement).
    • Outil en ligne: Vérificateur gratuit de contrastes Cet hyperlien s'ouvrira dans une nouvelle fenêtre. de WebAIM
    • Application (Windows et Mac): Programme Analyseur de contrastes de couleurs Cet hyperlien s'ouvrira dans une nouvelle fenêtre. 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

    Évaluation de page

    L’information sur cette page vous a-t-elle été utile?
    Avis général

    Des questions ou besoin de renseignements?

    Communiquez avec Services Québec