Published lesson · 30 minutes

Choose readable contrast and respect motion settings

Objective: Check text and control contrast, use more than colour to show state, and respect a visitor’s reduced-motion preference.

The core idea

This lesson introduces choose readable contrast and respect motion settings. Check text and control contrast, use more than colour to show state, and respect a visitor’s reduced-motion preference. Begin with one small goal and make sure the result serves a real visitor or collaborator. The examples use fictional community information, so they can be adapted without exposing anyone’s private details.

The key idea is this: Contrast helps people distinguish text and boundaries from their background. Status also needs a word, icon or shape so colour is not the only signal. Motion can communicate change, but continuous or large movement can make content difficult to use. Keep that idea separate from visual decoration or tool-specific habits. When you can explain why a choice helps the intended task, it becomes easier to review the result and to choose a different approach when the situation changes.

Put it into practice

Apply it to this situation: A form can show “Required” beside its label as well as a coloured border. A small transition may help identify an opened menu. When reduced motion is requested, remove non-essential movement and preserve the information it conveyed. Start with the smallest useful change. Inspect what changed, describe what you expected to happen and compare the result with the goal. This makes practice possible on a shared device or with limited connectivity.

Watch out for this: A palette that looks clear on one screen can fail in bright light or at larger text sizes. Reducing motion should not hide content, disable focus, or remove status messages. If something does not work, return to one known-good version and change one detail at a time. Do not include real names, contact details, passwords or access keys in examples, screenshots or shared project history.

Review your work before moving on. Test text, links, focus outlines, status messages and controls at ordinary and enlarged text sizes. Turn on the operating system’s reduced-motion setting and confirm that all content remains available. A useful explanation names the audience, the decision and one check. Keep a short record of remaining questions so a facilitator or another learner can help without guessing what happened.

  • Name the task and audience before editing.
  • Make one focused change and inspect it.
  • Record one thing to improve or confirm next.

Worked examples

Choose readable contrast and respect motion settings: a small example

See how choose readable contrast and respect motion settings supports a clear, inclusive community web task.

index.html

<p><span aria-hidden="true">●</span> <strong>Available:</strong> Saturday, 10:00</p>
<style>@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms; transition-duration: .01ms; } }</style>

Practice tasks

  1. Explore the example

    Explore the choose readable contrast and respect motion settings example. Change one small detail for a different fictional community situation, then explain what you expected and how you checked it.

  2. Build a focused result

    Create a small result that demonstrates this objective: Check text and control contrast, use more than colour to show state, and respect a visitor’s reduced-motion preference. Keep the information fictional and explain one limitation that a future version should address.

  3. Review and explain your decision

    Review your choose readable contrast and respect motion settings result from another person's point of view. Name one strength, one exact uncertainty and a change that would make the result clearer or safer.

Choose readable contrast and respect motion settings is easier to learn when you name the goal, make one focused change and check the result with the people who need to use it.

Course overview