Give course cards a consistent color system
A learner should be able to recognize a course when moving from the dashboard to a lesson. Repeat its accent in the card header or a narrow border. Keep the course name visible; color alone is not a reliable identifier.
For several courses on one screen, use the same card layout and reserve a small area for each accent. Full-card gradients in several saturated colors can compete with the lesson titles. A plain content area gives those titles somewhere to sit.
Keep gradients away from long reading passages
A restrained transition can give a course banner depth. Behind a paragraph, that transition changes the background beneath individual words. Some words may become harder to read.
Put long instructions on a solid surface. If a title sits over a gradient, check the colors directly beneath the letters. When that becomes awkward, use a solid title panel rather than adding a shadow and hoping for the best.
| Screen area | Color treatment | Keep visible |
|---|---|---|
| Course header | A gradient around a solid title area | Course name and navigation |
| Lesson card | A small accent with a plain text area | Lesson title and status |
| Reading view | A consistent, quiet background | Body text, headings and links |
| Quiz feedback | Color beside an icon and written result | The answer explanation |
Show progress with words as well as color
A row of green and gray circles may look tidy, but its meaning is not obvious to everyone. Add a label such as “3 of 8 lessons completed.” Mark the current lesson with text or a clear shape.
The W3C guidance on use of color explains why information must not depend on color alone. The same principle applies to overdue work, selected tabs and required form fields.
- Completed: a check mark and a written status.
- Current: a visible border or marker, plus “Current lesson.”
- Locked: a lock icon with the requirement for opening the activity.
Make quiz feedback easy to follow
Show “Correct” or “Try again” beside the answer explanation. Put feedback in the same place across questions, so learners know where to look. A red or green accent can reinforce that message.
Check text against the whole background
WCAG’s minimum contrast guidance calls for at least 4.5:1 for ordinary text and 3:1 for large text. Large text here means at least 18 pt, or 14 pt bold. The same foreground color may work over one part of a gradient and fail over another.
Use the color contrast checker for the background colors beneath the text. Check intermediate colors as well as the endpoints. Review keyboard access and labels separately; a color-pair result covers contrast only.
Try one header before changing the whole course
Keep an existing course card’s title, status and main action in place. Try a gradient only in the header. The gradient maker can help you adjust that transition.
Compare the card at its actual dashboard size. Can the title still be read? Is the next action obvious? Check keyboard focus and hover states too. A header that looks good on its own still has to share the screen with the rest of the course.