Make visuals understandable
See this course’s project requirements
Deliver the repaired workshop notice and the review evidence assembled across all six lessons.
Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.
What to include
- Provide clear event facts, action instructions and meaningful link labels.
- Show a semantic heading outline and logical reading order.
- Record image alternatives and a justified contrast decision.
- Provide timed captions and a descriptive transcript for the sample clip.
- Attach a keyboard trace, issue statuses and a scoped handoff.
Review and revise
Use these criteria to check your work and choose what to improve.
- Clarity: essential facts and actions are understandable without visual guessing.
- Structure: hierarchy and reading order match content relationships.
- Equivalence: visuals and media have meaningful text support.
- Evidence: tests and remaining limits are documented honestly.
Want more background?
The idea in everyday life
Color and images can communicate quickly, but they should not be the only route to essential information. Your workshop notice includes a decorative illustration and a two-bar capacity chart. You will decide what each visual contributes, write text that preserves the chart’s meaning, and assess supplied contrast ratios without needing a paid design tool.
Contrast describes how clearly a visual element stands out from its background. Keep text readable and provide text that communicates important information from images.
One step at a time.
Use the sample or information you have permission to use. Keep your work as you go. You can pause between steps.
- 1
Classify the illustration as decorative if it adds no information beyond nearby text. In a digital format that supports it, mark it decorative or use an empty alternative; do not fill the alternative with a filename.
- 2
For the capacity chart, write the actual information in text: session A has eight spaces and session B has three. Include the difference if it is relevant to the notice’s action.
- 3
Use WCAG’s normal-text minimum of 4.5:1 for this exercise. The supplied measurements are gray body text=3.2:1 and dark body text=7:1 on the same background; select the passing treatment.
- 4
Keep status labels such as "Open" and "Full" alongside any green or red markers. Underline links or otherwise make their function clear without depending solely on color differences.
- 5
Record the chosen text treatment, image decisions and supplied ratios. If using an actual checker, record the real colors and result; do not label a paper selection as a measured implementation test.
See how it works.
Fictional visual review: a wrench illustration repeats the workshop theme and is decorative. The chart is informative: "Spaces available: session A, 8; session B, 3. Session A has 5 more spaces." That alternative preserves the meaningful comparison without describing every bar’s appearance. A supplied contrast measurement of 3.2:1 fails the normal-text target, while 7:1 passes. These are measured fixture values, not a claim that all gray or dark colors have the same ratio. A full-session badge uses the word "Full" as well as color, so its meaning survives grayscale viewing.
Did you cover these?
- Chart text includes 8, 3 and the difference of 5.
- Normal text uses the 7:1 fixture option.
- Status meaning remains without color.
What to finish
Image-purpose notes, chart alternative and contrast decision record.
Watch for this
Writing what an image looks like while omitting the information it communicates.
How can I tell I understand it?
Explain the chart without seeing it and apply the correct supplied threshold.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkTools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
Source & access notes · checked 2026-09-10
Opened the standards organization’s public educational modules for content authors. Used to verify appropriate subject coverage; this is an original course, not a reproduced W3C syllabus.
Access: Free public reading; no account or certificate is required for this Life Starter course.
Reuse: Linked for reference. Examples, activities and assessments here are original; free access alone does not grant permission to reuse source text or branding.
Source & access notes · checked 2026-09-10
Read guidance on headings, meaningful links, text alternatives and clear instructions.
Access: Free public reading; no account or certificate is required for this Life Starter course.
Reuse: Linked for reference. Examples, activities and assessments here are original; free access alone does not grant permission to reuse source text or branding.
Source & access notes · checked 2026-09-10
Verified WCAG 2.2 SC 1.4.3 thresholds of 4.5:1 for normal text and 3:1 for large text; lesson does not claim full conformance.
Access: Free public reading; no account or certificate is required for this Life Starter course.
Reuse: Linked for reference. Examples, activities and assessments here are original; free access alone does not grant permission to reuse source text or branding.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.