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.

    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
    #1472BF
    rgb(20, 114, 191)

    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é

    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 :

    Dernière mise à jour : 12 juin 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