fixing-accessibility
Fixing Accessibility — WCAG 2.1 AA Audit & Remediation
Before You Start
- Always read the target file(s) before auditing. Never audit from memory.
- Read
frontend/src/styles/responsive.cssto understand existing accessibility patterns. - Read
frontend/src/styles/global.cssfor the skip-nav and focus indicator patterns already in place.
12-Point Audit Checklist
Run each check against the target component. Report findings using the output format below.
1. Color Contrast (WCAG 1.4.3)
- Text on background must meet 4.5:1 ratio (normal text) or 3:1 (large text ≥18px bold / ≥24px)
- Check:
--color-text(#2d3748) on--color-bg(#ffffff) = 10.2:1 (passes) - Check:
--color-text-light(#718096) on--color-bg(#ffffff) = 4.6:1 (passes, barely) - Watch for:
.text-mutedon colored backgrounds, badge text on badge backgrounds, placeholder text
More from colaberryintern/colaberryenterprise_ai_leadershipaccelerator
baseline-ui
Output the project design system reference — colors, typography, spacing, component patterns. Invoke when discussing visual consistency, design tokens, or referencing the style guide.
16ui-ux-design
Comprehensive UI/UX design — user research, wireframes, mockups, prototyping, and design review. Invoke for new feature design, page redesign, UX audit, or user flow planning.
1frontend-design
Generate React + Bootstrap 5 frontend components and pages following the project design system. Invoke for any new page, component, layout, or visual modification.
1fixing-motion-performance
Optimize CSS animations, React rendering, and bundle performance. Invoke for animation jank, slow renders, large bundle size, or transition issues.
1