Skip to main content

Accessibility

Every Fancy Bricks template is built and checked against WCAG 2.2 AA, not added on afterwards.

What's checked on every template​

  • Contrast: 4.5:1 for text, 3:1 for interface components and focus indicators.
  • Visible focus on everything interactive — no outline: none without a real replacement.
  • Nothing communicated by color alone.
  • Accessible names on every link, button, field and region.
  • Screen reader pass of each interaction pattern (accordions, tabs, sliders, menus).
  • Keyboard support for every interactive piece — nothing reachable only with a mouse.

Templates are also checked with axe against every section background and across Fancy Framework, ACSS 4 and Core, with zero accessibility violations required to ship.

About contrast on ACSS and Core​

Contrast is guaranteed when the template is built with Fancy Framework's own default palette. On ACSS 4 and Core Framework, the colors come from your site's own palette — Fancy Bricks doesn't impose or override your colors, so contrast there depends on the choices you make when you set your accent and text colors in your framework. Pick a palette that passes WCAG contrast there the same way you would for any other content on your site.

Common problems​

  • A link or button looks fine but axe/a screen reader flags it. Usually a contrast issue from a custom color override in ACSS/Core — see above — rather than something wrong with the template itself.
  • Reduced motion is on and an animation still plays. Shouldn't happen; if you see it, it's worth reporting — every hover/reveal effect in the library is meant to respect prefers-reduced-motion.