The Life Starter
0 of 6 complete0%
Course Library · Lesson 4 of 6
Create · Guided lesson

Use color with a contrast check

About 19 minutes · 4 reading + 15 practice and checks
Time includes reading, practice, and questions. Extra videos or further study are optional.
See this course’s project requirements

An original fictional library-workshop poster with one clear hierarchy, honest event details, contrast and size tests, editable vector source and readable PNG/PDF.

Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.

What to include

  • Create an original poster with one dominant title and complete fictional event facts.
  • Use a restrained type hierarchy, intentional alignment and grouped spacing.
  • Check long-text overflow and stated contrast pairs.
  • Inspect full/small renders and revise one specific failure.
  • Deliver editable vector source, checked PNG or documented equivalent, and same-content text.

Review and revise

Use these criteria to check your work and choose what to improve.

  • Hierarchy: visual priority follows the stated message goal.
  • Typography/layout: facts fit and groups are clear.
  • Access/truth: contrast evidence and equivalent fictional text are supplied.
  • Delivery: actual export is fresh and complete.
Open the full course project
Want more background?
Before you begin

The idea in everyday life

For a conservative digital-poster study, use at least 4.5:1 for all essential text, even when some headings qualify as large. The W3C minimum criterion permits 3:1 for defined large text, but size as delivered matters. Thresholds use unrounded ratios. A passing pair is one check, not whole-artifact accessibility certification.

The idea

Color pairs need a measured lightness relationship.

Follow along

Use color with a contrast check — worked practice

Color pairs need a measured lightness relationship.

Original simplified luminance case: text L=0.10, background L=0.90. Contrast=(0.90+0.05)/(0.10+0.05)=6.333…: 1, passing the course’s 4.5 target. A pale alternative text L=0.30 gives 0.95/0.35=2.714…: 1, failing. Use actual chosen color values in a contrast checker or the supplied formula/fixture; do not infer the ratio solely by naming colors.

  1. 1. 4.1 Use

    Record the actual text/background color pair for every essential group, including text over any shape. Prefer a plain dark/light starting pair.

    You should see: Pairs are tied to actual adjacent colors.

  2. 2. 4.2 Use

    Use a verified contrast checker or supplied relative-luminance inputs to calculate(Llight+0.05)/(Ldark+0.05). Retain the unrounded value for pass/fail.

    You should see: The ratio uses lighter/darker values in order.

  3. 3. 4.3 Use

    Replace a failing pair in a copy and recheck. Inspect whether small text remains legible after the change; numbers do not evaluate every font choice.

    You should see: The changed pair is rechecked.

  4. 4. 4.4 Use

    Document this focused contrast result and keep a selectable text companion. Do not label the entire design “WCAG certified” from this one calculation.

    You should see: The report scopes the result to contrast.

Now change one thing

Given Llight 0.85 and Ldark 0.15, contrast is 0.90/0.20. Enter the ratio.

Your work

What to finish

A color-pair contrast log and corrected poster palette.

Common mistake

Watch for this

Rounding a below-threshold ratio up or calling a contrast pass complete accessibility proof.

How can I tell I understand it?

You can reproduce a ratio and state the limits of the check.

Try 3 questions

Quick knowledge check

Answer all 3 questions. Get at least 2 right and the lesson completes automatically.

Not yet passed

You’ll get an explanation for each answer. Signed in? Your results save to your account.

1A normal-text pair has an unrounded ratio 4.499:1. Does it meet 4.5:1?
2For Llight 0.90 and Ldark 0.30, which ratio is correct?
3Which claim accurately reports a passing color pair?
0 of 3 answeredApply the lesson to a short question, then review the explanation.
4
Finish this lesson

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 check
Tools, 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.

W3C WAI: Understanding Contrast Minimum
Source & access notes · checked 2026-10-01

Read 4.5:1 normaltext/3:1 large-text thresholds, exact-boundary rule and relative-luminance formula; this is a focused check, not whole-site accessibility certification.

Access: Public page text or PDF was opened and read through the web reader on 2026-10-01; no signup required for reading.

Reuse: Linked for further study. All LifeStarter scenarios, samples, assets and assessments are original; no source exercises or artwork are copied.

Report a problem with this lesson

Tell us what went wrong. Please leave out personal information and private project contents.

No sign-in needed.