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 Critère 3.3 [AA]).

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, %…). L'utilisation du pixel (px) est proscrite.
La valeur de l'interligne doit être de 1.5 fois la taille du texte, au moins (RGAA Critère 10.12 [AAA]).

Police

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.

Boutons

Palette

Boutons outline

Boutons complexes

<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 Critère 11.4 [A]).

<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 Critère 11.10 [A]).

<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