Field Guide
Accessibility + Visual QA Field Guide.
A practical checklist for reviewing color, contrast, labels, interaction states, visual meaning, and motion before a learning experience ships.
Accessibility should not be treated like a final sprinkle of compliance dust.
By the time a course, resource, interaction, or prototype is “basically done,” the biggest accessibility problems are usually already baked into the design.
Color is carrying too much meaning. Buttons look like labels. State changes rely on subtle shades. Feedback depends on red and green. Gradients look beautiful until the text sits on top of the wrong part. Motion adds energy but not clarity.
This field guide is meant to catch those problems earlier, while they are still easy to fix.
Core Rule
Color can support meaning, but it should never carry meaning alone.
Good visual design can absolutely use color. The problem starts when color becomes the only way someone knows what changed, what matters, what is selected, what is risky, what is correct, or what action they should take next.
Color + text
Color + icon
Color + shape
Color alone
How to use this field guide
Use this as a design QA pass before you publish, share, or hand off a learning experience.
It works especially well for Resource Lab-style interactions, Rise blocks, Storyline screens, web-based learning tools, interactive infographics, scenario activities, dashboards, charts, and anything with buttons, cards, progress states, or feedback messages.
The goal is not to flatten every design into grayscale oatmeal. The goal is to make sure the experience still works when color perception, screen size, lighting, cognitive load, motion sensitivity, or assistive technology changes the way someone receives the design.
QA Checklist
Review the design before the design reviews you back.
Move through each checkpoint and look for places where visual polish may be hiding usability problems.
Color Meaning
Check whether red, green, blue, purple, or any other color is the only signal for status, correctness, risk, progress, selection, or urgency.
- Add visible labels such as Correct, Try again, Selected, Complete, High risk, or Next step.
- Use icons or shapes to reinforce meaning.
- Make sure color supports the message instead of replacing it.
Contrast
Review text, buttons, cards, labels, and key interface elements against their backgrounds.
- Avoid low-contrast gray text on white backgrounds.
- Check text over gradients, images, and tinted panels.
- Make hover and active states visible enough to notice.
Red / Green Dependency
Look for feedback, charts, badges, progress indicators, or status states that depend on red and green differences.
- Pair red/green with text labels.
- Use different shapes, icons, or patterns where possible.
- Avoid making green equal “good” and red equal “bad” without another cue.
Navy / Purple Separation
Review places where dark blue, navy, violet, and purple appear close together, especially in gradients, labels, buttons, and charts.
- Increase lightness or saturation differences.
- Avoid using navy and purple as the only distinction between categories.
- Add labels directly on or near the visual element.
Buttons + Links
Make sure interactive elements look interactive before someone hovers, taps, or guesses wildly and hopes for the best.
- Buttons should look like buttons.
- Links should be visually distinct from body text.
- Clickable cards should include clear action text.
State Changes
Check selected, active, hover, disabled, completed, correct, incorrect, and warning states.
- Do not rely only on a subtle color shift.
- Add text, icons, borders, movement, or layout changes when helpful.
- Make disabled states readable, not ghostly little design ghosts.
Charts + Metrics
Review charts, scorecards, dashboards, and progress visuals for meaning that depends only on color.
- Label chart segments directly where possible.
- Use legends that do more than show tiny color squares.
- Pair color with icons, patterns, values, or annotations.
Motion + Animation
Motion should guide attention, clarify change, or create useful feedback. It should not become visual confetti with a completion badge.
- Avoid unnecessary looping motion.
- Keep transitions short and purposeful.
- Respect reduced-motion preferences when possible.
Visual Hierarchy
Review whether the most important thing on the screen actually looks like the most important thing.
- Use size, spacing, weight, and layout, not only color.
- Reduce competing emphasis styles.
- Make next actions visually obvious.
Plain-Language Cues
Make sure the interface tells people what happened, what changed, and what to do next.
- Use clear labels for feedback and status.
- Avoid vague messages like “Invalid” without explanation.
- Write action text that describes the action.
Color QA
The “can I still understand this?” test.
When reviewing a screen, imagine the color differences are reduced, distorted, unavailable, or harder to separate. Then ask whether the design still communicates the same message.
Color alone
A learner sees two cards. One turns green and one turns red. No label, no explanation, no icon, no text cue.
Problem: the meaning depends on color perception.Color + cue + explanation
A learner sees “Exactly” with a check icon and coaching feedback, or “Not exactly” with a redirect and explanation.
Better: the meaning is visible in multiple ways.Common fixes that improve accessibility quickly
You do not always need a massive redesign. Sometimes the fix is boring in the best possible way.
Red / green feedback only
Use labels like “Strong choice” and “Needs another look,” plus icons or short coaching messages.
Color-only chart categories
Add direct labels, values, patterns, icons, or annotations so each category is identifiable without relying on hue alone.
Subtle selected states
Add a stronger border, selected label, checkmark, layout change, or summary confirmation.
Text floating on gradients
Use a solid panel, stronger overlay, simpler gradient, or move the text to a cleaner area.
Mystery icon buttons
Add visible labels, accessible names, tooltips where appropriate, or nearby helper text.
Motion as decoration
Use motion to show sequence, progress, cause and effect, feedback, or a meaningful change in state.
Review Prompts
Questions to ask before publishing.
These prompts are useful during self-review, peer review, stakeholder review, or before turning a prototype into something more permanent.
What does the learner need to notice first, and is that clear without relying only on color?
If someone cannot easily distinguish red from green, does the feedback still make sense?
If navy and purple look too similar, do labels, spacing, or icons still separate the categories?
Can the learner tell what is selected, completed, disabled, correct, incorrect, or risky?
Does every clickable element look clickable before someone interacts with it?
Does motion help the learner understand something, or is it mostly there because static felt boring?
Would this screen still work on a phone, in bad lighting, under stress, or during a quick skim?
Does the learner know what happened, why it matters, and what to do next?
Mini Scorecard
A quick way to rate the screen.
Use this simple scorecard during review. If any area lands in “needs work,” fix it before polishing the visuals further. Nobody needs a beautifully inaccessible masterpiece. That is just a very fancy problem.
Clear without color
Meaning is supported by text, icons, labels, shape, layout, or explanation.
Readable contrast
Important text and interface elements are easy to read against the background.
Visible states
Selected, active, completed, disabled, and feedback states are easy to identify.
Useful motion
Animation supports attention, sequence, feedback, or change without becoming distracting.
Useful Tool
Test the palette before it becomes the problem.
A color accessibility simulator can help you check whether your palette, gradients, cards, states, and visuals still work for different kinds of color vision.
Accessibility QA is not about making design less creative.
It is about making sure the design still works when real humans use it in real conditions, with real variation, on real devices, while doing real work.
That is not a constraint on creativity. That is the job.