Legibility and Readability: Two Different Viewing Problems
A task-based distinction between recognising characters and controls versus understanding words, hierarchy, labels, and layout efficiently.
In short: Legibility is the ability to distinguish letters, numbers, icons, and control states. Readability is the ability to understand words, sentences, labels, hierarchy, and layout efficiently across a task. A text label can be legible but difficult to read in a dense interface; a clear layout can still fail when characters are too small or low-contrast.
Choosing the wrong diagnosis produces weak fixes. Enlarging text may improve legibility but create clipping that harms readability; simplifying labels may improve scanning but not fix low contrast.
Test legibility directly
Ask the viewer to identify:
- similar letters or numbers;
- icon meaning with its label;
- focused versus selected control;
- active versus unavailable state;
- metadata at normal distance;
- caption punctuation and speaker marks.
Record errors and effort, not just whether the viewer eventually answers.
Test readability through tasks
Ask the viewer to:
- scan a row and choose a title;
- understand a filter group;
- read a synopsis and metadata;
- compare versions;
- navigate a dialog and confirm the intended action;
- return to the previous context.
A task reveals hierarchy, grouping, wording, density, and sequence problems.
Original evidence: paired card
| Layer | Test | Result | Barrier | Candidate variable |
|---|---|---|---|---|
| Legibility | Identify characters/control state | Pass/issue | Size, contrast, shape, focus | One factor |
| Readability | Complete navigation/reading task | Pass/issue | Density, hierarchy, wording, reflow | One factor |
Retest one candidate variable at a time.
Common legibility factors
Character size, font shape, weight, spacing, contrast, glare, distance, edge treatment, and display rendering can affect recognition. Colour-only states can make controls indistinguishable even when text is readable.
Use the real environment instead of a close-up screenshot.
Common readability factors
Long labels, repeated metadata, weak headings, inconsistent terminology, crowded controls, poor grouping, unexpected focus order, and broken reflow can make an interface hard to understand.
Readability is language- and task-dependent. Involve fluent users for multilingual content.
Test interaction between them
Increase text size one supported step. If characters become clearer but controls overlap or content disappears, the legibility improvement revealed a reflow barrier. Use the large-text reflow guide rather than reversing the user's setting.
Run the comparison with the same title, language, task, viewport, and input. First ask the viewer to identify a specific label or state; then ask them to use it to complete the task. Record identification time only when timing is genuinely useful, and pair it with the viewer's explanation. A fast guess is not evidence that the element was clear. If a change improves recognition but increases navigation errors, document both outcomes instead of collapsing them into one pass or fail.
For icons, test the symbol and its visible label together before judging the icon alone. Familiarity can make an ambiguous symbol appear obvious to an experienced reviewer. A first-time or infrequent user may rely on the label, position, and surrounding hierarchy.
Include the environment
Glare, distance, lighting, and screen angle can reduce apparent legibility and increase reading effort. Use the viewing-environment audit to separate room factors from interface factors.
The complete visual-comfort guide connects these findings with zoom, colour, focus, and motion.
Avoid medical conclusions
Ask what the viewer can identify and complete. Do not explain difficulty through an assumed condition. A reproducible task barrier is actionable without diagnosis.
Report precisely
State context, distance, zoom or scaling, task, exact element, expected result, observed error, workaround, and privacy-safe screenshot. Replace “text is bad” with “year and rating are indistinguishable at the normal TV distance.”
Common mistakes and limitations
Avoid using the words interchangeably, testing at an unrealistically close distance, changing font and layout together, and assuming a larger size solves every reading problem.
The distinction is a diagnostic tool, not a formal medical assessment. Current product controls still need official verification.
Frequently asked questions
Can text be legible but unreadable?
Yes. Individual characters may be clear while dense wording, weak hierarchy, or poor layout makes the task difficult.
Can a readable layout contain illegible controls?
Yes. The sequence may make sense while small text, low contrast, or unclear focus hides individual elements.
Which problem should be fixed first?
Address blocking recognition and task failures by impact, then retest because changing one layer can affect the other.
Your next step
Explore Norva's interface features
Sources
- W3C: Making Content Usable for People with Cognitive and Learning Disabilities
- W3C: Contrast (Minimum)
- Norva Features