Système de design GC Composants
Accueil Démarrer Aperçu des modèles de page Page de base Aperçu des composants Avis Barre de navigation latérale Barre de navigation supérieure Bascule de langue Bouton Boutons radio Carte Cases à cocher Champ de date Champ de saisie Chemin de navigation Conteneur Date de modification Détails En-tête Grille Icône Indicateur d'étape Jeu de champs Lien Masquage accessible Menu thématique Message d'erreur Pagination Pied de page Recherche Résumé des erreurs Signature Sélection Texte Titre Téléverseur de fichiers Zone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactive État Affichage Dimensionnement de la boîte Dimensionnement du conteneur Débordement Position Visibilité Alignement de texte Couleur de lien Couleur de texte Débordement de texte Décoration de texte de lien Famille de police Hauteur de ligne Police Saut de mot Style de liste Style de police Taille de lien Taille de police Transformation de texte Épaisseur de police Marge Marge intérieure Agencement de contenu Agencement des éléments Agencement individuel Alignement de contenu Alignement des éléments Alignement individuel Colonnes de grille Direction de l’élément flexible Dégagement Habillage de l’élément flexible Justification de contenu Justification des éléments Justification individuelle Lignes de grille Ordre Rétrécissement de l’élément flexible Élargissement de l’élément flexible Élément flexible Couleur de la bordure Couleur de l’arrière-plan Largeur de la bordure Rayon de la bordure Style de la bordure Image Noms des icônes Taille de l'icône Curseur Transition Événements de pointeur Aperçu des styles Unités de style Unités de style de couleur Unités de style d'espacement Unités de style typographie Contactez-nous Impliquez-vous Trouvez une démo

Signature
<gcds-signature>

Autres noms : mot-symbole.

La signature est l’image de marque du gouvernement du Canada placée dans l’en-tête ou le pied de la page.

  • Requis sur Canada.ca
  • Requis sur les sites du GC

  • GitHub
  • Figma

Aperçu du composant de la signature

Structure de la signature

  1. La signature du gouvernement du Canada est l'identificateur de l'image de marque placée dans l'en-tête du site. La signature sert de lien général vers la page d'accueil du site.
  2. Le mot-symbole « Canada » est l'identificateur de l'image de marque placé dans le pied de page du site. Il renforce l'image de marque en informant les visiteur·rice·s du site que le contenu qui leur est présenté provient du gouvernement du Canada.
Signature avec les étiquettes « Signature du gouvernement du Canada » et « Mot-symbole Canada ». Chaque élément du composant est identifié à l’aide d’un chiffre.]

Design et accessibilité de la signature

Vérifier les exigences de la signature

La signature est requise dans l’en-tête et le mot-symbole est requis dans le pied de page sur les pages Canada.ca et les sites du GC.

Toujours inclure la signature dans l’en-tête et conserver les paramètres par défaut.
  • Utilisez du texte noir, ne sélectionnez pas de texte blanc.
  • Gardez la position de la signature dans le coin supérieur gauche de l’en-tête tant pour la version bureau que mobile.
  • Lien vers la page d’accueil de Canada.ca.
Toujours inclure le mot-symbole dans la bande de sous-pied de page et maintenir les paramètres par défaut.
  • Utilisez du texte noir, ne sélectionnez pas de texte blanc.
  • Gardez la position dans le coin inférieur droit du pied de page.
Remarque : les paramètres par défaut pour la signature et le mot-symbole suivent norme graphique du Programme fédéral de l’image de marque.

Établir l'ordre des langues dans la signature

  • Affichez d'abord la signature en français sur les pages en français. De même, insérez d'abord la signature en anglais sur les pages en anglais.
  • Conservez « Government of Canada » pour le texte de remplacement (alt-text) en anglais et « Gouvernement du Canada » pour le français.

Remarque : L’image contient un lien qui mène à la page d’accueil Canada.ca dans la même langue officielle que la page actuelle.

Utilisez des couleurs non standard de manière accessible

  • Choisissez d'utiliser des couleurs non standard lorsqu'un niveau de contraste plus élevé avec l'arrière-plan est nécessaire, comme pour le mode sombre;
  • Optez pour l'utilisation de couleurs non standard lorsqu'un produit affiche une couleur unique, comme le noir et le blanc;
  • Lorsque la couleur du drapeau est modifiée, assurez-vous de toujours utiliser cette même couleur pour le symbole du drapeau dans la signature et le mot-symbole;
  • Utilisez toujours la même combinaison de couleurs dans la signature et le mot-symbole. Par exemple, si la signature est en noir et blanc, alors le mot-symbole doit également l'être;
  • Lorsqu'une seule couleur est utilisée, vérifiez le rapport de contraste entre les éléments de la signature pour vous assurer que le ratio est à tout le moins conforme à la norme WCAG, niveau AA.
Une image représentant les deux versions de la signature. La signature se trouve à gauche et le mot-symbole est placé à droite.
Légende : Le style de couleur standard utilise un texte noir et un drapeau rouge sur fond blanc.
Une image représentant les deux versions de la signature. La signature se trouve à gauche et le mot-symbole est placé à droite. Cette version utilise du texte blanc sur un fond noir.
Légende : Le style de couleur inversé utilise un texte blanc et un drapeau rouge sur fond noir.
Une image présentant deux combinaisons de signature et de mot-symbole. Dans un cas, la signature et le mot-symbole sont noirs sur fond blanc. Dans l'autre cas, la signature et le mot-symbole sont blancs sur fond noir.
Légende : Le style noir et blanc utilise un fond soit entièrement noir, soit entièrement blanc. Le style entièrement noir est le plus fréquemment employé.
Une image montrant la signature et le mot-symbole en violet foncé sur un fond violet pâle. Des barres et des cases simulent du texte et des images sur une page web fictive. Les cases de texte et d'images sont également violet foncé.
Légende : Le style de couleur unique utilise une couleur autre que le noir ou le blanc si cette couleur est la seule utilisée pour le produit.

Aidez-nous à nous améliorer

Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact.

Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes.

Fournir des commentaires Signaler un problème sur GitHub
2025-07-17