Skip to content
Design Academy My progress

Accessibility · Beginner · 30 min

Fix contrast and colour-only problems

A status dashboard that uses pale grey text and only red and green to show state. Make it readable and colour-independent.

Context

An internal order tracker shows each order's status as a coloured dot: green for shipped, amber for packing, red for delayed. Secondary text is light grey (#B0B0B0) on white, and the "View" links are light blue (#7FB2FF) with no underline.

Your prompt

Fix the visual accessibility problems while keeping the design calm and scannable.

Before: status by colour only, and low-contrast secondary text and links.

Instructions

  1. Check the contrast of #B0B0B0 and #7FB2FF on white with a contrast checker and record the ratios.
  2. Choose replacement colours that reach at least 4.5:1 for normal text.
  3. Add a text label to every status, and consider an icon shape that differs per status.
  4. Make the "View" links recognisable as links without relying only on colour, and give them descriptive accessible names.
  5. Check your result in a greyscale view or a colour-blindness simulator.

Expected deliverables

  • A table of old and new colours with contrast ratios
  • The fixed design
  • A greyscale screenshot proving status is still clear

Completion checklist

4 items

Evaluation criteria

  • Ratios are measured, not guessed.
  • Status is communicated by text and shape, with colour as a supporting cue.
  • The design is still calm, not cluttered with warnings.

Hints and an illustrative solution

Show hints
  • WebAIM's contrast checker and most design tools show ratios.
  • Shapes such as a tick, a box and an exclamation mark help when colours look the same.
  • Screen reader users hear "View, View, View". Add hidden text such as "View order 1042".
Show one possible solution

This is one reasonable answer, not the only one. Compare reasoning, not pixels.

#B0B0B0 on white is about 2.2:1 and #7FB2FF about 2.2:1, both well below 4.5:1. One fix uses #5C5C5C for dates (about 6.7:1) and #1E40AF for links (about 8.7:1), underlined. Each status becomes a small pill with an icon and a word: "✓ Shipped", "Packing", "! Delayed". The pill backgrounds stay pale and the text is dark, so the word carries the meaning and colour only supports it. Links read "View" visually with hidden text "order 1042" for screen readers.

Back to the practice library