How to build an accessible ContextMeter in React
role="meter" with aria-valuenow/min/max and an aria-valuetext in full words ("12,400 of 200,000 tokens used (6%)"), named by its label. The compact visible line is aria-hidden so it is not read twice. Colour steps to warning at 80% and destructive at 95%, but the figures always carry the meaning
When to use a ContextMeter
- Showing how much of the model’s context window a conversation or document has used
- Warning before a conversation hits the limit and older turns are dropped
When not to use it
- Task progress toward completion — use ProgressBar
- Account-level usage and billing quotas with many figures — use Stat or a chart
Accessibility
Role meter, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Colour alone to signal the window is nearly full
Prefer: Keep the "used / max" figures visible; colour reinforces them
Colour is not perceivable by everyone; the numbers carry the meaning
Example
<ContextMeter value={12400} max={200000} />