Couleurs

Texte

  • background
    #FFF
  • text
    #333

Éviter les contrastes maximum (tel que noir #000000 sur blanc #FFFFFF).

body {
	background-color: #FFF;
	color: #333;
}

Gris

  • Gris 1
    #666
  • Gris 2
    #767676
  • Gris 3
    #CCC
  • Gris 5
    #F8F8F8

Le gris #767676 est le plus pâle qui puisse être utilisé sur fond blanc (RGAA 4 Critère 3.2).

Bleu institutionnel

  • Bleu 1
    #0b6ba8
  • Bleu 2
    #3f85cc
  • Bleu 3
    #55abed
  • Bleu 4
    #e3f2fe

Messages système

  • Warning
    #AE650B
  • Danger
    #E62623
  • Success
    #22891F
  • Info
    #0981A1

Comment choisir les couleurs ?

Textes

Taille des textes

body {
	font-size: 1em;
	line-height: 1.5;
}

La taille des caractères doit être exprimée en unités relatives (em, rem, %, etc.). L'utilisation du pixel (px) est proscrite.
Idéalement, la valeur de l'interligne est de 1.5 fois la taille du texte, au moins (RGAA 4 Critère 10.12).

Voir aussi : Garantir la lisibilité des contenus même lorsque la taille du texte est doublée, AcceDe Web.

Police

Ne pas oublier de déclarer des polices alternatives. Exemple :

body {
	font-family: Roboto, Helvetica, Arial, sans-serif;
}

Roboto — agh! iIl1 0OQ

Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.

Source : Roboto Google Fonts (police libre et open source).

Helvetica — agh! iIl1 0OQ

Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.

Arial — agh! iIl1 0OQ

Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l’alcôve ovoïde, où les bûches se consument dans l’âtre, ce qui lui permet de penser à la cænogénèse de l’être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.

Titres

La hiérarchie des titres (<h1>, <h2>, <h3>…) de chaque page est significative (comme un sommaire de la page), cohérente et sans saut de niveau (RGAA 4 Critère 9.1). Leur apparence visuelle est indépendante (.h1, .h2, .h3…).

Voir : Mettre en place une hiérarchie de titres logique et exhaustive avec les balises <h1> à <h6>, AcceDe Web.

Boutons

Bien distinguer, fonctionnellement, les boutons des liens : réserver <button> et <input> pour les actions et <a> pour la navigation. Leur apparence visuelle est indépendante : plusieurs éléments peuvent prendre l'apparence d'un bouton et les boutons peuvent prendre l'apparence d'un lien.


a span … 
<button class="btn">button</button>
<input type="button" class="btn" value="input">
<input type="submit" class="btn" value="submit">
<input type="reset" class="btn btn-link" value="reset">
<a href="#" class="btn">link</a>
<span class="btn">span</span> …

Voir : Différencier les boutons des liens, AcceDe Web.

Boutons complexes

Télécharger le fichier
(PDF - 42Ko) 
<a href="..." download class="btn btn-primary outline">
	<span class="fas fa-download" aria-hidden="true"></span>
	Télécharger le fichier
	<br><small>(PDF - 42Ko)</small>
</a>

Formulaires

Proximité

Chaque saisie doit être accompagnée d'une étiquette (<label>) visuellement accolée (RGAA 4 Critère 11.4).

<label for="exemple">Label</label>
<input type="..." id="exemple">

Voir : Utiliser la balise <label> ainsi que les attributs for et id, AcceDe Web.

Champs obligatoires

Les champs obligatoires doivent être visuellement distingués (RGAA 4 Critère 11.10).

<label for="exempleRequired">Champ obligatoire <abbr title="(obligatoire)">*</abbr></label>
<input type="..." id="exempleRequired" required>

Voir : Signaler les champs obligatoires ou Intégrer required dans les champs obligatoires, AcceDe Web.

Aides à la saisie

Une indication peut être ajoutée avant le champ.
Le champ ne peut contenir qu'un exemple de saisie.

<label for="exempleSIREN">
    Numéro SIREN
    <small>Numéro identifiant l'entreprise, composé de neuf chiffres.</small>
</label>
<input type="text" id="exempleSIREN" placeholder="ex. : 362 521 879">

Voir : Intégrer les aides à la saisie directement dans les balises <label>, AcceDe Web.

Exemple
We'll never share your email with anyone else.

Messages

Boîtes de messages

Messages outline

Messages complexes