Accessible Design: Why Accessibility and Good Design Are Not at Odds

In practice, accessible design and good design are not mutually exclusive. Sites such as CSS Zen Garden, and the portfolios of specialized accessibility agencies, have shown for years that color, typography, and motion can be combined with the criteria of WCAG 2.2. Unattractive design is usually the result of time pressure or carelessness, not of the standards themselves.

WCAG 2.2 never prescribes a typeface, a color palette, or a visual style. Its criteria only set the minimum outcome a result has to reach, such as a contrast ratio or a target size, and deliberately leave open which design choice gets you there. That is exactly the room to maneuver many design teams underestimate.

The POUR Model: The Four Core Principles

WCAG 2.2 organizes every requirement under four principles, known as the POUR model. The first two are most directly relevant to design work.

• ✓ Perceivable, content must be accessible through more than one sense, through alt text, captions, and sufficient contrast
• ✓ Operable, every function must be reachable by keyboard, with a visible focus indicator and sufficiently large click targets
• ✓ Understandable, clear language, consistent navigation, and meaningful error messages
• ✓ Robust, clean, semantic code that works reliably with screen readers and other assistive technology

None of these four principles dictates a particular look. They define what has to work in the end, not what it has to look like. A design system that accounts for all four from the start rarely needs major rework later.

Common Mistakes in Practice

In practice, it is usually the same handful of details that turn an otherwise well-intentioned design inaccessible.

• ✓ Light gray text on a white background, often chosen for looks, almost always falls short of the required contrast
• ✓ Missing or invisible focus indicators, frequently removed by accident with CSS such as outline: none and no replacement
• ✓ Click targets that are too small or too close together, especially with icon buttons and filter lists on mobile
• ✓ Color-only error states in forms, without an accompanying text or icon
• ✓ Missing language declaration in the HTML, which causes screen readers to mispronounce content

Using Color and Contrast Correctly

Color is where design and accessibility clash most often, usually unnecessarily. WCAG 2.2 requires a contrast ratio of at least 4.5 to 1 against the background for normal text, and 3 to 1 for large text starting at 24 pixels. Interactive elements such as buttons and form fields, along with graphical objects needed to understand content, also need a minimum ratio of 3 to 1 against their surroundings.

Just as important as the contrast value itself is a second rule, color must never be the only distinguishing feature. A required field marked in red also needs accompanying text, an icon, or an outline, so people with color vision deficiencies get the same information. The same applies to charts that distinguish categories by color alone, and to status indicators that pit green against red with no additional icon. Both rules work with almost any brand color, and often a slightly darker or lighter shade is enough to move a color pair from a narrow miss to a comfortable pass.

• ✓ Normal text, at least 4.5 to 1 contrast against the background
• ✓ Large text at 24 pixels or bold at 19 pixels, at least 3 to 1
• ✓ Interactive elements and essential graphics, at least 3 to 1 against their surroundings
• ✓ Never rely on color alone, always add text, an icon, or a pattern as well

Focus, Keyboard Access, and Click Target Size

Not everyone operates a website with a mouse. People with motor impairments, but also many power users, navigate entirely by keyboard, moving from element to element with the Tab key. Anyone navigating that way needs a visible focus indicator that always shows which element is currently selected. If that indicator disappears behind a cookie banner or a sticky navigation bar, the user loses all sense of orientation. Just as important is a logical focus order that matches the visual reading direction, and the complete absence of keyboard traps that a user cannot escape.

Since WCAG 2.2, there is also a concrete requirement for click targets, success criterion 2.5.8 requires at least 24 by 24 CSS pixels for pointer inputs, with a few clearly defined exceptions such as links within a block of text. For design systems, that mostly means one thing, sufficient spacing between icons, buttons, and menu items, especially on mobile interfaces.

Typography and Spacing

Typography is another area where design and accessibility pair well. Content must stay readable and operable when zoomed up to 200 percent, without text being cut off or requiring horizontal scrolling. Users must also be able to increase line height to at least 1.5 times the font size, paragraph spacing to twice the font size, and letter and word spacing, without losing any content. For people with reading difficulties or low vision, that flexibility often decides whether a text is usable at all. Building with generous white space, a clear line height, and flexible, relative units instead of fixed pixel sizes from the start usually satisfies this requirement automatically, with no separate zoom concept needed.

The Legal Framework Behind Your Design

Accessible design is no longer just good practice. The European Accessibility Act has required B2C online shops serving EU consumers to meet WCAG 2.2 since June 28, 2025, aligned with exactly the criteria on contrast, focus, and target size described in this article. Building design and accessibility together from the start, rather than retrofitting them at the end of a project, saves both legal risk and expensive rework on a finished product.

How SiteCockpit Supports Accessible Design

easyMonitoring automatically checks contrast, focus indicators, target sizes, and other WCAG criteria across your entire design, showing exactly where action is needed instead of leaving your design team with an unsorted error list. The Contrast Checker tests individual color combinations in real time, right in the browser, while you are still designing, and immediately shows whether a planned color pair clears the 4.5 to 1 or 3 to 1 threshold. That makes it possible to make a website accessible without giving up an existing design, and without recalculating every color decision by hand.

Good design and accessibility ultimately pursue the same goal, making content clear, understandable, and usable. Teams that build these requirements in from the start, rather than treating them as a correction list at the end, end up with a better website because of the standards, not in spite of them, for people with disabilities and for everyone else alike.