Text

WCAG 2.1 AA — release blocker

Web

• Renders <span> by default for inline text. For semantic heading levels, use the as prop:

  Copy

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

• Use as="p" for paragraphs. Do not style a span to look like a document heading.
• 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.
• as="h1"..as="h6" maps to accessibilityRole="header" unless consumers override it.

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