Couleurs

Types de palettes

La palette complète des couleurs numériques de l’Ontario (selon la palette de couleurs de marketing pour l’impression et les médias sociaux) se compose de ce qui suit:

1 palette de couleurs du système – à utiliser exclusivement pour les fins attribuées (comme le texte régulier, les hyperliens non visités/visités, le texte de bouton et le texte de confirmation – la liste complète se trouve dans le graphique ci-dessous)
1 palette échelle de gris – principalement incorporée aux composantes (comme les tableaux), mais vous pouvez utiliser les gris à votre discrétion, pour répondre aux mêmes besoins que la palette de couleurs d’accompagnement
1 palette de couleurs d’accompagnement en 3 tons (base, pâle and foncé) – à utiliser pour les éléments de marketing numérique ou d’autres éléments de page (comme les graphiques, les bannières, les illustrations et les icônes)

Palette de couleurs du système

Ces couleurs sont utilisées de manières particulières pour assurer l’uniformité dans tous les services numériques (ontario.ca, applications, services transactionnels, marketing numérique). Ne vous en servez pas à d’autres fins (exceptions : noir‑système et blanc‑système – utilisez‑les selon les besoins).

Nom de la couleur	Hex code	SCSS variable	Remarques
Noir-système	`#1A1A1A`	`$ontario-colour-black`	Couleur par défaut pour la majorité des textes (comme corps, titres, sous‑titres)
Blanc-système	`#FFFFFF`	`$ontario-colour-white`	Texte sur les principaux boutons, les arrière‑plans noirs
Alerte	`#CD0000`	`$ontario-colour-alert`	Icônes de niveau alerte, barre verticale à gauche de la boîte d’alerte ou boîte d’alerte
Alerte pâle	`#FCEFF0`	`$ontario-colour-alert-light`	Arrière-plan de la boîte d’alerte
Réussite	`#118847`	`$ontario-colour-success`	Icônes de niveau réussite, barre verticale à gauche de la boîte d’alerte
Réussite pâle	`#E5f0E9`	`$ontario-colour-success-light`	Arrière-plan de la boîte de réussite
Avertissement	`#FFD440`	`$ontario-colour-warning`	Icônes de niveau avertissement, barre verticale à gauche de la boîte d’avertissement
Avertissement pâle	`#FEF6DC`	`$ontario-colour-warning-light`	Arrière-plan de la boîte d’avertissement
Information	`#1080A6`	`$ontario-colour-information`	Icônes de niveau information, barre verticale à gauche de la boîte d’information
Information pâle	`#E2F0F4`	`$ontario-colour-information-light`	Arrière-plan de la boîte d’information
Hyperlien	`#0066CC`	`$ontario-colour-link`	Boutons et hyperliens non visités
Hyperlien – effet de survol	`#00478F`	`$ontario-colour-link--hover`	État de survol d’un bouton et d’un hyperlien
Hyperlien – actif	`#002142`	`$ontario-colour-link--active`	État actif d’un bouton et d’un hyperlien
Hyperlien – visité	`#551A8B`	`$ontario-colour-link--visited`	État visité d’un hyperlien (mais non des boutons, qui restent bleus)
Secondaire – effet de survol	`#E0F0FF`	`$ontario-colour-secondary--hover`	État de survol d’un bouton secondaire
Secondaire – actif	`#C2E0FF`	`$ontario-colour-secondary--active`	État actif d’un bouton secondaire
Tertiaire – effet de survol	`#E8E8E8`	`$ontario-colour-tertiary--hover`	État de survol d’un bouton tertiaire
Tertiaire – actif	`#D1D1D1`	`$ontario-colour-tertiary--active`	État actif d’un bouton tertiaire
Bague de mise au point	`#009ADB`	`$ontario-colour-focus`	État de mise au point qui souligne les saisies, les hyperliens et les boutons

Palette échelle de gris

Les gris de cette palette sont principalement incorporés aux éléments (comme les tableaux), mais vous pouvez utiliser les gris à votre discrétion, pour répondre aux mêmes besoins que la palette de couleurs d’accompagnement.

N’utilisez pas d’autres nuances de gris – les gris de cette palette ont été sélectionnés spécifiquement pour éliminer les teintes de gris qui paraissent trop semblables. À titre d’information, regardez l’opacité de contraste de la palette échelle de gris avec un texte en noir‑système et en blanc‑système.

Nom de la couleur	Hex code	SCSS variable	Remarques
Greyscale-5	`#F2F2F2`	`$ontario-greyscale-5`	Si vous l’utilisez comme couleur de fond, utilisez un texte en noir-système
Greyscale-20	`#CCCCCC`	`$ontario-greyscale-20`	Si vous l’utilisez comme couleur de fond, utilisez un texte en noir-système
Greyscale-40	`#999999`	`$ontario-greyscale-40`	Si vous l’utilisez comme couleur de fond, utilisez un texte en noir-système
Greyscale-60	`#666666`	`$ontario-greyscale-60`	Si vous l’utilisez comme couleur de fond, utilisez un texte en blanc-système
Greyscale-70	`#4D4D4D`	`$ontario-greyscale-70`	Si vous l’utilisez comme couleur de fond, utilisez un texte en blanc-système

Palette de couleurs d’accompagnement

Chaque couleur de la palette de couleurs d’accompagnement comporte une version de base, foncée (à utiliser avec un texte en blanc‑système) et pâle (à utiliser avec un texte en noir‑système).

Vous pouvez vous servir de n’importe laquelle de ces couleurs dans vos conceptions, tant que vous:

ne les utilisez pas pour les éléments qui ont une couleur système assignée (ces éléments sont énumérés dans le graphique de la palette de couleurs du système)
vous assurez d’avoir une opacité de contrastes acceptable

Endroits où utiliser ces couleurs:

icônes sans hyperlien
illustrations
graphiques
calendriers
légendes
images de bannière
images

Endroits où ne pas utiliser ces couleurs:

arrière-plan de page
éléments de formulaire
contours de tableau
tout élément apparaissant dans le graphique de la palette de couleurs du système

Palette de couleurs d’accompagnement de base

Utilisez ces couleurs uniquement avec du texte en noir-système (souligné pour les hyperliens). À titre d’information, regardez l’opacité de contrastes de la palette de couleurs d’accompagnement de base avec un texte en noir‑système..

Nom de la couleur	Hex code	SCSS variable
Doré	`#CBA52E`	`$ontario-colour-gold`
Jaune	`#FCAF17`	`$ontario-colour-yellow`
Taupe	`#C1B28F`	`$ontario-colour-taupe`
Vert	`#39B54A`	`$ontario-colour-green`
Lime	`#8DC63F`	`$ontario-colour-lime`
Sarcelle	`#49A7A2`	`$ontario-colour-teal`
Ciel	`#00B2E3`	`$ontario-colour-sky`
Bleu	`#3193CC`	`$ontario-colour-blue`
Mauve	`#B975B7`	`$ontario-colour-purple`
Orange	`#F15A22`	`$ontario-colour-orange`
Rouge	`#F0454B`	`$ontario-colour-red`
Magenta	`#F03093`	`$ontario-colour-magenta`

Palette de couleurs d’accompagnement pâles

Utilisez ces couleurs uniquement avec du texte en noir‑système (hyperlien bleu et souligné pour les hyperliens). À titre d’information, regardez l’opacité de contrastes de la palette de couleurs d’accompagnement pâles avec un texte en noir‑système et hyperlien bleu.

Nom de la couleur	Hex code	SCSS variable
Doré pâle	`#F0E7CC`	`$ontario-colour-light-gold`
Jaune pâle	`#F8E5C3`	`$ontario-colour-light-yellow`
Taupe pâle	`#EBE7DB`	`$ontario-colour-light-taupe`
Vert pâle	`#D1EFD4`	`$ontario-colour-light-green`
Lime pâle	`#DDEDC7`	`$ontario-colour-light-lime`
Sarcelle pâle	`#CFEDED`	`$ontario-colour-light-teal`
Ciel pâle	`#C5EEFA`	`$ontario-colour-light-sky`
Bleu pâle	`#DBE9F5`	`$ontario-colour-light-blue`
Mauve pâle	`#F1E3F2`	`$ontario-colour-light-purple`
Orange pâle	`#FEE1D9`	`$ontario-colour-light-orange`
Rouge pâle	`#FFE0E2`	`$ontario-colour-light-red`
Magenta pâle	`#FEDFF0`	`$ontario-colour-light-magenta`

Palette de couleurs d’accompagnement foncées

Utilisez ces couleurs uniquement avec du texte en blanc‑système (souligné pour les hyperliens). À titre d’information, regardez l’opacité de contrastes de la palette de couleurs d’accompagnement foncées avec un texte en blanc‑système.

Nom de la couleur	Hex code	SCSS variable
Doré foncé	`#86743D`	`$ontario-colour-dark-gold`
Jaune foncé	`#8A600D`	`$ontario-colour-dark-yellow`
Taupe foncé	`#7B725C`	`$ontario-colour-dark-taupe`
Vert foncé	`#2B8737`	`$ontario-colour-dark-green`
Lime foncé	`#5F8129`	`$ontario-colour-dark-lime`
Sarcelle foncé	`#367A76`	`$ontario-colour-dark-teal`
Ciel foncé	`#1080A6`	`$ontario-colour-dark-sky`
Bleu foncé	`#0369AC`	`$ontario-colour-dark-blue`
Mauve foncé	`#92278F`	`$ontario-colour-dark-purple`
Orange foncé	`#C64A1C`	`$ontario-colour-dark-orange`
Rouge foncé	`#D81A21`	`$ontario-colour-dark-red`
Magenta foncé	`#C00264`	`$ontario-colour-dark-magenta`

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 une opacité de contrastes de couleurs de 4.5:1 et le texte en gros caractères, une opacité de contrastes de 3:1.

L’opacité des contrastes des palettes du Système de conception pour l’Ontario satisfait au niveau AA des règles du WCAG 2.1 (en anglais seulement) 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, votre texte aura une opacité de contraste suffisante.

Revérification de l’accessibilité

À mesure que vous concevez, consultez le vérificateur de contrastes de couleurs pour revérifier la conformité de votre conception aux règles du WCAG 2.0, au minimum. Voici quelques options de rechange :

Vérificateur gratuit de contrastes en ligne de WebAIM
Programme Analyseur de contrastes de couleurs (en anglais seulement) du TPGi
- Le téléchargement de ce programme est gratuit, mais vous devrez soumettre une demande S.ODO pour l’installer sur un ordinateur de la FPO si vous n’avez pas de droits d’administration

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.