Text

WCAG 2.1 AA — release blocker

Web

• Renders <span> by default. For semantic heading levels, wrap in the appropriate element:

  <h2><Text size="2xl" weight="semibold">Section title</Text></h2>

• Respects user-agent text scaling because the type scale uses rem-relative values via Tailwind 4 tokens.
• Color contrast verified for every tone × theme combination at 4.5:1 minimum.

React Native

• Renders <RNText> directly. Inherits the platform accessibilityRole automatically.
• Consumers can override accessibilityRole (e.g. "header") when needed.

Tone is never the only signal

• tone="destructive" should always pair with an icon, label, or context that conveys the meaning without color.
• Same applies to success and warning.

Audit checklist

• Headings use semantic elements (web)
• 4.5:1 contrast in both light and dark themes
• User text-scaling respected (try Cmd/Ctrl + on web)
• Tone information has a non-color companion