Quizzes
154,730 views
25 min · 2 min read
7 steps
Intermediate

How to build a visual-only quiz for colorblind-friendly accessibility

Designing a visual-only quiz that is friendly for people with color vision differences is about more than picking different hues. Use clear shapes, patterns, contrast, and multiple distinguishing cues so everyone can perceive and respond correctly. This guide walks you through practical steps to build a seven-step accessible visual quiz.

Verified by pleasexplain editors
  1. Step 1: Define clear learning goal

    Identify one specific objective such as testing pattern recognition, spatial ordering, or symbol matching. Limit the quiz to 5–10 items to keep cognitive load low and aim for a completion time of 3–7 minutes so participants stay engaged.

    [Illustration: a checklist on paper with goal written 'pattern recognition' and a timer showing 5 minutes]

  2. Step 2: Choose non-color identifiers

    Select shapes, icons, numbers, or textures to differentiate options rather than relying on color alone. Use at least two distinguishing features per option, for example shape plus number, so choices remain clear even if color cues are missed.

    [Illustration: a row of distinct shapes with overlaid numbers and texture stripes]

  3. Step 3: Design high-contrast visuals

    Ensure luminance contrast between foreground and background is at least 4.5:1 for text and key symbols; for larger graphics aim for 3:1. Test with grayscale view to confirm elements still separate without color information.

    [Illustration: a set of symbols shown in high-contrast black and white and a grayscale filter applied]

  4. Step 4: Add patterned fills and outlines

    Use patterns (dots, diagonal lines, crosshatch) and bold outlines to convey differences that don’t depend on hue. Keep pattern repeats medium-sized (4–12 px at typical screen scale) so they’re visible on most displays and mobile screens.

    [Illustration: three squares filled with dots, diagonal stripes, and crosshatch, each with thick black outlines]

  5. Step 5: Provide redundant labels

    Include short text labels, numbers, or letters directly on or next to each visual option so users can reference them without relying on color. Keep labels concise (1–3 characters) and position them consistently across items.

    [Illustration: icons with adjacent letter A, B, C labels in a uniform position near each icon]

  6. Step 6: Pilot with colorblind simulations

    Run a quick test by viewing the quiz through at least two colorblind simulation filters (deuteranopia and protanopia) and ask 3–5 people with color vision differences to try it. Allocate 30–60 minutes for this iteration and record any confusion points.

    [Illustration: a laptop screen showing the quiz with side-by-side normal and simulated colorblind views]

  7. Step 7: Collect feedback and iterate

    After a small pilot, gather specific suggestions about ambiguous items and revise visuals accordingly; aim to complete one revision cycle within 1–2 days. Re-test the problematic 2–3 items to confirm clarity before wider release.

    [Illustration: a small group reviewing printed quiz cards and marking changes with a red pen]


  • Use 16–24 px fonts for labels on mobile and 18–28 px on desktop for readability.
  • Keep each quiz screen uncluttered: limit to 1–3 choices displayed at once.

    Was this guide helpful?