Normative requirement or technical specification.
Recommended language: “WCAG 2.2 requires…”
No citation entries match the current search and evidence-type filter.
1. Source classification
Use the source type to select accurate verbs and avoid presenting design theory as experimental proof or a working draft as an enforceable standard.
Controlled experiment, observational study, or original research.
Recommended language: “The study found…”
Literature review, systematic review, or research synthesis.
Recommended language: “The review concludes…”
Conceptual model, book, heuristic, or design theory.
Recommended language: “Tufte argues…” or “Munzner proposes…”
Practitioner guidance or production design-system precedent.
Recommended language: “NN/g recommends…” or “Fluent implements…”
Work in progress; not a final standard.
Recommended language: “The current working draft explores…”
Recommended evidence order
Normative standard
↓
Primary empirical research
↓
Systematic review
↓
Formal framework
↓
Practitioner guidance
↓
Design-system precedent
2. Edward Tufte and visual evidence
Tufte’s work is best cited as analytical design criticism and visual-reasoning theory. His books use historical cases, graphical analysis, and design synthesis rather than controlled UX experiments.
Framework
- Use for
- Graphical integrity, data-ink ratio, lie factor, small multiples, data density, and high-resolution displays.
- Reference as
- Tufte argues that visual displays should maximize meaningful data communication while reducing graphical elements that do not support interpretation.
- Do not overstate
- Do not claim controlled UX research proves that maximizing data-ink always produces the best interface.
Envisioning Information
TUFTE-EIFramework
- Use for
- Layering and separation, micro/macro readings, visual complexity, color and information, escaping flatland, and multidimensional data.
- Reference as
- Tufte proposes layering and separation as mechanisms for presenting complex information without fragmenting it.
- Best future application
- Dense dashboards, card alternatives, multivariate displays, maps, comparative matrices, and semantic hierarchy.
Framework
- Use for
- Cause and effect, processes, motion, before-and-after evidence, decision-making, and Challenger analysis.
- Reference as
- Tufte emphasizes that explanations should show mechanisms, comparisons, sequence, and causes rather than presenting isolated outcomes.
- Best future application
- Incident timelines, deployment analysis, before-and-after views, causal hypotheses, and process visualization.
Beautiful Evidence
TUFTE-BEFramework
- Use for
- Integrating prose, numbers, diagrams, images, annotations, and provenance into one evidential structure.
- Reference as
- Tufte treats words, numbers, images, diagrams, and motion as complementary forms of evidence that should be evaluated for quality, relevance, and integrity.
- Best future application
- Claim–evidence structures, source attribution, annotated charts, sparklines, and multimodal reports.
Framework
- Use for
- Observation, analytical seeing, typography, meaning, spatial reasoning, and truth in presentation.
- Reference as
- Tufte frames visual reasoning as a discipline of sustained observation rather than merely choosing an attractive representation.
- Best future application
- Reframing UI problems before choosing cards, charts, or interaction patterns.
Framework
- Use for
- Decision evidence, multivariate reasoning, causal analysis, comparison, and the Challenger case.
- Reference as
- Tufte argues that decision displays should arrange relevant variables together so the reader can test relationships and alternative explanations.
- Best future application
- Executive decision support, incident review, risk analysis, and evidence-based recommendations.
The Cognitive Style of PowerPoint
TUFTE-POWERPOINTFramework
- Use for
- Evidence fragmentation, low-resolution presentation, bullet hierarchies, and slide-driven reasoning.
- Reference as
- Tufte criticizes presentation formats that fragment related evidence and prevent direct comparison.
- Best future application
- Avoiding “one metric per card,” excessive tab segmentation, wizard-only inspection, and sparse layouts that increase memory burden.
Slopegraphs for Comparing Gradients
TUFTE-SLOPEGRAPHFrameworkPractice
- Use for
- Two-point change, rank movement, before-and-after values, direction, and magnitude.
- Reference as
- Tufte recommends slopegraphs when the analytical task is to compare changes between two meaningful states.
- Boundary
- They become difficult to read when too many series overlap or labels cannot be placed clearly.
Chartjunk
TUFTE-CHARTJUNKFrameworkPractice
- Use for
- Visual elements that consume attention without supporting the data or interpretation.
- Reference as
- Tufte uses “chartjunk” to criticize visual treatments that compete with, obscure, or distort the evidence.
- Boundary
- Do not use the term as a blanket objection to all illustration, branding, or visual personality.
Quoting Tufte correctly
- Quote the actual book in formal documents.
- Include edition and page number.
- Do not cite Goodreads or quote collections.
- Use the official website for publication metadata or book descriptions.
- Prefer paraphrasing when the precise page is unavailable.
3. Visual grammar and graphical perception
Semiology of Graphics: Diagrams, Networks, Maps
BERTIN-1967Framework
- Use for
- Position, size, shape, orientation, value, texture, and hue as distinct visual variables.
- Reference as
- Bertin established a systematic visual grammar in which graphical variables have different capacities for expressing categories, order, and quantity.
- Best future application
- Choosing whether a distinction should be encoded by position, lightness, hue, size, or shape.
- Boundary
- Bertin’s taxonomy is foundational theory, not a current accessibility specification.
Primary
- Use for
- Relative accuracy of position, length, angle, slope, area, volume, and color-based encodings.
- Reference as
- Cleveland and McGill found that judgments based on aligned position and length were generally more accurate than judgments based on area or volume.
- Best future application
- Justifying bars, dots, aligned values, and tables over bubbles, radial gauges, or 3D forms.
- Boundary
- Treat the ordering as a population-level empirical pattern, not an immutable rule for every task or individual.
Primary
- Use for
- Extending graphical-perception findings to scientific data analysis.
- Reference as
- Cleveland and McGill used perceptual evidence to motivate graphical methods that support more accurate quantitative comparison.
- Best future application
- Technical dashboards, scientific reporting, and analytical interfaces.
Primary
- Use for
- Additional controlled evidence on graphical decoding tasks.
- Reference as
- Subsequent Cleveland and McGill experiments further evaluated how accurately viewers decode different graphical forms.
- Use when
- A design review needs stronger support than a general visualization guideline.
A Review of Graphical Perception Research
GRAPHICAL-PERCEPTION-REVIEWReview
- Use for
- Contemporary synthesis and qualification of classic encoding hierarchies.
- Reference as
- Later graphical-perception research broadly supports the importance of encoding choice while showing that outcomes vary by task, chart construction, and population.
- Best future application
- Avoiding overly rigid references to a single universal encoding hierarchy.
Individual Differences in Visualization Perception
VIS-INDIVIDUAL-DIFFERENCESPrimary
- Use for
- Variability among users in chart decoding and visualization performance.
- Reference as
- Visualization performance can vary meaningfully across individuals, so population-level design rankings should not replace testing with the intended audience.
- Best future application
- Accessibility, expert-versus-novice interfaces, and configurable visualization modes.
Framework
- Use for
- Expressiveness and effectiveness criteria.
- Reference as
- Mackinlay formalized the distinction between representing the data truthfully and selecting an effective perceptual encoding.
- Best future application
- Explaining why a truthful chart can still be a poor chart.
A Nested Model for Visualization Design and Validation
MUNZNER-NESTEDFramework
- Use for
- Separating domain problems, data/task abstraction, visual encoding and interaction, and implementation algorithms.
- Reference as
- Munzner’s nested model identifies distinct failure modes at the domain, abstraction, encoding and interaction, and algorithmic layers.
- Best future application
- Task-first design reviews and diagnosing whether a UI failure is conceptual or merely presentational.
Visualization Analysis and Design
MUNZNER-BOOKFramework
- Use for
- Visualization task abstraction, idiom selection, data types, validation, interaction, and scalability.
- Reference as
- Munzner provides a systematic methodology for moving from domain questions to data abstractions and appropriate visual idioms.
- Best future application
- Formal visualization design standards and generated chart-selection logic.
Information Visualization: Perception for Design
WARE-PERCEPTIONFrameworkReview
- Use for
- Visual attention, pattern recognition, color perception, motion, spatial cognition, and preattentive processing.
- Reference as
- Ware synthesizes vision science into practical principles for designing perceptually effective information displays.
- Best future application
- Salience, chart readability, visual search, color, and motion decisions.
4. Attention, hierarchy, scanning, and grouping
A Feature-Integration Theory of Attention
TREISMAN-1980PrimaryFramework
- Use for
- Feature search, conjunction search, preattentive attributes, and selective attention.
- Reference as
- Treisman and Gelade distinguished rapid search for a unique visual feature from slower search requiring combinations of features.
- Best future application
- Exception highlighting, selected states, and limiting the number of visual properties required to find an item.
- Boundary
- Do not summarize this as “any brightly colored element is processed instantly.”
Forty Years After Feature Integration Theory
FIT-40-YEAR-REVIEWReview
- Use for
- Current interpretation and qualification of feature-integration theory.
- Reference as
- Later research has revised and expanded feature-integration theory while retaining the importance of feature-based attention and search.
- Best future application
- When a design decision needs a contemporary source rather than the 1980 paper alone.
Primary
- Use for
- Rapid judgments of visual appeal.
- Reference as
- Lindgaard and colleagues found that visual-appeal judgments formed after very brief exposure could remain consistent with judgments formed after longer exposure.
- Do not say
- “Users understand the interface in 50 milliseconds” or “usability is determined in 50 milliseconds.”
Primary
- Use for
- Visual complexity, familiar structural patterns, and first impressions.
- Reference as
- Tuch and colleagues found that visual complexity and prototypicality influence immediate aesthetic evaluations of websites.
- Best future application
- Supporting recognizable information architecture and controlling first-viewport complexity.
F-Shaped Pattern of Reading on the Web
NNG-SCANNINGPractice
- Use for
- Scanning behavior, front-loaded wording, headings, and line structure.
- Reference as
- NN/g’s eye-tracking work observed recurring scanning patterns, including the F-pattern, particularly in poorly formatted or text-heavy content.
- Do not say
- “All users always read in an F pattern.” NN/g explicitly treats it as one of several possible patterns.
The Law of Proximity
NNG-PROXIMITYPracticeFramework
- Use for
- Grouping related elements through spacing.
- Reference as
- Proximity communicates relationships, making spacing a semantic design variable rather than mere decoration.
- Best future application
- Card internals, metadata rows, headings, filters, and section separation.
Eye-Tracking Research on Older Adults: Systematic Review
OLDER-ADULT-EYETRACKING-REVIEWReview
- Use for
- Age-related visual search, fixation, attention, and interface evaluation.
- Reference as
- Research on older adults indicates that clutter, peripheral placement, and complex visual search can create disproportionate difficulty for aging users.
- Best future application
- Designing for older adults, accessible travel tools, dense dashboards, and critical workflows.
Older Adults Fail to See Peripheral Information
OLDER-ADULT-PERIPHERYPrimary
- Use for
- Peripheral placement, attention distribution, and age-related discoverability.
- Reference as
- Eye-tracking evidence suggests that older adults can be less likely to notice information placed outside their primary scan path.
- Best future application
- Avoiding critical actions or alerts only at viewport edges.
5. Interaction, discoverability, and user control
The Design of Everyday Things
NORMAN-DOETFramework
- Use for
- Signifiers, mappings, feedback, conceptual models, affordances, and execution/evaluation gaps.
- Reference as
- Norman argues that interfaces should make possible actions discoverable and should provide visible feedback about system state and outcomes.
- Best future application
- Buttons, filters, controls, loading states, errors, and state transitions.
Signifiers, Not Affordances
NORMAN-SIGNIFIERSFrameworkPractice
- Use for
- Distinguishing what an object permits from what communicates how to use it.
- Reference as
- Norman distinguishes affordances from signifiers: the interface must visibly communicate where and how an action can be performed.
- Best future application
- Avoiding false affordances, passive pills that resemble buttons, and hidden controls.
Framework
- Use for
- “Overview first, zoom and filter, then details on demand.”
- Reference as
- Shneiderman proposes an information-seeking sequence that begins with orientation, supports narrowing, and then exposes detail.
- Boundary
- Treat it as a design mantra, not a universal experimental law.
Direct Manipulation: A Step Beyond Programming Languages
SHNEIDERMAN-DIRECTFramework
- Use for
- Visible objects, incremental actions, reversibility, and immediate feedback.
- Reference as
- Shneiderman characterizes direct manipulation through visible objects, rapid incremental operations, and reversible actions.
- Best future application
- In-place filters, drag-and-drop, previews, editable classifications, and undo.
10 Usability Heuristics for User Interface Design
NIELSEN-HEURISTICSFrameworkPractice
- Use for
- System visibility, control, consistency, error prevention, recognition, recovery, and minimalism.
- Reference as
- Nielsen’s heuristics provide a broad inspection framework for identifying common interaction and comprehension failures.
- Do not say
- “These ten rules have been experimentally proven to cover every usability failure.”
Recognition Rather Than Recall
NIELSEN-RECOGNITIONPractice
- Use for
- Visible options, labels, histories, defaults, and applied filter state.
- Reference as
- Interfaces should reduce memory burden by making relevant options, state, and prior information visible or readily retrievable.
- Best future application
- Persistent filters, labeled icons, recent items, and visible current scope.
Visibility of System Status
NNG-STATUSPractice
- Use for
- Loading, saving, filtering, refresh time, completion, and system feedback.
- Reference as
- NN/g recommends timely, understandable feedback that communicates the current state of the system.
- Best future application
- AI generation, data refreshes, filter result counts, and long-running operations.
Progressive Disclosure
NNG-PROGRESSIVE-DISCLOSUREPractice
- Use for
- Showing essential functions first while retaining access to advanced or secondary detail.
- Reference as
- Progressive disclosure can reduce initial complexity when hidden content is secondary and its availability remains discoverable.
- Boundary
- It should not hide primary findings, required controls, or evidence necessary for comparison.
Card View Versus List View
NNG-CARD-LISTPractice
- Use for
- Choosing among cards, compact lists, and comparison structures.
- Reference as
- Cards support browsing distinct objects, while lists and tables generally support denser scanning and comparison.
- Best future application
- Avoiding card-only interfaces for repeated, comparable data.
Content Dispersion
NNG-CONTENT-DISPERSIONPractice
- Use for
- Excessive whitespace, mobile layouts stretched onto desktop, and information fragmentation.
- Reference as
- NN/g uses content dispersion to describe layouts in which related information is spread so widely that understanding and comparison require unnecessary navigation or memory.
The Use of Icons and Labels in an End User Application Program
WIEDENBECK-1999Primary
- Use for
- Icons alone versus labels and icon-plus-label interfaces.
- Reference as
- Wiedenbeck found performance and learning differences among icon-only, label-only, and icon-plus-label conditions, with text labels materially supporting initial use.
- Boundary
- Do not generalize the result into a claim that every conventional icon always requires visible text in every context.
The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement
FITTS-1954Primary
- Use for
- Pointer-target size, distance, acquisition time, and placement.
- Reference as
- Fitts’s work models target-acquisition difficulty as a relationship between distance and target width.
- Best future application
- Mobile controls, icon buttons, frequent actions, and avoiding small targets.
- Boundary
- Do not reduce Fitts’s law to “make every element as large as possible.”
6. Narrative visualization, annotations, and memorability
Narrative Visualization: Telling Stories with Data
SEGEL-HEER-2010PrimaryFramework
- Use for
- Author-driven versus reader-driven presentation, narrative genres, annotations, and guided exploration.
- Reference as
- Segel and Heer describe narrative visualization as a balance between guided communication and reader-controlled exploration.
- Best future application
- Briefings that state a finding first and then permit evidence inspection.
Animated Transitions in Statistical Data Graphics
HEER-ROBERTSON-2007Primary
- Use for
- Animated state transitions, object constancy, filtering, reordering, and changes in graphical representation.
- Reference as
- Heer and Robertson found that carefully designed animated transitions can help viewers track changes between visualization states.
- Boundary
- Do not say animation is always better. It can impede exact comparison and accessibility.
What Makes a Visualization Memorable?
BORKIN-2013Primary
- Use for
- Recognition, memorability, titles, visual distinctiveness, and imagery.
- Reference as
- Borkin and colleagues found systematic differences in visualization memorability and identified characteristics associated with stronger recognition.
- Best future application
- Qualifying extreme interpretations of minimalist design.
Primary
- Use for
- What viewers remember from visualizations, not merely whether they recognize having seen them.
- Reference as
- Later Borkin research investigated which visualization elements viewers recognize and recall over time.
- Best future application
- Editorial explainers, executive communication, and durable visual storytelling.
Primary
- Use for
- Effects of meaningful embellishment on comprehension and memory.
- Reference as
- Borgo and colleagues found that some forms of meaningful visual embellishment can support memory without necessarily reducing comprehension.
- Boundary
- This does not justify arbitrary decoration or data distortion.
Authoring Narrative Visualizations with Ellipsis
ELLIPSIS-ANNOTATIONPrimaryPractice
- Use for
- Annotations as first-class parts of narrative visualization.
- Reference as
- Narrative visualization systems can treat text, arrows, highlights, and graphical annotations as explicit evidence-guidance elements.
- Best future application
- Directly annotating deployments, threshold crossings, and major findings.
7. Color theory, palette semantics, and graphical color
ColorBrewer 2
COLORBREWERFrameworkPractice
- Use for
- Choosing palette families that match data structure.
- Reference as
- ColorBrewer distinguishes sequential palettes for ordered magnitude, diverging palettes for deviations around a midpoint, and qualitative palettes for unordered categories.
- Best future application
- Maps, heatmaps, risk scales, variance displays, and category colors.
- Detailed guidance
- Sequential, Diverging, and Qualitative Schemes
Color Inference in Visual Communication
SCHLOSS-2018PrimaryFramework
- Use for
- How users infer mappings between colors and concepts.
- Reference as
- Schloss and colleagues show that color meanings are shaped by learned concept associations and contextual expectations.
- Best future application
- Status semantics, category assignments, legends, and culturally sensitive color choices.
- Boundary
- Do not treat associations such as “blue means trust” as universal psychological laws.
Color Semantics in Human Cognition
SCHLOSS-2024Review
- Use for
- Current synthesis of color-concept associations, semantic inference, and lightness–magnitude expectations.
- Reference as
- Current color-semantics research indicates that color mappings can support interpretation when they align with learned and contextually relevant expectations.
- Best future application
- Semantic-token design and data-color mapping.
Selecting Semantically Resonant Colors for Data Visualization
SEMANTIC-COLOR-2013Primary
- Use for
- Category-color mappings such as blue for oceans or yellow for bananas.
- Reference as
- Lin and colleagues found that semantically resonant category-color assignments improved speed in chart-reading tasks compared with a standard palette.
- Best future application
- Category palettes where concepts have recognizable color associations.
- Boundary
- Semantic resonance must still be balanced with contrast and category discriminability.
Review
- Use for
- Qualifying claims about color affecting behavior and cognition.
- Reference as
- Reviews of color psychology report contextual effects but also substantial boundary conditions and unresolved questions.
- Best future application
- Rejecting simplistic statements such as “blue always creates trust” or “orange always improves conversion.”
- Related open-access review
- Color and Psychological Functioning
Good Colour Maps: How to Design Them
KOVESI-2015FrameworkPractice
- Use for
- Perceptual uniformity, lightness progression, and problems with rainbow color scales.
- Reference as
- Kovesi argues for color maps whose perceived progression more consistently follows the underlying numeric progression.
- Best future application
- Sequential heatmaps, scientific data, risk intensity, and avoiding rainbow scales.
Practice
- Use for
- An implementation precedent for perceptually ordered, color-vision-aware scales.
- Reference as
- Viridis provides a practical family of continuous palettes designed to remain perceptually ordered and usable under grayscale and common color-vision deficiencies.
- Boundary
- Cite Kovesi or primary color-map research for theory; cite Viridis for implementation precedent.
PrimaryPractice
- Use for
- The Cividis palette and color-vision-aware continuous scale construction.
- Reference as
- Cividis was developed to provide a perceptually appropriate continuous scale with improved accessibility for common color-vision deficiencies.
- Best future application
- Scientific or operational heatmaps requiring continuous quantitative color.
An Empirical Assessment of Quantitative Colormaps
QUANT-COLORMAPS-2018Primary
- Use for
- Empirical comparison of quantitative color scales.
- Reference as
- Empirical color-map research shows that quantitative interpretation depends on perceptual ordering, discrimination, and task characteristics.
- Best future application
- Selecting continuous palettes based on performance rather than appearance alone.
The Effects of Color Palette and Category Count on Multiclass Scatterplots
CATEGORICAL-COLOR-2023Primary
- Use for
- Category count, palette discriminability, and interpretation accuracy.
- Reference as
- Categorical palette effectiveness declines as category count and discrimination demands increase.
- Best future application
- Limiting simultaneous series, using direct labels, filtering, shapes, or small multiples.
8. Accessibility and contrast standards
WCAG 2.2 is the practical conformance baseline. WCAG 3 remains a working draft and should not be cited as a current requirement.
Standard
- Use for
- Current WCAG 2.2 success criteria, levels, techniques, and failures.
- Reference as
- “WCAG 2.2 Level AA requires…”
- Best future application
- Accessibility acceptance criteria, automated testing, and design-system gates.
Understanding WCAG 2.2
WCAG22-UNDERSTANDINGStandardGuidance
- Use for
- Intent, examples, benefits, techniques, and failure conditions.
- Reference as
- “W3C’s Understanding document explains that…”
- Boundary
- For contractual or legal language, cite the underlying success criterion as the requirement.
Understanding 1.4.1: Use of Color
WCAG-1.4.1Standard
- Use for
- Prohibiting color as the only means of communicating information, actions, responses, or distinctions.
- Reference as
- WCAG 2.2 SC 1.4.1 requires that color not be the only visual means used to communicate meaningful information.
Understanding 1.4.3: Contrast Minimum
WCAG-1.4.3Standard
- Use for
- Minimum text contrast.
- Reference as
- WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text, subject to defined exceptions.
Contrast Enhanced
WCAG-1.4.6Standard
- Use for
- AAA text contrast.
- Reference as
- WCAG 2.2 Level AAA requires 7:1 for normal text and 4.5:1 for large text, subject to defined exceptions.
Understanding 1.4.11: Non-Text Contrast
WCAG-1.4.11Standard
- Use for
- Meaningful icons, control boundaries, graphical objects, and interactive states.
- Reference as
- WCAG 2.2 Level AA requires visual information needed to identify UI components and states to have at least 3:1 contrast against adjacent colors.
Understanding Headings and Labels
WCAG-2.4.6Standard
- Use for
- Descriptive headings and labels.
- Reference as
- WCAG requires headings and labels to describe their topic or purpose.
Headings That Reflect Page Organization
W3C-HEADINGSPractice
- Use for
- Semantic heading hierarchy.
- Reference as
- W3C recommends nested headings that reflect the content hierarchy rather than headings chosen only for appearance.
Understanding Reflow
WCAG-1.4.10Standard
- Use for
- Responsive presentation at an equivalent width of 320 CSS pixels.
- Reference as
- WCAG requires content to reflow without loss of information or functionality, except where two-dimensional layout is essential.
Understanding Text Spacing
WCAG-1.4.12Standard
- Use for
- Surviving user-adjusted line, paragraph, word, and character spacing.
- Reference as
- WCAG requires content to remain usable when users override specified text-spacing properties.
Focus Not Obscured: Minimum
WCAG-2.4.11Standard
- Use for
- Sticky headers, overlays, scroll containers, and keyboard focus.
- Reference as
- WCAG 2.2 Level AA requires that a focused component not be entirely hidden by author-created content.
Focus Appearance
WCAG-2.4.13Standard
- Use for
- Enhanced focus size and contrast.
- Reference as
- WCAG 2.2 SC 2.4.13 defines enhanced focus-appearance requirements at Level AAA.
- Important
- Do not identify SC 2.4.13 as an AA requirement.
Target Size: Minimum
WCAG-2.5.8Standard
- Use for
- Minimum pointer-target sizing or sufficient target spacing.
- Reference as
- WCAG 2.2 Level AA generally requires pointer targets to be at least 24×24 CSS pixels or satisfy a defined spacing or exception condition.
Content on Hover or Focus
WCAG-1.4.13Standard
- Use for
- Tooltips, popovers, and supplemental hover/focus content.
- Reference as
- WCAG requires qualifying hover or focus content to be dismissible, hoverable, and persistent under specified conditions.
Button Has an Accessible Name
W3C-BUTTON-NAMEStandard
- Use for
- Icon buttons and programmatic labeling.
- Reference as
- Interactive buttons require a meaningful accessible name that describes their function.
- Best future application
aria-label, visible labels, icon buttons, and automated accessibility tests.
WCAG 3.0 Working Draft
WCAG3-DRAFTDraft
- Use for
- Monitoring future accessibility models, outcome-based requirements, and evolving contrast methods.
- Reference as
- “The March 3, 2026 WCAG 3 working draft explores…”
- Never write
- “WCAG 3 currently requires…”
9. Color vision, polarity, and user preferences
Worldwide Prevalence of Red-Green Color Deficiency
CVD-PREVALENCEPrimaryReview
- Use for
- Prevalence estimates and population variation.
- Reference as
- Congenital red-green color-vision deficiency is considerably more prevalent among males, though prevalence varies by ancestry and population.
- Boundary
- Do not present a single percentage as universally applicable.
Color-Vision Deficiency: A Global Perspective
CVD-GLOBAL-REVIEWReview
- Use for
- Broader contemporary context, acquired deficiencies, prevalence, and practical implications.
- Reference as
- Color accessibility must consider both congenital and acquired color-vision limitations.
- Best future application
- Moving beyond the phrase “colorblind safe.”
Text–Background Polarity Affects Performance
POLARITY-2009Primary
- Use for
- Positive-polarity versus negative-polarity reading performance.
- Reference as
- Controlled studies have found performance advantages for dark text on light backgrounds in some reading and proofreading tasks.
- Boundary
- Do not conclude that light mode is universally more accessible for every user and condition.
Primary
- Use for
- Character size and polarity interaction.
- Reference as
- Positive-polarity advantages can be especially relevant when text is small.
- Best future application
- Dense tables, metadata, mobile interfaces, and long-form reading.
Dark Mode in Data Visualization: Individual Differences
DARKMODE-2024Primary
- Use for
- Measured performance, individual preference, and variation across users.
- Reference as
- Recent visualization research found that polarity effects differ among users and that stated preference does not always match measured performance.
- Best future application
- Supporting both light and dark appearances rather than declaring one universally superior.
10. CSS and implementation specifications
CSS Color Module Level 4
CSS-COLOR-4Specification
- Use for
- Lab, LCH, Oklab, OkLCh, alpha composition, wide-gamut spaces, and color interpolation.
- Reference as
- CSS Color 4 defines modern perceptual color-space functions including
lab(),lch(),oklab(), andoklch(). - Best future application
- Building perceptually controlled color ramps and theme tokens.
- Boundary
- A perceptual color space does not itself guarantee WCAG contrast or color-vision accessibility.
CSS Color Module Level 5
CSS-COLOR-5DraftSpecification
- Use for
color-mix(), relative color syntax,light-dark(), and evolving contrast functions.- Reference as
- CSS Color 5 defines emerging color-modification and adaptation functions.
- Boundary
- Check browser support and specification status before treating a feature as a production baseline.
Media Queries Level 5
MEDIA-QUERIES-5Specification
- Use for
prefers-color-scheme,prefers-contrast,forced-colors, andprefers-reduced-transparency.- Reference as
- Media Queries Level 5 exposes user and device preferences that allow interfaces to adapt color and presentation.
- Important
- Do not use an unqualified
prefers-contrastquery when the distinction betweenmoreandlessmatters.
CSS Color Adjustment Module Level 1
CSS-COLOR-ADJUSTSpecification
- Use for
color-scheme, forced-color adaptation, and user-agent color adjustment.- Reference as
- CSS Color Adjustment defines how authored colors interact with user-preferred schemes and forced-color environments.
- Best future application
- High-contrast themes and Windows forced-colors support.
11. Design-system precedents
These sources demonstrate mature implementation patterns. They are useful precedents, not independent proof that a pattern is universally optimal.
Fluent 2 Design Tokens
FLUENT-TOKENSPractice
- Use for
- Primitive, alias, and component-token architecture.
- Reference as
- Fluent separates raw palette values from semantic and component-specific roles.
- Best future application
- Theme remapping, interaction states, and eliminating hardcoded colors.
Fluent 2 Color
FLUENT-COLORPractice
- Use for
- Neutral, brand, status, and shared color roles.
- Reference as
- Fluent uses neutral, brand, status, and generic color families rather than relying only on primary and secondary colors.
Fluent 2 Accessibility
FLUENT-ACCESSIBILITYPractice
- Use for
- Applied contrast, keyboard, focus, touch, and accessibility guidance.
- Reference as
- Fluent applies WCAG-oriented contrast expectations to text, essential icons, and UI components.
Fluent 2 Iconography
FLUENT-ICONSPractice
- Use for
- Icon geometry, sizing, consistency, and filled versus regular states.
- Reference as
- Fluent uses a consistent icon grammar and provides state-compatible icon variants.
- Best future application
- Standardizing icon weight, bounding boxes, and selected states.
Atlassian Design System: Color
ATLASSIAN-COLORPractice
- Use for
- Semantic color roles, emphasis levels, interaction states, and warning foregrounds.
- Reference as
- Atlassian separates semantic colors from interchangeable accent colors and defines role-specific foregrounds for bold status surfaces.
- Best future application
- Warning contrast, semantic tokens, and avoiding arbitrary category color meanings.
USWDS Color Tokens
USWDS-COLORPractice
- Use for
- Accessible token grades and predictable contrast relationships.
- Reference as
- USWDS organizes colors into graded token families designed to support repeatable contrast selection.
- Best future application
- Enterprise contrast matrices and government-grade accessibility.
USWDS Accessibility
USWDS-ACCESSIBILITYPractice
- Use for
- Applied accessibility governance and component expectations.
- Reference as
- USWDS treats accessibility as a system-level design and implementation responsibility rather than a final audit step.
Apple HIG: Color
APPLE-COLORPractice
- Use for
- Adaptive color, hierarchy, semantic color, light/dark appearance, and system colors.
- Reference as
- Apple recommends adaptive semantic colors and cautions against using color as the sole means of communication.
Apple HIG: Accessibility
APPLE-ACCESSIBILITYPractice
- Use for
- Redundant encoding, text, contrast, motion, touch, and assistive technology.
- Reference as
- Apple recommends reinforcing color with labels, icons, shapes, or other distinguishable cues.
Apple HIG: Buttons
APPLE-BUTTONSPractice
- Use for
- Button hierarchy, labeling, and practical touch-target sizing.
- Reference as
- Apple recommends comfortably sized, clearly labeled controls and commonly uses a 44-point interaction target as a platform guideline.
- Boundary
- Distinguish Apple’s platform guidance from WCAG’s normative 24-CSS-pixel minimum.
12. Icon communication design
Icon meaning, labeling, contrast, target size, state, and semantic consistency require different evidence sources.
Meaning and learning → WIEDENBECK-1999 Accessible name → W3C-BUTTON-NAME Visual contrast → WCAG-1.4.11 Target size → WCAG-2.5.8 / APPLE-BUTTONS Semantic consistency → FLUENT-ICONS Redundant state encoding → WCAG-1.4.1 / APPLE-ACCESSIBILITY
Visible labels
Empirical icon research and usability guidance support persistent labels for unfamiliar, consequential, or primary actions.
Use: WIEDENBECK-1999
Monochrome utility icons
Utility icons should generally inherit semantic foreground colors through currentColor, allowing consistent theming, focus, forced-colors, and state adaptation.
Use: FLUENT-ICONS, CSS-COLOR-ADJUST
Icon contrast
Meaningful icons and graphical control indicators generally require at least 3:1 contrast against adjacent colors under WCAG 2.2 SC 1.4.11.
Use: WCAG-1.4.11
Redundant state
Selection, warning, and error states should not depend on icon color alone; combine color with label, shape, position, border, or iconography.
Icon containers
Colored icon containers should be reserved for high-value actions, identity, or strong semantic states because they consume substantial visual salience.
Use: TUFTE-EI, TREISMAN-1980, WARE-PERCEPTION
13. Ethical interaction design
Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites
DARK-PATTERNS-2019Primary
- Use for
- Dark-pattern taxonomy, manipulation, coercion, hidden costs, obstruction, urgency, and deceptive defaults.
- Reference as
- Mathur and colleagues identified 1,818 dark-pattern instances across approximately 11,000 shopping websites and classified them into 15 types and seven broader categories.
- Best future application
- Consent, cancellation, sponsored content, destructive actions, subscription flows, and equivalent-choice presentation.
- Boundary
- This paper documents a large sample of shopping sites; do not treat its prevalence estimate as universal across all digital products.
14. Recommended citation combinations by design question
Should we use cards or a table?
Use: TUFTE-EI, CM-1984, NNG-CARD-LIST, NNG-CONTENT-DISPERSION
Because the task requires repeated attribute comparison, an aligned table or compact list is more appropriate than independent cards. This follows Tufte’s emphasis on comparative density, Cleveland and McGill’s findings on aligned position, and applied UX guidance on cards versus lists.
Why should signal strength remain subordinate?
Use: TREISMAN-1980, WARE-PERCEPTION, TUFTE-EI, TUCH-2012
Signal strength is a supporting analytical attribute rather than the content identity. Saturated color, large containers, or repeated icon backgrounds would give it disproportionate preattentive salience and increase first-viewport complexity.
Why should dates not be pills?
Use: NORMAN-SIGNIFIERS, NIELSEN-HEURISTICS, TUFTE-VDQI
A pill visually signifies an interactive control or selected value. Presenting a passive date in the same form creates a false affordance and spends visual emphasis without adding meaning.
Why do icons need labels?
Use: WIEDENBECK-1999, NIELSEN-RECOGNITION, W3C-BUTTON-NAME, WCAG-1.4.1
Persistent labels reduce interpretation and recall demands, while accessible names ensure that the function is exposed programmatically. Color or icon shape alone should not carry consequential meaning.
Why must color not carry state alone?
Use: WCAG-1.4.1, SCHLOSS-2018, CVD-PREVALENCE, APPLE-ACCESSIBILITY
WCAG prohibits color-only communication because color perception and color-concept mappings vary among users and contexts. State should also be expressed through text, icon, shape, position, or pattern.
Why use neutral-first palettes?
Use: TUFTE-EI, TREISMAN-1980, FLUENT-COLOR, ATLASSIAN-COLOR
Neutral surfaces and typography should carry most structural hierarchy. This preserves saturated and semantic colors for selections, exceptions, actions, and analytical meaning.
Why use semantic tokens rather than hex values?
Use: FLUENT-TOKENS, USWDS-COLOR, CSS-COLOR-4, MEDIA-QUERIES-5
Semantic tokens separate intent from implementation. They allow the same component role to be remapped across light, dark, increased-contrast, and forced-color environments without editing component-level CSS.
Why avoid rainbow scales?
Use: KOVESI-2015, QUANT-COLORMAPS-2018, COLORBREWER, CIVIDIS
Rainbow scales lack a consistent perceptual ordering and can introduce false boundaries. Perceptually ordered sequential or diverging scales better preserve magnitude relationships.
Why expose confidence and sources?
Use: TUFTE-BE, TUFTE-VST, MUNZNER-NESTED
An analytical classification should expose enough provenance, comparison, and uncertainty for the reader to reconstruct or challenge the conclusion.
15. Compact reference-key index
TUFTE-VDQI Graphical integrity, data-ink, small multiples TUFTE-EI Layering, complexity, micro/macro design TUFTE-VE Causality, process, evidence narratives TUFTE-BE Integrated multimodal evidence TUFTE-SFE Observation, meaning, visual reasoning TUFTE-VST Decision evidence TUFTE-POWERPOINT Evidence fragmentation TUFTE-SLOPEGRAPH Before/after and rank changes TUFTE-CHARTJUNK Unproductive visual decoration BERTIN-1967 Visual variables CM-1984 Perceptual accuracy of encodings CM-1985 Scientific graphical methods CM-1986 Graphical perception experiments MACKINLAY-1986 Expressiveness and effectiveness MUNZNER-NESTED Four-layer visualization validation MUNZNER-BOOK Visualization analysis and design WARE-PERCEPTION Vision science for visualization TREISMAN-1980 Feature and conjunction search LINDGAARD-2006 Rapid visual-appeal judgment TUCH-2012 Complexity and prototypicality NNG-SCANNING Web scanning patterns NNG-PROXIMITY Perceptual grouping OLDER-ADULT-EYETRACKING Aging and visual search NORMAN-DOET Signifiers, mappings, feedback NORMAN-SIGNIFIERS Visible action cues SHNEIDERMAN-EYES Overview, filter, details SHNEIDERMAN-DIRECT Direct manipulation NIELSEN-HEURISTICS General usability inspection NIELSEN-RECOGNITION Recognition over recall NNG-STATUS System-state visibility NNG-PROGRESSIVE-DISCLOSURE Secondary detail management NNG-CARD-LIST Container selection WIEDENBECK-1999 Icons and labels FITTS-1954 Target acquisition SEGEL-HEER-2010 Guided narrative and exploration HEER-ROBERTSON-2007 Animated transitions BORKIN-2013 Visualization memorability BORKIN-2015 Recognition and recall BORGO-2012 Meaningful embellishment ELLIPSIS-ANNOTATION Narrative annotations COLORBREWER Palette families SCHLOSS-2018 Color-concept inference SCHLOSS-2024 Color semantics SEMANTIC-COLOR-2013 Semantically resonant palettes ELLIOT-MAIER-2014 Color psychology review KOVESI-2015 Perceptually uniform scales VIRIDIS Practical continuous palettes CIVIDIS CVD-aware continuous palette QUANT-COLORMAPS-2018 Empirical colormap performance CATEGORICAL-COLOR-2023 Category count and discrimination WCAG22 Accessibility baseline WCAG-1.4.1 Color not sole channel WCAG-1.4.3 Text contrast WCAG-1.4.11 Non-text contrast WCAG-1.4.10 Reflow WCAG-1.4.12 Text spacing WCAG-2.4.6 Descriptive headings and labels WCAG-2.4.11 Focus not obscured WCAG-2.4.13 Enhanced focus appearance WCAG-2.5.8 Target size W3C-BUTTON-NAME Accessible control names WCAG3-DRAFT Future work only CSS-COLOR-4 Perceptual CSS color spaces CSS-COLOR-5 Emerging color functions MEDIA-QUERIES-5 User appearance preferences CSS-COLOR-ADJUST Forced colors and color schemes FLUENT-TOKENS Semantic token architecture FLUENT-COLOR Neutral, brand, and status roles FLUENT-ICONS Icon-system precedent ATLASSIAN-COLOR Semantic and accent roles USWDS-COLOR Contrast-oriented token grades APPLE-COLOR Adaptive semantic color APPLE-ACCESSIBILITY Redundant encoding APPLE-BUTTONS Platform control guidance DARK-PATTERNS-2019 Manipulative interaction patterns
Governing citation rule
WCAG requires… The experiment found… The review concludes… The framework proposes… The practitioner guidance recommends… The design system demonstrates… The working draft explores…
This language prevents a common failure in design documentation: presenting a respected opinion as experimental proof, or presenting a preliminary draft as an enforceable standard.
Back to top