Accessibility
A few guidelines for designers and engineers using Anta.
Colors
The matrix reads the active theme’s text-* and bg-* tokens and updates when you switch themes. Each cell shows the WCAG 2 contrast ratio, AA or AAA result for the selected size and weight, and APCA Lc value. Transparent text is composited over each background before measurement. Size and weight change pass thresholds, not the color-pair ratios. Vision tabs apply SVG-filter and CSS-mask simulations; the numbers use normal-vision math.
System colors
This table uses the browser’s system colors directly. It changes with the active forced-colors palette, so it shows the values a component can use in that mode.
| System colors | Use | Live sample |
|---|---|---|
CanvasCanvasText | Document background and text | Document text |
ButtonFaceButtonTextButtonBorder | Control surface, text, and edge | Control label |
FieldFieldText | Input field background and text | Field value |
HighlightHighlightText | Selected text | Selected text |
SelectedItemSelectedItemText | Selected control or list item | Selected item |
MarkMarkText | Marked text, such as <mark> | Marked text |
AccentColorAccentColorText | Accented control | Accent control |
LinkText | Unvisited link text | Unvisited link |
VisitedText | Visited link text | Visited link |
ActiveText | Active link text | Active link |
GrayText | Disabled text | Disabled text |
Color is not a unique communication channel
A color-only message fails when a reader cannot distinguish its color. This includes color blindness, low contrast, low brightness, monochrome printing, glare, and theme changes.
tone on Progress, Text, backgrounds, and borders is a secondary signal. Pair it with text and, where useful, a distinct icon shape such as a checkmark or cross.
The simulator above makes it easy to check a candidate combination across the most common color-vision deficiencies and a handful of other vision conditions.
Low-priority text and contrast
Neutral text-4 meets 4.5
bg-1 in both light and dark modes for Antune and None. This does not extend to every background: Antune’s neutral text-4 is 4.41 on light bg-2 and 4.25 on dark bg-2.
Named text-4 tones use text-2 at 66% opacity in light mode and 62% in dark mode for both themes. They remain fainter than text-3 and are not tuned to meet 4.5
text-5 step is also intentionally muted. Check the matrix for each tone and background before choosing a pair for readable content.
text-1 and text-2 are the primary-content priorities; reach for them whenever the content matters.
Truncated text and screen readers
When Text is truncated without expandable, the hidden portion is also hidden from the accessibility tree — the visible ellipsis is what AT reads, exactly like sighted users see. This is intentional: the content the user can see is what gets read. If the truncated content matters, set expandable too — the chevron is keyboard-discoverable, focus-visible, and Enter/click reveals the rest.
ARIA lives in JSX wrappers, not in web components
Anta’s web components (<a-progress>, <a-text>, <a-icon>, …) are pure declarative DOM. They never set ARIA attributes from JS — no setAttribute from constructors or attributeChangedCallback. ARIA wiring (role, aria-label, aria-valuenow, etc.) is layered on by the JSX wrappers (Progress, Icon, Text) as ordinary attribute pass-through. If you write the elements by hand instead of via the wrappers, you’re responsible for the ARIA bits — the elements stay DOM-clean either way.
This means consumers in other reactive engines (Worker-driven UIs, plain HTML, hand-rolled JSX) get web components that don’t fight their state model, while React/Preact users get accessible defaults out of the box from the wrappers.