Accessibility
Common mistakes that violate Fluxr identity. Any component that violates these rules must be fixed before deploy.
Ratios computed at build time. If a documented pair drops below AA, the build fails.
| Pair | Role | Minimum | Use | |
|---|---|---|---|---|
| Aa | texto | 18.92:1 | 4.5:1 | Body text on the site background |
| Aa | texto | 7.72:1 | 4.5:1 | Subtitles and descriptions |
| Aa | texto | 15.33:1 | 4.5:1 | Lime as emphasis text in dark theme |
| Aa | texto | 14.26:1 | 4.5:1 | Text inside the lime button |
| Aa | texto | 8.35:1 | 4.5:1 | Text on the light-theme lime fill |
| Aa | texto | 4.58:1 | 4.5:1 | Lime as TEXT on white |
| Aa | ui | 3.06:1 | 3:1 | Border, icon and focus ring on white |
Lime ring required on every actionable element. An invisible focus ring is a failure, not a style.
Visual
Get Started
outline: none
View Demo
Under prefers-reduced-motion the interface delivers the FINAL state, not a slower version.
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}Minimum 44×44px on any tappable control. On mobile a finger does not hit 32px.
32px44px56px
One h1 per page, no heading level skips, real landmarks, alt on every content image.
cursor:default on clickable
Every interactive element must have cursor:pointer. No exceptions.
Invisible focus states
Required for a11y. Use box-shadow with rgba(var(--brand-primary-rgb),0.3).
Insufficient contrast
Minimum 4.5:1 WCAG AA. Test with contrast tools.
Mobile horizontal scroll
Every screen must be tested at 375px. overflow-x:hidden on body.
Content under fixed nav
Verify sufficient padding-top when navbar is sticky/fixed.
Visual
☐ No emojis as icons (use SVG)
☐ Icons from one consistent set (Lucide/Heroicons)
☐ cursor-pointer on every clickable element
☐ Hover states with 150–300ms transitions
☐ Minimum 4.5:1 contrast
☐ Lime #C3F400 as primary; no purple accent
☐ Light theme: fill lime is #8DBE22, never #C3F400
☐ Correct background (#0a0a0a / #0B0F19)
Technical / A11y
☐ Visible focus states (keyboard)
☐ prefers-reduced-motion respected
☐ Responsive: 375px, 768px, 1024px, 1440px
☐ No horizontal scroll on mobile
☐ No content under the fixed navbar
☐ Console.log removed (production)
☐ Routes in English, content via i18n