The Problem
Every framework fails accessibility
Bootstrap buttons are 32px. Tailwind counts transitions as animations. shadcn dialogs don't trap focus. We fix all of it.
Touch targets too small
Bootstrap's .btn-sm is 32px. WCAG requires 44px minimum.
✓ cbrowser-ui enforces 44px on everything
Animations ignore preferences
Tailwind's animate-* classes run regardless of prefers-reduced-motion.
✓ cbrowser-ui pauses all motion by default
Contrast that fails AAA
Bootstrap's .text-muted is 4.6:1. Tailwind's gray-400 on white? 3.0:1.
✓ cbrowser-ui guarantees 7:1 on all text
Focus rings get hidden
Tailwind's focus:outline-none is on 90% of components.
✓ cbrowser-ui makes focus always visible
Get Started
Three ways to use it
Recommended
Patch your framework
One line after your framework CSS. Nothing else changes.
<link rel="stylesheet"
href="https://cdn.cbrowser.ai/fix-bootstrap.css">Use as your framework
Replace Bootstrap or Tailwind entirely.
<link rel="stylesheet"
href="https://cdn.cbrowser.ai/ui.css">npm install
npm install cbrowser-ui
Before — Bootstrap 5
.btn-smis 32px — fails touch target.carouselignores motion preferences.text-mutedis 4.6:1 — fails AAA- Focus rings removed by default
After — + fix-bootstrap.css
- All buttons enforced to 44px minimum
- Carousel respects prefers-reduced-motion
- Muted text boosted to 7:1 contrast
- Focus rings always visible on keyboard
Accessible design is beautiful design.
Start with the patch for your framework. Or go all-in. Every user can use your site.