Visual communication and accessibility

Business readers increasingly expect information to be visual: dashboards instead of tables of numbers, charts in reports, infographics in newsletters, icons and screenshots in instructions. Well-designed visuals help readers see patterns, compare values and follow processes far faster than text alone. Poorly designed visuals confuse or mislead, and visuals that ignore accessibility shut out readers with disabilities. This lesson covers document design, choosing and designing charts, avoiding misleading visuals, and making documents and digital content accessible under the Web Content Accessibility Guidelines (WCAG) and the accessibility laws of Canada and the United States.

Document design basics

Readers judge a document by its appearance before they read a word. A few principles make documents easier to scan and use. Use white space generously: margins, space between paragraphs and short line lengths (about 50 to 75 characters) make text less intimidating. Create a clear hierarchy with consistent heading levels, so readers can see the structure at a glance. Choose readable fonts, usually a sans serif such as Arial, Calibri or Verdana for screens, at 11 or 12 points for body text, and avoid setting long passages in capitals, italics or underlining. Align text left with a ragged right edge, which is easier to read than full justification. Use lists for steps and parallel items, and tables for comparisons. Above all, be consistent: the same kind of element should always look the same.

Choosing the right visual

Each kind of visual suits particular tasks. Choose by asking what the reader needs to see.

Every visual in a report should be numbered, titled and introduced in the text before it appears ("As Figure 3 shows, returns peak in January"). Give charts informative titles that state the takeaway ("Online sales overtook store sales in 2025") rather than labels ("Sales by channel"). Label axes and units, cite the data source below the visual and remove anything that does not help the reader: heavy gridlines, 3-D effects, decorative backgrounds and redundant legends. The designer Edward Tufte called these extras chartjunk and urged designers to maximize the share of ink devoted to data.

Misleading visuals

Visuals can mislead, whether deliberately or by accident. Common problems include a truncated value axis that exaggerates differences, uneven intervals on the time axis, 3-D effects that distort area, pictograms whose area grows with the square of the value, cherry-picked time periods, and dual axes scaled to suggest a relationship that does not exist. Tufte proposed the lie factor to measure distortion: the size of the effect shown in the graphic divided by the size of the effect in the data. A value near 1 is honest.

Accessibility: why it matters

About one in four Canadians aged 15 and over reported at least one disability in Statistics Canada's 2022 Canadian Survey on Disability, and in the United States the Centers for Disease Control and Prevention estimates that more than one in four adults has a disability. Disabilities that affect how people use documents include blindness and low vision (many people use screen readers or magnification), color vision deficiency (about 1 in 12 men and 1 in 200 women), deafness and hearing loss, motor disabilities that make a mouse hard to use, and cognitive and learning disabilities. Accessible communication also helps everyone else: captions help people in noisy places, clear structure helps skimmers, and good contrast helps anyone reading a phone in sunlight.

The Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG), published by the World Wide Web Consortium (W3C), are the international benchmark for accessible digital content. WCAG is organized around four principles, summarized by the acronym POUR: content must be perceivable, operable, understandable and robust. Each guideline has testable success criteria at three levels: A (minimum), AA (the level most laws and policies require) and AAA (enhanced). WCAG 2.2, published in October 2023, added nine success criteria to WCAG 2.1, including focus not obscured (keyboard focus must not be hidden behind sticky headers), target size minimum (clickable targets at least 24 by 24 CSS pixels, with exceptions), accessible authentication (no puzzles or memory tests to log in without an alternative) and redundant entry (do not make users re-enter information they have already given). It also removed the old criterion on parsing, which modern browsers made unnecessary.

Accessible documents in practice

You do not need to be a web developer to make documents accessible. Most of the work happens as you write in a word processor, presentation tool or email program.

• Use built-in heading styles (Heading 1, Heading 2) rather than bold text, so screen reader users can navigate by heading.
• Write alternative text (alt text) for meaningful images that conveys the information or purpose of the image; mark decorative images as decorative.
• Use meaningful link text ("Download the 2026 benefits guide") rather than "click here".
• Ensure sufficient contrast and never use color alone to convey meaning; add labels, patterns or symbols.
• Use real tables with header rows for data, and avoid merged cells and tables used only for layout.
• Caption videos and provide transcripts for audio.
• Use the accessibility checker built into Microsoft Office, Google Workspace or Adobe Acrobat before sharing, and tag PDFs.
• Write in plain language (lesson 2): it is itself an accessibility practice, especially for people with cognitive disabilities.

Measuring color contrast

WCAG defines contrast using the relative luminance of the two colors, a measure of brightness from 0 (black) to 1 (white). Normal text needs a contrast ratio of at least 4.5:1 at level AA, and large text (at least 18 point, or 14 point bold) at least 3:1. Interface components and meaningful graphics, such as chart lines, also need at least 3:1 against adjacent colors.

def channel(v):
    c = v / 255
    return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4

def luminance(hex_colour):
    r, g, b = (int(hex_colour[i:i + 2], 16) for i in (1, 3, 5))
    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b)

def contrast(a, b):
    hi, lo = sorted([luminance(a), luminance(b)], reverse=True)
    return (hi + 0.05) / (lo + 0.05)

for fg in ["#999999", "#767676", "#2F4F8F", "#C58B1B"]:
    ratio = contrast(fg, "#FFFFFF")
    verdict = "passes AA" if ratio >= 4.5 else ("large text only" if ratio >= 3 else "fails")
    print(f"{fg} on white: {ratio:.2f}:1 {verdict}")

#999999 on white: 2.85:1 fails
#767676 on white: 4.54:1 passes AA
#2F4F8F on white: 7.97:1 passes AA
#C58B1B on white: 2.96:1 fails

Accessibility law: Canada and the United States

In the United States, the Americans with Disabilities Act (ADA, 1990) prohibits disability discrimination. Title III covers businesses open to the public, and courts and the Department of Justice have treated websites as within its scope, although no technical standard is written into the regulation; WCAG 2.1 AA is the usual benchmark in settlements and lawsuits. In April 2024, the Department of Justice adopted a rule under Title II requiring state and local governments to make web content and mobile apps conform to WCAG 2.1 Level AA; in 2026 the compliance dates were extended by one year, to April 26, 2027, for entities serving 50,000 people or more and to April 26, 2028, for smaller entities and special districts. Section 508 of the Rehabilitation Act requires federal agencies to make their information and communication technology accessible, using standards that incorporate WCAG 2.0 AA. Several states have their own accessibility laws.

Whatever the jurisdiction, aiming for WCAG 2.2 Level AA is a sound practical target: it meets or exceeds the older versions that laws cite, and it reflects current best practice.

Portfolio task for lesson 8: take a report or slide deck you have produced and run the built-in accessibility checker. Fix every issue, add alt text to each image, check the contrast of your colors and redesign one chart using a takeaway title and direct labels. Record the before-and-after issue count.