Déclinaison de la charte graphique du Département du Nord, ce guide de style favorise l'identification des sites de la collectivité.

Les règles ergonomiques et d'accessibilité qu'il contient (via une checklist) en facilitent l'usage, en mettant les services et contenus du Département à la disposition de tous les utilisateurs, quels que soient leur matériel ou logiciel, leur culture, leurs aptitudes physiques ou mentales. Elles intègrent en outre les recommandations légales de sécurité et de référencement.

Le logo du Département du Nord est toujours constitué d'un cartouche Bleu Nord (#139FC6) et d'une typographie blanche opaque. Son rapport hauteur/largeur est de 1/2,5. Il se compose du titre "Nord" et de la signature "le Département est là".

Logo Nord bleu RVB (SVG - 6 Ko)
Logo Nord bleu RVB (PNG - 55.9 Ko)

Variante blanche

Pour un usage exclusif sur fond Bleu Nord #139FC6, notamment sur les pieds de page.

Logo Nord blanc (SVG - 6 Ko)
Logo Nord blanc (PNG - 15 Ko)

Couleurs

L'usage des couleurs ci-après se doit de respecter les critères 3.2 et 3.3 du RGAA et la Règle Opquast 177 qui font état du niveau de contraste attendu des couleurs d’avant plan et d’arrière plan des textes et pictogrammes porteurs d’information. Pour être sûr de respecter cette conformité, consultez "association des couleurs".

Le Bleu Nord et ses déclinaisons

Ces couleurs sont communes à l'ensemble des sites du Département et sont les seules autorisées pour un site institutionnel.

Bleu clair

rgb (96, 198, 242)
#60C6F2

Bleu Nord

rgb (19, 159, 198)
#139FC6

Bleu moyen

rgb (23, 93, 121)
#175D79

Bleu demi

rgb (6, 71, 94)
#06475E

Bleu foncé

rgb (23, 50, 63)
#17323F

Bleu nuit

rgb (2, 23, 32)
#021720

Gamme Services

Ces trois variantes de vert ne sont à utiliser que pour des sites de la gamme Services en complément du Bleu Nord et de ses déclinaisons.

Vert clair

rgb (90, 180, 100)
#5AB464

Vert Services

rgb (14, 124, 53)
#0E7C35

Vert foncé

rgb (18, 59, 30)
#123B1E

Couleurs additionnelles

Pour fonds, exergues ou zones de filtrages.

Rouge

rgb (205, 23, 25)
#CD1719

Gris

rgb (236, 236, 234)
#ECECEA

Gris foncé

rgb (89, 89, 89)
#595959

Exergue bleue

rgb (236, 244, 247)
#ECF4F7

Bleu bouton

rgb (225, 239, 243)
#E1EFF3

Exergue verte

rgb (155, 222, 160)
#9BDEA0

Couleurs typographiques

Fond clair

Blanc, gris, exergue bleue, bleu bouton.

Texte

#212529

Lien

#006487

Erreur

#CD1719

Lien visité

#660099

Fond sombre et mode nuit

Le fond du mode nuit est le bleu nuit (#021720). Le bleu foncé (#17323F) peut être utilisé comme fond sombre mais sur ce dernier le rouge "erreur" n'est pas conforme.

Texte

#FFFFFF

Lien

#60C6F2

Erreur

#ED3739

Lien visité

#C18BCE

Exergue nuit

rgb (54, 67, 77)
#36434D

Association des couleurs

Sont détaillées ci-après les associations de couleurs avant-plan / arrière-plan autorisées en vue de respecter les critères 3.2 et 3.3 du RGAA ainsi que la Règle Opquast 177 qui font état du niveau de contraste attendu des couleurs pour les textes (au moins 4,5:1) ainsi que titres et grand textes (plus de 18pts), éléments de navigation et pictogrammes porteurs d’information (au moins 3,1:1).

Textes en exergue / Strates

Les associations de couleurs ci-après sont les seules autorisées pour les strates de texte, les exergues ou les fonds de page (plus de 4,5:1 de contraste).

  • #ECF4F7 :#175D79, #06475E, #17323F, #021720, #212529, #006487, #660099, #CD1719
  • #60C6F2 :#17323F, #021720, #212529
  • #139FC6 :#021720, #212529
  • #175D79 :#FFF
  • #06475E :#FFF, #60C6F2, #9BDEA0
  • #17323F : #FFF, #60C6F2, #9BDEA0, #5AB464, #C18BCE
  • #021720 :#FFF, #ECECEA, #60C6F2, #9BDEA0, #5AB464, #C18BCE, #ED3739
  • #9BDEA0 : #06475E, #123B1E, #17323F, #021720, #212529, #660099
  • #5AB464 :#123B1E, #17323F, #021720, #212529
  • #0E7C35 :#FFF
  • #123B1E :#FFF, #5AB464, #C18BCE
  • #ECECEA :#175D79, #06475E, #17323F, #021720, #212529, #006487, #660099, #CD1719, #595959
  • #595959 :#FFF, #ECECEA

Tolérance pour pictogrammes et grands textes

Les associations de couleurs ci-après sont tolérées pour pictogrammes, titres et grands textes (plus de 18pts, soit 2em environ).

  • #139FC6 : #17323F, #FFFFFF
  • #60C6F2 : #175D79
  • #ECECEA : #0E7C35
  • #595959 : #60C6F2
  • #123B1E : #60C6F2, #ECECEA
  • #0E7C35 : #FFFFFF, #021720, #ECECEA
Tableau des contrastes du Nord sur EightShape Contrast Grid (en Anglais)

Variables CSS

Il est recommandé d'utiliser des variables dans la feuille de style. Voici la liste des couleurs présentées ci-avant :

:root {
    --texte: #212529;
    --lien: #006487;
    --lienvisite: #660099;
    --bfondlien: #E1EFF3;
    --bstrate: #ECF4F7;
    --bclair: #60C6F2;
    --bnord: #139FC6;
    --bmoyen: #175D79;
    --bdemi: #06475E;
    --bfonce: #17323F;
    --bnuit: #021720; 
    --vstrate: #9BDEA0;
    --vclair: #5AB464;
    --vservice: #0E7C35;
    --vfonce:#123B1E;
    --gclair: #ECECEA;
    --gfonce: #595959;
    --rouge: #CD1719;   
    --nuitlienvisite: #C18BCE;
    --nuitrouge: #ED3739;
    --nuitexergue: #36434D;
}

Typographie

Polices

La Roboto est la police naturelle pour l’ensemble des éléments textuels du Nord, textes de labeur et titres. Privilégier l’utilisation via Google Fonts : fonts.google.com/specimen/Roboto.

  • Roboto Regular 400
  • Roboto Regular italic 400
  • Roboto Medium 500
  • Roboto Medium italic 500
  • Roboto Bold 700
  • Roboto Bold italic 700
  • Roboto Black 900
  • Roboto Black italic 900 
font-family: 'Roboto', sans-serif;

L'Oswald peut être utilisée en lieu et place de la Roboto pour les éléments de navigation du menu principal uniquement. Toujours en capitales, via l'attribut css uppercase. Privilégier l’utilisation via Google Fonts : fonts.google.com/specimen/Oswald.

Oswald Regular 400 

font-family: 'Oswald', sans-serif;

Recommandée pour le mode « dyslexie», l'Open Dyslexic se substitue à l'affichage à l'ensemble des polices du site. dafont.com/fr/open-dyslexic.font.

Open Dyslexic Regular 400 

font-family : 'OpenDyslexicregular', sans-serif;

Règles de style

  • Les tailles de polices sont toujours définies en em ou rem et jamais en px
  • sans serif est utilisée comme dernier élément générique de substitution (Règle Opquast 185)
  • Le texte de labeur est toujours ferré à gauche, la justification est interdite (Règle Opquast 186)
  • La valeur de l'interligne est égale à 1,5 fois la taille du texte
  • La valeur de l'espacement entre deux paragraphes est au moins égale à 1,5 fois la valeur de l'interligne
  • Les titres et éléments de menus affichés en capitales le sont uniquement via l'attribut uppercase, et jamais à la saisie (Règle Opquast 187)
  • Il est recommandé d'appliquer également les effets de survol des liens <a> à la prise de focus
  • Il est recommandé d'utiliser des variables pour les couleurs dans le CSS.

Liens

  • Les liens hypertextes doivent être explicites même hors contexte ; éviter les "en savoir plus" ou "voir plus", notamment sur les tuiles de navigation. Deux liens pointant vers deux destinations distinctes ne peuvent avoir le même intitulé dans une même page
  • Les liens en corps de contenu sont toujours soulignés par défaut. Ils doivent impérativement changer d'état au survol, le soulignement disparait alors. (Couleur mode jour : #006487, mode nuit : #60C6F2)
  • À l'inverse, les éléments de menus et les textes des boutons se soulignent au survol
  • Le soulignement est réservé aux liens, il ne peut s'appliquer à aucun autre élément (Règle Opquast 134)
  • En corps de texte, les liens déja visités sont manifestés (#660099 en mode jour, #C18BCE en mode nuit)
  • Un lien pointant vers un site externe ou ouvrant une nouvelle fenêtre doit le mentionner via le <title>  (Règle Opquast 141). Les liens vers des sites externes peuvent de plus être identifiés via le pictogramme correspondant
  • Les numéros de téléphone sont activables via le protocole approprié (Règle Opquast 140)
  • Les liens vers des documents à télécharger indiquent le format et le poids des fichiers (Règle Opquast 142 et Règle Opquast 143).

Liens stylisés en boutons

Liens externes

Fond #E1EFF3 pour tout type de lien, sauf vers une page Nord services (fond #9BDEA0), précédé du pictogramme lien. Ombrage et soulignement au survol. L'intitulé en #17323F change de couleur après visite (#660099) et est suivi du pictogramme "externe".

Exemple de lien externe
Exemple de lien vers Nord services

Fichiers en téléchargement

Fond #E1EFF3, précédé du pictogramme téléchargement, ombrage et soulignement au survol. L'intitulé précise entre parenthèses le format et le poids du documents, dont l'abréviation est balisée via abbr. Texte et pictogramme en #17323F, pas de changement de couleur après visite.

Exemple de fichier à télécharger (PDF - 1 Mo)

Citations

Les citations en corps de contenu sont en italique et entre guillemets. Elles sont déclarées via la balise <q>.

Les locataires disposeront bientôt d'une tablette individuelle pour communiquer à distance et poser toutes leurs questions. Ils revendiquent leur autonomie mais ils ont encore besoin de soutien, confie Marie Dupont, éducatrice.

Les citations en exergue, balisées via <blockquote>, sont précédées du symbole graphique en #17323F, texte lui aussi en #17323F, suivis par l’auteur et une information complémentaire optionnelle en #595959.

Ce coaching, c’était le coup de boost dont j’avais besoin.

Jean Dupont, chef de service
Guillemets (SVG - 0,6 Ko)

Têtières et navigation

Il est souhaité que la couleur de fond du header (ou têtière) soit #17323F. Il est néanmoins possible d'utiliser un fond blanc, notamment pour les sous-sites ou espaces réservés.

Menu de confort

Un menu de confort (ou "de contournement"), placé au début du code source et en haut à gauche de toutes les pages du site, doit être le premier élément dans l'ordre de tabulation ( Règle Opquast 159).

Il présente minima les raccourcis (liens d'évitement) vers le menu principal, le contenu principal, le moteur de recherche le cas échéant.
Il est recommandé qu'il présente également deux boutons permettant d'agrandir et de réduire le texte et un troisième permettant de remplacer l'ensemble des polices du site par l'open dyslexic via un bouton "dyslexie". Ces boutons marquent leur état actif en inversant les couleurs sur un fond uni.

En mobile, ce menu ne doit pas être affiché mais présent dans le code source pour néanmoins permettre une navigation clavier.

Positionnement des Logos

Le logo du site est placé en haut et à gauche, dans une zone de protection au moins équivalente au "O" de Nord au dessus et en dessous.

Il doit impérativement posséder une alternative mentionnant le texte visible (sans la mention "logo" !). Il est cliquable et permet de retourner à l'accueil. Son alternative est donc alt="Nord services : Intitulé" et le lien possède un title="Retourner à l'accueil". Idéalement, en page d'accueil, il ne possède pas de lien.

Navigation

Les menus sont structurés en liste via les attributs <ul> et <li>.

Lors de la navigation, il est impératif que le marquage de position (la rubrique active) soit indiqué, en conservant le soulignement ou le cartouche.

Dans les cas de figures présentés ci-après, seules ces quatre couleurs peuvent être utilisées : #17323F, #5AB464, #60C6F2, #FFFFFF.

Header sombre

  1. Au survol et en marquage de position, à minima l'élément se souligne. Il peut également être encadré en #60C6F2, le texte passe alors en #17323F
  2. Dans le cas d'un accès mis en avant à un espace particulier, celui-ci est par défaut sur un cartouche vert #5AB464 (en gamme Services uniquement). S'il y en a un second, #60C6F2. Dans les deux cas, le texte est en #17323F et se souligne.

Header clair

  1. Dans le cas d'un bandeau blanc, les éléments textuels sont en #17323F
  2. Ici il est possible de choisir parmi deux couleurs de cartouches de survol, #60C6F2 ou #5AB464 (uniquement en gamme Services)
  3. Les espaces ou accès particuliers sont alors ici traités en blanc sur cartouche #17323F.

Sous-niveaux

Dans le cas de sous-niveaux de navigation apparents, deux fonds sont possibles pour un header sombre : #60C6F2 ou blanc, qui n'est autorisé que si la section suivante est parée d'un fond de couleur ou d'une image pleine largeur et que le bleu ne s'accorde pas avec cet environnement. Dans les deux cas, les liens sont en #17323F. Au survol, ils se soulignent à minima ou peuvent être soit en blanc, soit en #60C6F2 sur un cartouche en #17323F.

Pour un header blanc, seul le fond #17323F peut être utilisé, avec comme cartouches possibles #60C6F2 et #5AB464, ce dernier uniquement en gamme Services.

Menu "burger" et mobile

Le mot "MENU" est autant que possible affiché à côté des trois barres (à gauche, à droite, ou en-dessous).

Menu Burger gauche (SVG - 1.15 Ko)
Menu Burger droite (SVG - 1.14 Ko)
Menu Burger centré (SVG - 0.9 Ko)

En mobile

A l’affichage mobile, dans la mesure du possible, le menu passe en bas d’écran, au centre.

Menu Burger bouton (SVG - 1.48 Ko)
Menu Burger bouton survol (SVG - 1.71 Ko)

Retour en haut de page

Un lien permettant de retourner en haut de page s'affiche en bas à droite de la fenêtre du navigateur dès lors que l'utilisateur commence à scroller. Il est pourvu d'un title "Retour en haut de page". Il doit être le dernier élément focusable de la page.

Retour en haut de page (SVG - 1 Ko)
Retour en haut de page survol (SVG - 1 Ko)

Sommaire de page

Le Département incite à utiliser des pages plus longues plutôt que plusieurs pages. Il est alors préconisé d'utiliser, ainsi que sur les sites d'une seule page, un sommaire "sticky", comme sur le présent site.

Liens d'évitement

Des liens d'évitement, permettant d'améliorer la navigation au clavier, sont à placer dans le code, non visible :

  • avant et après une carte dynamique
  • avant et après une vidéo
  • avant et après un formulaire en iframe
  • avant et après un carrousel d'images non porteur de contenu.
<p><a href="#skipmap1" id="backmap1">Passer la carte</a></p>
<iframe title="Carte" ... ></iframe>
<p><a href="#backmap1" id="skipmap1">Revenir avant la carte</a></p>

Pieds de page

Le footer supérieur se compose d'un fond bleu #139FC6 avec le logo blanc à gauche.
Ce dernier est une image-lien pointant sur lenord.fr (alt="Nord, le Département est là", title="Aller sur le site du Nord, le Département est là") et s'ouvre dans l'onglet actif. 

Au centre et en texte centré, l'adresse physique de contact du site.

A droite, des liens stylisés en boutons en #212529 (contour et texte) indiquent les moyens de contact téléphoniques et numériques le cas échéant.
Au survol, ces derniers s'opacifient en #212529 et le texte passe en banc, avec un soulignement. L'ensemble est déclaré dans une liste non-ordonnée, <ul>.
Le formulaire de contact peut pointer sur celui de lenord.fr ou de services.lenord.fr, en fonction de la thématique du site, en y adjoingant alors le pictogramme mentionnant un lien externe, tout comme dans le bouton "Sourd ou malentendant". 

En dessous, si nécessaire, les liens vers les réseaux sociaux du Département en blanc. 

Le footer inférieur est lui sur fond blanc, et présente dans une <ul> des liens textuels proposant à minima un plan du site si celui-ci comporte plus d'une page, les mentions légales et la déclaration d'accessibilité.

Le pied du présent site peut être pris en exemple.

Favicon

Favicon Nord le Département : À utiliser sur lenord.fr et les sites transversaux ou institutionnels

Favicon services : À utiliser sur Nord services et les sites de services dédiés

Favicon info : À utiliser sur Nord info et les sites d'information dédiés

Favicon info (PNG - 4.57 Ko)

Favicon évasion : À utiliser sur Nord évasion et les sites de tourisme ou de loisir dédiés

Fil d'Ariane

Accueil > Rubrique parente > Page en cours

  • Le fil d’ariane présente le chemin de navigation complet pour parvenir jusqu’à la page en cours d’affichage
  • Le nom du site est remplacé par “Accueil”
  • Chaque niveau de ce fil doit être cliquable (soulignement au survol et au focus) et renvoyer sur la page / rubrique concernée, hormis la page en cours, non cliquable et affichée en italique
  • L’intitulé de chaque niveau doit être celui du titre de la page / rubrique concernée.

URL

monsite.fr/rubrique-parente/page-en-cours

L’URL possède la même structure que le fil d’ariane (ex: Nomdusite.fr/Rubrique/Page), “Accueil” etant bien-sûr remplacé par le nom du site.

  • En l’absence d’un alias URL le modifiant, l’intitulé de chaque page / rubrique est son Titre de page, adapté aux contraintes (pas d’accents, de virgules, d’espaces…)
  • Chaque élément entre deux “/” doit exister. Si j’efface la page en cours, la rubrique parente doit s’afficher

Title (meta-title)

Page en cours - Rubrique parente - Mon Site ou Page en cours - Mon site

  • Le title affiche à minima le titre de page en cours et le titre du site internet. Mais idéalement, il présente le fil d’ariane “à l’envers”, de la page au site, sans italique, les chevrons étant remplacés par un séparateur, " - "
  • Les intitulés sont ceux des Titre de page / rubrique, comme le fil d’ariane
  • Il est important que chaque title soit unique car il permet à l’utilisateur, lors de l’ouverture de plusieurs onglets, de se repérer.

Pages de résultat de recherche ou avec filtrage

Le titre de page mentionne le ou les mots-clés / filtres en cours et le nombre de résultats.
XX résultats de recherche pour “mot clé”

Le fil d’ariane n’a pas d’obligation à mentionner le mot-clé recherché ou le filtrage activé, mais peut le faire.
Accueil > Rubrique parente > Recherche

Chaque URL de recherche est unique et permet de partager ces résultats de recherche ou de filtrage.
monsite.fr/rubrique-parente/recherche=mot-cle

Chaque meta-title mentionne le mot-clé recherché ou le filtrage activé, la page en cours et le titre du site (ou le fil d’ariane complet “à l’envers”).
Recherche “mot clé” - Rubrique parente - Mon site

Bandeau cookies

En application de la directive ePrivacy, les internautes doivent être informés et donner leur consentement préalablement au dépôt et à la lecture de certains traceurs, tandis que d’autres sont dispensés du recueil de ce consentement (cnil.fr).

Ce consentement peut prendre la forme d'un bandeau cookies qui doit permettre :

  • d'accepter tous les cookies
  • de refuser tous les cookies
  • de choisir les cookies acceptés et de connaître leur utilisation (réseaux sociaux, publicité personnalisée...).

Ces options doivent avoir le même niveau de simplicité.
Tant que l'utilisateur n'a pas donné son consentement, les cookies ne peuvent être lus ou déposés. L'utilisateur peut retirer son consentement à tout moment.

Formulaires

Les formulaires respectent les standards d'accessibilité et d'assurance qualité web, en particulier ceux présentés ci-après dans la checklist, rubrique "formulaires".

Texte introductif et page récapitulative

La page d'introdution ou la première étape d'un formulaire est introduite par un texte en langage clair permettant de mentionner :

  • la durée approximative de sa saisie et/ou le nombre de champs et/ou de pages et/ou d’étapes
  • les pièces jointes scannées qui seront ou pourront être demandées, ainsi que les contraintes de leur import (poids, format, ...) le cas échéant
  • les numéros ou codes d’identification qui seront demandés le cas échéant
  • le délai de traitement et/ou les étapes d’instruction suivantes utiles à l’utilisateur
  • l'accès à des pages de Nord services ou du site du Département relatifs à la démarche via des liens stylisés.

La page s’affichant lors de la réussite de la soumission du formulaire précise à nouveau le délai de traitement et/ou les étapes d’instruction suivantes utiles à l’utilisateur.

Champs

  • Tout champ peut être typé obligatoire, via l'usage de l'astérisque "*", ainsi que dans le code via l'attribut required. La mention "Les champs suivis d'un astérisque (*) sont obligatoires" sera alors à placer en haut de chaque étape concernée
  • Les champs permettent le remplissage automatique via autocomplete
  • Le descriptif d'un champ, s'il est nécessaire, est placé juste après l'intitulé ou en placeholder
  • Les champs d'import de fichiers (upload) précisent les poids maximum et formats attendus. Une fois utilisés, ils mentionnent le nom du fichier importé
  • Les champs texte longs (sur plusieurs lignes) permettent d’être redimensionnés visuellement côté utilisateur. Idéalement, si le nombre en est restreint, ils affichent le nombre de caractères saisis / restants.

Style

  • Le fond de page des formulaires est en #ECF4F7
  • L'astérisque indiquant les champs obligatoires et les mentions d'erreur sont en #CD1719
  • L'intitulé est en #175D79 et font-weight à 600
  • L'intitulé, le descriptif et le champ sont visuellement rassemblés via un fond commun blanc #FFF possédant un border-radius : 0.625em
  • Les blocs permettant l'import de fichiers sont sur un fond #E1EFF3. Le texte en #17323F sera précédé du pictogramme "Trombone"
  • Le bouton "valider" ou "étape suivante" en fin de page est sur fond #17323F, le texte blanc en uppercase se souligne au survol.

Le formulaire de contact du site du Département du Nord peut être pris en exemple.

Pictogramme Trombone (SVG - 1.32 Ko)

Checklist accessibilité et qualité web

Le Département a la volonté de s’inscrire dans la démarche qualité Opquast et de se conformer au RGAA 4 (Référentiel Général d’Amélioration de l’Accessibilité), comme le prévoit l'article 47 de la loi n° 2005-102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées.

A ces titres, le Département du Nord s'éfforce de respecter la checklist ci-après, basée sur ces référentiels (via Creative commons CC-BY-SA 2.0), afin de garantir à tous l'accès à l'information et aux services du Département. Il est attendu des prestataires mandatés de la respecter eux-aussi, avec l'appui au besoin des équipes du Département.
Les liens numérotés correspondent à la Règle Opquast concernée et les liens commençant par "critère" pointent vers le RGAA (version en vigueur).

Contenus

Données personnelles

Formulaires

Identification et contacts

Images & médias

Internationalisation

Liens

Documents à télécharger

Navigation

Clavier

Présentation

Sécurité

Serveur et performances

Code

Tableaux