Visuals and a simple style guide

This lesson is still being tested: it improves with learners' feedback. If something is unclear, it is the lesson that needs fixing, not you.

By the end of this lesson, you will be able to

set up a simple style guide: two colors, one or two fonts, a name or a logo;
measure the contrast of your colors, and know what each one can be used for;
choose fonts you have the right to use;
use images while respecting their rights, and the rights of the people photographed.

Why it matters to you

Materials that look alike look serious: the same colors, the same fonts, the same place for the name. But a pretty color can make text unreadable, a font found online may not be free to use, and a photo taken from the internet may belong to someone. A one-page style guide settles all of this once, for all your documents.

Before you start


You need	Your word processor or your presentation software, the style guide sheet (resource), and your assistant (optional)
Cost	€0: free fonts and images you have the right to use
Duration	50 minutes
Reminder	A photo in which someone is recognizable is not published without their permission

Understand it in 3 minutes

A simple style guide:

two colors (a main one, an accent), plus a text color and a background;
one or two fonts: one for the headings, one for the text (or the same one);
a name or a logo, always in the same place;
rules of use: which color for what.

Contrast, according to the W3C (WCAG 2.2 accessibility rules, read on 24/10/2026):

Text	Minimum contrast
Body text	4.5:1
Large text: at least 18 pt, or 14 pt bold	3:1

The thresholds are not rounded: 4.499:1 is not enough for 4.5:1.

Our example style guide, calculated with the W3C formula (24/10/2026):

Colors	Contrast	Possible use
Midnight blue #1F3A5F on white	11.48:1	Headings and text
Dark gray #333333 on white	12.63:1	Body text
Orange #E07A1F on white	3.01:1	Large headings and decoration only
Midnight blue on orange	3.81:1	Large text only
Pale gray #C8C8C8 on white	1.67:1	Never for text

Fonts. According to Google Fonts (24/10/2026), all its fonts are open source and free of charge, can be used commercially, and most are under the SIL Open Font License. For any other font, read its license.

Images:

your own photos: the simplest option;
a recognizable person: the rules below are those of French law, and they differ from country to country: check the rules where you live. According to the CNIL (the French data protection authority), the right to one’s image also applies on the internet. According to service-public.gouv.fr (French government site), you must in principle have their written permission before publishing their image, and a specific permission: on which medium, for what purpose, for how long (there are exceptions, see below: for a document you make, ask for permission). For a minor, the parents’ authorization must be obtained in writing;
a free image library, such as Wikimedia Commons: according to Commons, almost everything there can be reused, but under conditions (credit the author, mention the license, sometimes share a modified version under the same license); the license is on the page of each file, and the Wikimedia Foundation does not guarantee that it is correct;
an image created by an AI: this is the subject of module 11.

Do it together

1Step 1: Choose the colors and the fonts

Open the resource Style guide sheet. Choose a main color, an accent, a text color and a background. If you are short of ideas:

I am preparing the materials for [your project]. Propose 3 simple palettes: a main color, an accent, a text color and a background, with their codes. For each color, calculate its contrast with the background using the W3C formula, by running the calculation, and say whether it is suitable for body text (4.5:1), for large text (3:1), or for decoration only.

An AI’s calculations need to be checked (module 1, lesson 2): check at least one result with an online contrast checker. You enter the text code and the background code, and it gives the ratio (for example WebAIM’s Contrast Checker, at webaim.org/resources/contrastchecker/). Compare it with 4.5:1 and 3:1. In PowerPoint, according to Microsoft’s help, the Accessibility Checker finds insufficient contrast only in some cases: for example, it does not see text in a transparent text box or placed over the slide background. For those cases, use the contrast checker.

2Step 2: Fill in the sheet

Write down the codes, the contrasts, and the use of each color. Write down the fonts and their license.

3Step 3: A trial piece

Make a one-page poster (A4 format) for a real need, or for the book club’s evening: a title, three pieces of information, your name or a logo, an image you have the right to use. Apply the style guide: nothing outside its colors and fonts.

4Step 4: Image rights

For each image on the poster, fill in part 4 of the sheet: where it comes from, its license or the permission obtained, and the credit to write. Write the credit on the poster, if it is required.

Your turn

Fill in the style guide sheet for your project.
Apply it to a document from lesson 2 and to the presentation from lesson 3.
Give part 5 of the sheet to your assistant the next time it creates a file for you.

Resources to download

Style guide sheet: colors and contrasts, fonts and licenses, name or logo, images and rights, and the instruction to give your assistant.

Check your work

It worked if:

your style guide sheet fits on one page, with the codes and the measured contrasts;
body text has at least 4.5:1 on its background, and each color has its use;
your fonts have a known license;
each image has a source, a license or permission, and its credit if needed.

Common mistakes:

a color chosen “because it’s pretty”, unreadable as body text;
pale gray text for “secondary” information;
a font downloaded from an unknown site, with no license;
a photo found on the internet, without knowing who holds the rights;
a group photo published without the written permission of the recognizable people (except in special cases, for example a street scene in a public place where nobody is singled out, with no commercial purpose; for children, the parents’ written permission is always needed).

Keep it and pick it up later

Keep the style guide sheet with your templates (lessons 2 and 3): all your materials start from it.
Keep a record of the permissions obtained for photos of people.

Going further

optional

The W3C page on minimum contrast, in English: on w3.org, “Understanding Success Criterion 1.4.3: Contrast (Minimum)”.

New words

5 words explained

Word	What it means
Style guide	The visual rules shared by all your materials: colors, fonts, logo
Contrast	The difference in brightness between the text and the background, measured as a ratio (for example 4.5:1)
License	The conditions of use of a font, an image or a text
Credit	The mention of the author and of the license, when the license requires it
Image rights	A person’s right to refuse to have their photo published without their permission

Date, version, sources Written on 24/10/2026. Checks of 24/10/2026:

minimum contrast of 4.5:1 and of 3:1 for large text (18 pt, or 14 pt bold), thresholds not rounded: w3.org, “Understanding Success Criterion 1.4.3: Contrast (Minimum)”;
Accessibility Checker and insufficient contrast: support.microsoft.com, accessible PowerPoint presentations, with the cases it does not detect;
contrast checker (two color codes in, a report out): webaim.org/resources/contrastchecker;
Google Fonts fonts open source, free of charge, commercial use, SIL Open Font License: developers.google.com/fonts/faq;
right to one’s image on the internet, permission before publishing, parents’ permission for a minor: cnil.fr, “Le droit à l’image s’applique-t-il sur internet ?” (page in French);
reuse of Wikimedia Commons files (license conditions, file page, no guarantee, other rights): commons.wikimedia.org, “Réutilisation de contenu hors de Wikimedia” (page in French; English version “Commons:Reusing content outside Wikimedia”).

The contrasts in the example style guide were calculated with the W3C formula (test report, T51).