Accessible Design: Contrast, Type & WCAG 2.2

Accessible design starts with a practical question: can people read the information, understand it and use the controls? Color, type, images and layout all belong in that question. A useful brief connects visual choices with clear checks, so the finished page can be assessed as well as admired.

Why Accessibility Belongs in the Brief

The WebAIM Million report evaluated one million home pages in February 2026. It found detected WCAG failures on 95.9% of them, with an average of 56.1 detected errors per page. Low-contrast text appeared on 83.9% of the home pages examined.

These are findings from automated checks, which cannot detect every accessibility failure. The figures give context for including accessibility in a brief; they do not predict the condition of an individual page. Instead of a broad request to make a design accessible, identify the text, images, controls and layouts that need attention, and the checks that will be used to review them.

The Four Principles of WCAG 2.2

WCAG stands for Web Content Accessibility Guidelines. The GOV.UK guide to WCAG 2.2 describes an internationally recognised set of recommendations built on four principles: perceivable, operable, understandable and robust. These principles are supported by 13 guidelines, divided into specific requirements called success criteria.

Translate that framework into questions for a review. What information needs a text alternative? What must work from a keyboard? Which labels need a clearer meaning? Where does the page's markup need attention? The answers connect the brief to content, interaction and implementation, rather than leaving accessibility as an abstract intention.

Colour and Contrast

The WebAIM WCAG checklist gives a minimum contrast ratio of 4.5:1 for text and images of text. Large text needs at least 3:1. Here, large means at least 18 point, or at least 14 point when bold. Contrast is a relationship between foreground and background, so review the actual pair rather than either color alone.

The checklist also calls for at least 3:1 contrast for graphical objects such as icons and for customized interface components. That contrast needs attention in states such as hover, focus and active use. Color cannot be the only way to convey meaning or distinguish elements. Pair a color cue with a label, shape or other clear distinction, and document which combinations are intended for text and controls.

Type specifications need more than a font name. Write down the size, weight and foreground-background pair used for body text, headings and labels. Where a heading relies on the large-text threshold, keep that size and weight visible in the specification. A palette swatch cannot answer whether every text style has adequate contrast.

Images, Alt Text and Tap Targets

In the same WebAIM study, 16.2% of home page images lacked alternative text, excluding images with an empty alternative. The checklist calls for appropriate, equivalent text for meaningful images and descriptive alternatives for linked images. Decorative images, or images whose content is already conveyed in text, can use an empty alternative: alt="".

Review what each image contributes before writing its alternative. For controls used with a pointer, WCAG 2.2 Level AA criterion 2.5.8 sets a minimum target size of 24 by 24 pixels, with a spacing exception described in the checklist. Review target size and the gaps between nearby controls together; a visual icon and its selectable area are separate parts of that review.

A short image review can separate meaningful content from decoration before alternatives are written. Consider what a reader needs from the image in that location, and whether surrounding text already supplies it. For a linked image, check that the alternative describes the link's purpose rather than only its appearance.

Layouts That Reflow

Reflow means checking how the layout adapts when the available width changes. The checklist specifies no loss of content or functionality and no horizontal scrolling at a width of 320 pixels. Treat this as a content check as well as a layout check: headings, text and controls all need to remain available.

Read through the page at a narrow width and with enlarged text. Check whether the reading sequence still makes sense, whether labels remain near their controls and whether any content has disappeared. Record the point where a layout becomes difficult to use, rather than relying only on a wide-screen preview.

The Legal Picture in the US and EU

The Department of Justice's ADA Title II web rule applies to state and local governments. Their web content generally needs to meet WCAG 2.1 Level AA, including content provided through an arrangement with another party. The compliance date is April 26, 2027 for entities with populations of 50,000 or more, and April 26, 2028 for smaller entities and special district governments. This rule names WCAG 2.1, rather than WCAG 2.2.

AccessibleEU's overview gives 28 June 2025 as the date the European Accessibility Act took effect. The European Commission's account of its scope lists covered products and services including e-commerce, banking services and e-books. These legal scopes are distinct from a general design checklist. Identify the entity, service and relevant rule before setting a compliance requirement in the brief.

Testing: Tools Plus People

GOV.UK recommends combining automated tools with manual tests. WebAIM cautions that the absence of detected errors does not establish accessibility or conformance. A clean scan is therefore one piece of evidence, rather than a complete assessment.

Use manual review to examine keyboard use, enlarged text, image alternatives and meaningful labels alongside measured contrast and target sizes. Keep notes on the tasks checked and the barriers found. After a correction, repeat the affected tasks and review nearby controls or content. A useful record says what was examined and what still needs attention, instead of reducing the whole page to a single pass or fail label.