Accessibility

The floor

• Contrast. 4.5:1 for text, 3:1 for large text and interface parts. Checked in Light and Dark on the color page.
• Focus. A visible 4px ring on every interactive element, including on blue and in dark mode.
• Targets. Buttons and nav links are 48px tall, form fields are 56px, and text links are at least 32px tall. WCAG 2.2 AA asks for 24px at minimum, and 44px is the AAA level.
• Labels. Every field has a real <label>. Icon-only buttons have an aria-label.
• Color is never the only signal. Errors add a message and a thicker rule. Current page adds a bar. Links are underlined.
• Keyboard. A skip link is the first focusable element on every page. Tab order follows reading order.
• Motion. Respects prefers-reduced-motion.
• Images. Informative images carry alt text. Decorative icons are hidden from screen readers.

Why this matters for regulated work

In healthcare and pharma, required content such as safety information and boxed warnings has to be readable by everyone, and it has to survive review. A system that builds contrast, focus and labeling into the base components means each new page starts compliant instead of being fixed at the end.

How I check

Contrast is calculated from the token file on every build. Keyboard and screen-reader behavior is checked by hand on each component before it is documented. Automated accessibility tests are not part of the build yet; that is on the list.