CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 4 · Exercice de TD

Pas seulement la couleur

Couleurs, unités et typographie · niveau 2

Énoncé


body {
  font-family: system-ui, sans-serif;
  color: #222;
}

/* Les liens ne se distinguent que par leur couleur */
a {
  color: #1f3a68;
  text-decoration: none;
}

/* Le champ en erreur ne se signale que par sa bordure rouge */
.erreur {
  border: 2px solid #b3261e;
}


  <p>Consultez <a href="conditions.html">nos conditions de retrait</a> avant de commander.</p>
  <form action="/commande" method="post">
    <p>
      <label for="courriel">Courriel</label>
      <input class="erreur" type="email" id="courriel" name="courriel" value="claire.martin">
    </p>
    <p><button type="submit">Commander</button></p>
  </form>

Relever les deux informations transmises par la couleur seule. Calculer d'abord le contraste du lien bleu nuit sur le texte #222 (luminances $0, 0432$ et $0, 0160$ ) : suffit-il à distinguer le lien ? Corriger la feuille et le HTML.

Corrigé

Les deux informations : « ceci est un lien » (seulement la couleur, le soulignement est supprimé) et « ce champ est en erreur » (seulement la bordure rouge).

Contraste du lien sur le texte : $\frac{0 , 0432 + 0 , 05}{0 , 0160 + 0 , 05} = \frac{0 , 0932}{0 , 0660} \approx 1, 41$ . Les règles d'accessibilité demandent au moins 3:1 entre un lien et le texte qui l'entoure quand rien d'autre ne le distingue : bleu nuit et gris très foncé sont presque indiscernables. On garde le soulignement.

Pour l'erreur, on ajoute un message en toutes lettres, relié au champ par aria-describedby, et l'on signale l'état invalide aux technologies d'assistance par aria-invalid="true" :


    <p>
      <label for="courriel">Courriel</label>
      <input class="erreur" type="email" id="courriel" name="courriel" value="claire.martin" aria-invalid="true" aria-describedby="erreur-courriel">
      <span class="message-erreur" id="erreur-courriel">Adresse incomplète : il manque « @ » et le domaine.</span>
    </p>


body {
  font-family: system-ui, sans-serif;
  color: #222;
}

/* Les liens gardent leur soulignement */
a {
  color: #1f3a68;
  text-underline-offset: 0.2em;
}

/* Le champ en erreur : bordure, et un message en toutes lettres */
.erreur {
  border: 2px solid #b3261e;
}

.message-erreur {
  font-weight: 600;
  color: #b3261e;
}

.message-erreur::before {
  content: "⚠ ";
}

Le rouge #b3261e a un contraste de 6,2:1 sur le crème et 6,5:1 sur le blanc : le message se lit, et il se lit aussi sans voir les couleurs.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →