Accessibility

What is accessibility in design and why does it matter?

Accessibility means designing so that everyone can use your work — including people with visual impairments, motor disabilities, cognitive differences, and situational limitations (bright sunlight, one-handed use, slow connections).

This is not charity. It is better design. Every accessibility constraint — sufficient contrast, readable text, clear hierarchy — makes the design better for all users, not just those with disabilities.

Nordic Minimal makes this a core principle: 'democratic design' means everyone deserves quality. Material Design builds it into the system algorithmically. Web Brutalism achieves it accidentally — system fonts, high contrast, and simple structure are inherently accessible.

What is WCAG and what contrast ratio do you need?

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. For text contrast, it defines two levels:

• AA (minimum): 4.5:1 contrast ratio for body text, 3:1 for large text (18px+ bold or 24px+ regular)

• AAA (enhanced): 7:1 for body text, 4.5:1 for large text

Material Design guarantees AA compliance through its HCT color space — a tone difference of 50 mathematically ensures 4.5:1. This is accessibility by computation, not by guesswork.

Art Deco achieves high contrast naturally (gold heading on black = ~8:1, body text ~16:1). Dark Luxury also passes (text on background = ~9:1). But Neomorphism struggles — same-colored surfaces with only shadow for separation sit at just ~6:1, barely above the minimum.

The lesson: high-contrast styles are inherently more accessible. Low-contrast aesthetics require extra care.

How does color blindness affect design decisions?

About 8% of men and 0.5% of women have some form of color vision deficiency. The most common is red-green (deuteranopia/protanopia) — these users cannot distinguish red from green.

This means: never use color alone to convey meaning. A red error message must also have an icon, a label, or a different position — not just a color change.

On this site, switch to Memphis (red headings, orange accent) and imagine you cannot see the difference between red and orange. The hierarchy still works — because size and weight create hierarchy independently of color. This is good design.

Now switch to a style where color is the only differentiator. If removing color removes meaning, the design fails for 8% of users.

What font sizes and line-heights support readability?

Minimum readable body text on screen: 16px (1rem). Anything smaller requires effort and excludes users with moderate visual impairment.

Line-height for body text: 1.5–1.8 provides enough space between lines for the eye to track reliably. Below 1.4, users with dyslexia or low vision lose their place.

Letter-spacing: avoid extremely tight tracking on body text. Swiss International's -0.01em on headings is fine (large text). But applying the same to 16px body text would reduce readability.

Compare styles: Art Nouveau uses 1.85 line-height (most accessible). Memphis uses 1.7 (comfortable). Bauhaus uses 1.7 (adequate). All our styles use 1rem+ body size — this is intentional.

Never prevent users from scaling text. The viewport meta tag must not include `maximum-scale=1` or `user-scalable=no` — this violates WCAG 1.4.4 (Resize Text). Users with low vision depend on browser zoom and font-size settings. Design with `rem` units (not `px`) so the layout respects these preferences.

How do motion and animation affect accessibility?

Some users experience vestibular disorders — motion on screen can trigger nausea, dizziness, or seizures. The `prefers-reduced-motion` media query lets designers respect user preferences.

On this site, compare animation approaches:

• Web Brutalism: 0ms transitions — zero motion, maximum accessibility

• Bauhaus: 150ms, linear — minimal, functional

• Art Nouveau: 450ms, eased — gentle but present

• Y2K Aero: bouncy overshoot — playful but potentially problematic

The rule: motion must be purposeful (communicates state change) not decorative (just looks nice). And every motion should have a reduced/no-motion alternative.

What makes a style inherently accessible or inaccessible?

Some styles are naturally more accessible than others. This is not a judgment of their value — but a practical consideration:

Most accessible: Web Brutalism (maximum contrast, system fonts, no motion, simple structure), Bauhaus (high contrast, clear hierarchy, minimal motion), Swiss International (readable type, clear structure)

Naturally accessible: Art Deco (high contrast, strong hierarchy), Nordic Minimal (readable, generous spacing), Material Design (algorithmic contrast guarantees)

Requires care: Dark Luxury (thin fonts can be hard to read), Glassmorphism (translucent surfaces reduce contrast), Cottagecore (low-contrast muted palette)

Challenging: Neomorphism (fundamentally low-contrast — same-colored surfaces). The style's signature trait is also its accessibility weakness.

Understanding this helps you choose: if your audience includes older users or users with visual impairments, choose a naturally accessible style. If you choose a challenging style, invest extra effort in accessible alternatives.

How do you test accessibility without special tools?

Three quick tests anyone can do:

1. Squint test — squint at your screen until the page blurs. Can you still see the hierarchy? If headings, sections, and navigation remain distinguishable, your contrast and size hierarchy work.

2. Grayscale test — set your display to grayscale (most OS settings support this). Does the design still work? If meaning disappears when color is removed, you have a color-dependency problem.

3. Zoom test — zoom to 200% in your browser. Does the layout break? Does text overflow or get cut off? A well-built responsive design should remain functional at 200% zoom (WCAG requirement).

Try these tests on different styles right now. Switch between Neomorphism (fails squint test) and Bauhaus (passes all three). The difference is immediately visible.