Visuels et charte simple

Cette leçon est encore en test : elle s'améliore avec les retours des apprenants. Si quelque chose n'est pas clair, c'est la leçon qu'il faut corriger, pas toi.

À la fin de cette leçon, tu sauras

poser une charte simple : deux couleurs, une ou deux polices, un nom ou un logo ;
mesurer le contraste de tes couleurs, et savoir à quoi chacune peut servir ;
choisir des polices que tu as le droit d’utiliser ;
utiliser des images en respectant leurs droits, et celui des personnes photographiées.

Pourquoi ça t’intéresse

Des supports qui se ressemblent font sérieux : mêmes couleurs, mêmes polices, même place pour le nom. Mais une jolie couleur peut rendre un texte illisible, une police trouvée en ligne peut ne pas être libre, et une photo prise sur Internet peut appartenir à quelqu’un. Une charte d’une page règle tout ça une fois, pour tous tes documents.

Avant de commencer


Il te faut	Ton traitement de texte ou ton logiciel de présentation, la fiche charte (ressource), et ton assistant (facultatif)
Coût	0 € : polices gratuites et images que tu as le droit d’utiliser
Durée	50 minutes
Rappel	Une photo où l’on reconnaît quelqu’un ne se publie pas sans son accord

Comprendre en 3 minutes

Une charte simple :

deux couleurs (une principale, un accent), plus une couleur de texte et un fond ;
une ou deux polices : une pour les titres, une pour le texte (ou la même) ;
un nom ou un logo, toujours à la même place ;
des règles d’usage : quelle couleur pour quoi.

Le contraste, d’après le W3C (règles d’accessibilité WCAG 2.2, lues le 24/10/2026) :

Texte	Contraste minimum
Texte courant	4,5:1
Grand texte : au moins 18 pt, ou 14 pt en gras	3:1

Les seuils ne s’arrondissent pas : 4,499:1 ne suffit pas pour 4,5:1.

Notre charte d’exemple, calculée avec la formule du W3C (24/10/2026) :

Couleurs	Contraste	Usage possible
Bleu nuit #1F3A5F sur blanc	11,48:1	Titres et texte
Gris foncé #333333 sur blanc	12,63:1	Texte courant
Orange #E07A1F sur blanc	3,01:1	Grands titres et décor seulement
Bleu nuit sur orange	3,81:1	Grand texte seulement
Gris pâle #C8C8C8 sur blanc	1,67:1	Jamais pour du texte

Les polices. D’après Google Fonts (24/10/2026), toutes ses polices sont libres et gratuites, utilisables dans un usage commercial, la plupart sous licence SIL Open Font License. Pour une autre police, lis sa licence.

Les images :

tes propres photos : le plus simple ;
une personne reconnaissable : d’après la CNIL, le droit à l’image s’applique aussi sur Internet. D’après service-public.gouv.fr, il faut en principe son accord écrit avant de diffuser son image, et un accord précis : sur quel support, dans quel but, pour quelle durée (il existe des exceptions, voir plus bas : pour un document que tu fabriques, demande l’accord). Pour un mineur, l’autorisation des parents doit être obtenue par écrit ;
une banque d’images libres, comme Wikimedia Commons : d’après Commons, presque tout y est réutilisable, mais sous conditions (créditer l’auteur, mentionner la licence, parfois partager une version modifiée sous la même licence) ; la licence est sur la page de chaque fichier, et la Fondation Wikimedia ne garantit pas qu’elle soit juste ;
une image créée par une IA : c’est le sujet du module 11.

Faire ensemble

1Étape 1 : Choisir les couleurs et les polices

Ouvre la ressource Fiche charte. Choisis une couleur principale, un accent, une couleur de texte et un fond. Si tu manques d’idées :

Je prépare les supports de [ton projet]. Propose 3 palettes simples : une couleur principale, un accent, une couleur de texte et un fond, avec leurs codes. Pour chaque couleur, calcule son contraste avec le fond selon la formule du W3C, en exécutant le calcul, et dis si elle convient au texte courant (4,5:1), au grand texte (3:1), ou au décor seulement.

Les calculs d’une IA se vérifient (module 1, leçon 2) : contrôle au moins un résultat avec un vérificateur de contraste en ligne. Tu y entres le code du texte et celui du fond, et il donne le rapport (par exemple le Contrast Checker de WebAIM, sur webaim.org/resources/contrastchecker/). Compare-le à 4,5:1 et à 3:1. Dans PowerPoint, d’après l’aide de Microsoft, le Vérificateur d’accessibilité repère un contraste insuffisant dans certains cas seulement : il ne voit pas, par exemple, un texte dans une zone de texte transparente ou posé au-dessus de l’arrière-plan de la diapositive. Pour ces cas, utilise le vérificateur de contraste.

2Étape 2 : Remplir la fiche

Note les codes, les contrastes, et l’usage de chaque couleur. Note les polices et leur licence.

3Étape 3 : Un support d’essai

Fais une affiche d’une page (format A4) pour un vrai besoin, ou pour la soirée du club de lecture : un titre, trois informations, ton nom ou un logo, une image que tu as le droit d’utiliser. Applique la charte : rien en dehors de ses couleurs et de ses polices.

4Étape 4 : Les droits des images

Pour chaque image de l’affiche, remplis la partie 4 de la fiche : d’où elle vient, sa licence ou l’accord obtenu, et le crédit à écrire. Écris le crédit sur l’affiche, s’il est demandé.

Faire toi-même

Remplis la fiche charte pour ton projet.
Applique-la à un document de la leçon 2 et à la présentation de la leçon 3.
Donne la partie 5 de la fiche à ton assistant la prochaine fois qu’il crée un fichier pour toi.

Ressources à télécharger

Fiche charte : couleurs et contrastes, polices et licences, nom ou logo, images et droits, et la consigne à donner à ton assistant.

Vérifier

C’est réussi si :

ta fiche charte tient en une page, avec les codes et les contrastes mesurés ;
le texte courant fait au moins 4,5:1 sur son fond, et chaque couleur a son usage ;
tes polices ont une licence connue ;
chaque image a une origine, une licence ou un accord, et son crédit si besoin.

Erreurs fréquentes :

une couleur choisie « parce qu’elle est jolie », illisible en texte courant ;
du texte gris pâle pour les informations « secondaires » ;
une police téléchargée sur un site inconnu, sans licence ;
une photo trouvée sur Internet, sans savoir qui en a les droits ;
la photo d’un groupe publiée sans l’accord écrit des personnes reconnaissables (sauf cas particuliers, par exemple une scène de rue en lieu public où personne n’est mis en avant, sans but commercial ; pour des enfants, l’accord écrit des parents est toujours nécessaire).

Conserver et reprendre

Garde la fiche charte avec tes modèles (leçons 2 et 3) : tous tes supports partent d’elle.
Garde la trace des accords obtenus pour les photos de personnes.

Pour aller plus loin

facultatif

La page du W3C sur le contraste minimum, en anglais : sur w3.org, « Understanding Success Criterion 1.4.3: Contrast (Minimum) ».

Mots nouveaux

5 mots expliqués

Mot	Ce que ça veut dire
Charte	Les règles visuelles communes à tous tes supports : couleurs, polices, logo
Contraste	L’écart de luminosité entre le texte et le fond, mesuré en rapport (par exemple 4,5:1)
Licence	Les conditions d’utilisation d’une police, d’une image ou d’un texte
Crédit	La mention de l’auteur et de la licence, quand la licence la demande
Droit à l’image	Le droit d’une personne de refuser qu’on publie sa photo sans son accord

Date, version, sources Rédigée le 24/10/2026. Vérifications du 24/10/2026 :

contraste minimum de 4,5:1 et de 3:1 pour le grand texte (18 pt, ou 14 pt en gras), seuils non arrondis : w3.org, « Understanding Success Criterion 1.4.3: Contrast (Minimum) » ;
Vérificateur d’accessibilité et contraste insuffisant : support.microsoft.com, présentations PowerPoint accessibles, avec les cas qu’il ne repère pas ;
vérificateur de contraste (deux codes de couleur en entrée, rapport en sortie) : webaim.org/resources/contrastchecker ;
polices de Google Fonts libres, gratuites, usage commercial, licence SIL Open Font License : developers.google.com/fonts/faq ;
droit à l’image sur Internet, accord avant de publier, accord des parents pour un mineur : cnil.fr, « Le droit à l’image s’applique-t-il sur internet ? » ;
réutilisation des fichiers de Wikimedia Commons (conditions des licences, page du fichier, absence de garantie, autres droits) : commons.wikimedia.org, « Réutilisation de contenu hors de Wikimedia ».

Les contrastes de la charte d’exemple ont été calculés avec la formule du W3C (rapport de tests, T51).