Notre espace de noms npm a changé. Les développeurs doivent mettre à jour leurs projets pour continuer à accéder à nos composantes Web.

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).

Couleur 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.

Couleur 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:

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:

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..

Couleur 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.

Couleur 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.

Couleur 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 :

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