Accessibility

What every Camaleo component guarantees in every skin, how it is tested, and the measured contrast of each skin's colors.

The target is WCAG 2.2 AA in every skin, in light and dark, with any brand color. A skin can change shape, depth, type and motion; it can't take away a name, a key or a focus ring.

What every component guaranteesCopy Anchor Link

• Keyboard. Each component follows a WAI-ARIA Authoring Practices pattern and gets its keyboard model from the primitive under it (Base UI, or React Aria for dates). Arrows move inside a widget, Tab moves between widgets, Escape closes popups and returns focus to the trigger.
• Focus. Focus is drawn with outline, never only box-shadow, so it survives forced colors. Its color, --cml-focus-ring, is tested at 3:1 or more against the surface in every skin.
• Names. Built-in buttons and regions have names (close, clear, show password, page 3…) that you can translate with MessagesProvider. Icon-only controls you build still need an aria-label.
• Targets. Checkboxes, radios, links in breadcrumbs and other small controls keep a pointer target of at least 24 × 24 px, even in dense skins.
• Reduced motion. It reduces, it doesn't remove: under prefers-reduced-motion, distances and scales go to zero, short fades stay, panels open at once, the skeleton shimmer stops and an indeterminate progress bar pulses in place.
• Forced colors. Components keep a transparent border that becomes visible in Windows high contrast, and selected states switch to system colors (Highlight, CanvasText).
• Reduced transparency. glass and cupertino swap their translucent surfaces for opaque ones under prefers-reduced-transparency: reduce, and in browsers without backdrop-filter.
• Right to left. Components flip with DirectionProvider; see Languages & RTL.

How it is testedCopy Anchor Link

The tests live in packages/react/test and run in a real browser (Vitest browser mode with Playwright).

• The matrix (matrix.test.tsx) renders a showcase of every component in 13 skins × light and dark × 5 hard brand colors (#2563eb, #facc15, #22d3ee, #ff7f50 and #808080): 130 scopes. In each one it runs axe with the WCAG 2.0, 2.1 and 2.2 A/AA rules, checks that the focus ring and control borders reach 3:1, that the danger, success, warning and info tones reach 4.5:1, and then opens 17 popups (dialog, menu, select, date picker, toast…) one by one to check that each keeps the skin through its portal and passes axe too. That is 2,340 runs.
• Text over images. axe can't measure text over gradients and glass, and reports it as "incomplete". The matrix measures those nodes on real pixels instead (pixel-contrast.ts): two screenshots, with and without the text, and the worst glyph pixel against the background behind it.
• Keyboard (keyboard.test.tsx): 30 tests that drive the components with real key presses, from Space on a checkbox to PageUp in a calendar.
• The docs. Every page of this site, with its live examples, is checked with axe in 4 skins, light and dark, at desktop, tablet and phone widths, in both languages.

Contrast reportCopy Anchor Link

The table below is measured, not typed: apps/docs/scripts/contrast-report.mjs loads tokens.css and each skin's CSS in a browser, resolves the tokens with each of the five matrix brand colors, and keeps the lowest ratio of the five. Numbers are rounded down, so 4.499 shows as 4.49.

What it measures, all against the skin's page color --cml-surface unless noted:

• Text, 4.5:1 or more: --cml-fg (body text), --cml-fg-secondary, --cml-fg-muted, --cml-accent-text (brand-colored text and links), --cml-accent-fg on --cml-accent (text on a solid brand button), and the --cml-danger, --cml-success and --cml-warning tones.
• Non-text, 3:1 or more: --cml-border-control (the edge of fields and choices) and --cml-focus-ring.

It doesn't measure text on raised surfaces, hover states or glass panels over the backdrop; the matrix covers those on rendered components.

Every pair meets its target in every skin and mode. Run node scripts/contrast-report.mjs in apps/docs after changing a skin to refresh the numbers.

Authentic or accessibleCopy Anchor Link

Some styles fail contrast by nature: neumorphism has no edges, glass puts text on whatever is behind it, a classic desktop OS draws a 1 px dotted focus box. The project decided (decision 9 in the plan) that every skin is accessible by default, and that an authentic variant would be opt-in and labelled "doesn't guarantee AA". No authentic variant ships yet.