Sélecteurs, couleurs, contraste

Objectifs

  • Maîtriser : sélecteurs
  • Maîtriser : contraste WCAG
  • Maîtriser : variables CSS

Cours

Cette leçon fait partie du parcours annuel Code Academy Alfred. Objectif : comprendre sélecteurs, contraste WCAG, variables CSS en conditions réelles de conception web / web mobile.

Les variables CSS (:root { --ink: #0b1f1c }) sont la base d’un design system. Évite les couleurs « au feeling » non contrastées.

Le bug classique : texte gris clair sur fond clair, ou blanc sur jaune. Vérifie toujours le contraste.

Préfère hsl/oklch pour ajuster luminosité sans casser la teinte.

Mets en pratique immédiatement : recrée l’exemple, puis modifie-le. La mémorisation vient de la répétition active, pas de la lecture passive.

Si tu bloques, utilise Cursor avec un prompt précis (contexte + objectif + contraintes), puis explique toi-même le diff généré.

Évaluation

Évaluation

1. Blanc sur fond jaune vif pose souvent un problème de…