Design and content

Make information easy to see and read

Readable design is more than choosing a legible font. Text needs enough contrast against its background, and people need to be able to resize or reflow it without losing content or functionality. Keep paragraphs focused, use clear labels, and avoid placing essential instructions only in a low contrast placeholder or image.

• For most text, use a contrast ratio of at least 4.5:1. Large text can meet a 3:1 minimum.
• Meaningful visual information in controls and graphics generally needs at least 3:1 contrast against adjacent colors.
• Do not use color alone to communicate a status or instruction. Pair color with text, shape, an icon, or another visible cue.
• Check pages with text enlarged and at narrow viewport widths. Content should remain available without clipped text or unnecessary horizontal scrolling.

Contrast tools can help compare color values, but check the actual text, size, weight, and background in the finished design. A color combination that works in a mockup may change when opacity, an image, or a hover state is added.

Keep keyboard focus visible

People who navigate by keyboard need to see which control is ready to use. Preserve a clear focus indicator on links, buttons, fields, and custom controls. Removing the browser outline without providing a strong replacement can make the page impossible to navigate confidently.

• Tab through the page and check that focus follows a sensible order.
• Make the focus indicator easy to distinguish from nearby colors and content.
• Check that sticky headers, dialogs, and overlays do not cover the focused control.
• Confirm that keyboard users can move into and out of menus and dialogs without getting trapped.

Hover styles are not a substitute for focus styles. Give keyboard focus its own visible treatment and keep it consistent across the site.

Use structure to explain the page

Headings provide a map of the content for everyone, including people who navigate by heading lists. Organize them by topic: use one clear page title, then headings for the main sections and nested headings for their subsections. Choose heading levels for structure, not just for their visual size.

Use lists for grouped items, meaningful labels for form fields, and semantic tables only when information truly has row and column relationships. Consistent structure makes long pages easier to scan and gives assistive technology useful context.

Write link text that makes sense on its own

Links such as “click here” or “read more” leave people guessing, especially when encountered out of context. Describe the destination or action: “Review the WCAG audit process” tells someone more than “Learn more.” Keep the visible link text specific and make sure it matches the page it opens.

If a link opens a document or a new window, make that clear when it affects what the visitor should expect. Related links should be visually recognizable as links and should not rely on color alone.

Choose image alternatives by purpose

Alternative text should communicate an image’s purpose in its context, not mechanically describe every visual detail. Ask what information or action the image adds to the page:

• Informative image: write a concise alternative that conveys its relevant information.
• Decorative image: use an empty text alternative so assistive technology can skip it.
• Image used as a control: name the action or destination, such as “Search” or “Kaffeinated Kodemonkey home.”
• Chart or complex graphic: provide a short identification and make the important data or explanation available in nearby text or a table.

Avoid repeating nearby captions word for word or stuffing alt text with keywords. If the image adds no information and is not interactive, an empty alternative is often the most helpful choice.

Review the experience as it changes

Check representative pages at common viewport sizes and with keyboard navigation. Review menus, forms, error messages, and other interactive states alongside the static page. Design systems and reusable templates can prevent repeated issues, but each implementation still needs review in context.

For a broader evaluation, start with the Testing and Audits guide. To understand the requirements these design decisions support, continue to the WCAG Success Criteria guide or explore our accessible web design service.