Skip to content
Est. 2011

Accessibility

Our Accessibility Mission

At Materiell, we believe in building inclusive digital experiences that work for everyone, regardless of ability or circumstance. Our accessibility mission is not just about compliance. It's about people and creating equal opportunities in the digital space.

Our Approach

Building Inclusive Experiences

This page is an interactive demonstration of how we build digital experiences that work for everyone. The features you're experiencing — from thoughtful color contrasts to responsive design — are the same accessibility standards we implement for our clients. Play with the controls below to see WCAG principles in action.

Standards

WCAG 2.1 Compliance

Web Content Accessibility Guidelines (WCAG) 2.1 define how to make web content more accessible to people with disabilities. Our site maintains compliance with these international standards to ensure an inclusive experience for all users.

A

Level A

Essential accessibility requirements

Fully Compliant
AA

Level AA

Addresses the main barriers for users with disabilities

Fully Compliant
AAA

Level AAA

Highest level of accessibility support

Partially Compliant

Visual Design

Color Contrast

Each pairing shows its contrast ratio set in the real foreground color, on the real background. If the number is comfortable to read, so is the text. WCAG asks for 4.5:1 on normal text (AA) and 7:1 for AAA.

  • foreground
    on background    15.2:1
    WCAG 2.1AAA
  • accent
    on brand-navy    8.8:1
    WCAG 2.1AAA
  • brand-navy
    on accent    8.8:1
    WCAG 2.1AAA
  • foreground
    on muted    11.7:1
    WCAG 2.1AAA
  • muted-foreground
    on background    5.5:1
    WCAG 2.1AA
  • accent
    on background    8.8:1
    WCAG 2.1AAA

Motion

Reduced Motion

Motion and animation can enhance user experience, but they can also cause discomfort, dizziness, or even nausea for some users, particularly those with vestibular disorders or motion sensitivity.

We respect user preferences for reduced motion by providing controls to limit animations and by honoring system-level reduced motion settings. Try toggling the switch below to see how we adapt our interface.

Notice how elements stop bouncing and hover effects are disabled when reduced motion is enabled. In a real application, we would also respect the user's system-level preference for reduced motion.

Typography

Text Size & Browser Zoom

WCAG 2.1 Success Criterion 1.4.4 (Level AA) requires that text can be resized up to 200% without loss of content or functionality. Users with visual impairments often rely on text enlargement through browser zoom or text-specific resizing.

There are two main approaches to enlarging text for better readability:

  • Browser Zoom — Enlarges everything on the page, including text, images, and controls
  • Text-only Resize — Increases just the text size while other elements remain the same size

Try using your browser's zoom controls to see how our site responds. All content should remain readable and accessible as you zoom in, with layouts that reflow properly.

Browser Zoom Controls

Keyboard Shortcuts

  • Ctrl++Zoom in
  • Ctrl+-Zoom out
  • Ctrl+0Reset zoom
  • On Mac, use ⌘ instead of Ctrl

Browser Text Size Settings

  • Chrome: Settings → Appearance → Font size
  • Firefox: Settings → General → Language and Appearance → Fonts and Colors
  • Safari: Preferences → Advanced → Accessibility → Never use font sizes smaller than
  • Edge: Settings → Appearance → Fonts

Try zooming in and out using the controls above and notice how our page content adjusts to maintain readability and usability at different zoom levels.