Stat

Purpose

A figure and what it means. Figures are in tabular numerals so that a row of them aligns and compares at a glance; a secondary value carries the denominator of a fraction (“62/87”) without weighing as much as the numerator.

When to use, when not

Use it for a number the page wants read on its own: a total, a coverage, a rate. Do not use it inside a table, where the column already aligns the figures.

Anatomy

1. The value, large, tabular numerals.
2. The secondary value, in the soft ink, right after it.
3. The label, small capitals.
4. Optionally a sentence under it.

Props

Props of Stat

Name	Type	Default	What it does
value	string		The figure, already formatted ("106", "94,9 %").
secondaryValue?	string | undefined		A denominator or a unit after the figure, in the soft ink ("/87").
label	string		What the figure counts, in small capitals under it.
tone?	'default' | 'success' | 'error' | 'soft'	'default'	The value's ink. The label always says what the figure is; the tone only confirms it (criterion 3.1).
children?	Snippet		A sentence under the label: the source, the date.

States

With or without a secondary value, with or without a sentence.

fraction

The denominator in the soft ink: it must not weigh as much as the numerator.

Light

62/87 Règles ACT du W3C

Dark

62/87 Règles ACT du W3C

320 px, light

62/87 Règles ACT du W3C

320 px, dark

62/87 Règles ACT du W3C

216 px, light

62/87 Règles ACT du W3C

Forced colours, captured

plain

Light

106 Critères, tous

Dark

106 Critères, tous

320 px, light

106 Critères, tous

320 px, dark

106 Critères, tous

216 px, light

106 Critères, tous

Forced colours, captured

toned

Light

12 Non conformes

Dark

12 Non conformes

320 px, light

12 Non conformes

320 px, dark

12 Non conformes

216 px, light

12 Non conformes

Forced colours, captured

withSentence

Light

94,9 % Exactitude stricte

Sur 916 cas du corpus W3C, banc du 18 août 2026.

Dark

94,9 % Exactitude stricte

Sur 916 cas du corpus W3C, banc du 18 août 2026.

320 px, light

94,9 % Exactitude stricte

Sur 916 cas du corpus W3C, banc du 18 août 2026.

320 px, dark

94,9 % Exactitude stricte

Sur 916 cas du corpus W3C, banc du 18 août 2026.

216 px, light

94,9 % Exactitude stricte

Sur 916 cas du corpus W3C, banc du 18 août 2026.

Forced colours, captured

Accessibility contract

• Role and name: text. The value is a b (strong importance), the label a span; a screen reader reads value then label.
• Keyboard, focus, live regions: none.

Content rules

The label says what the figure counts (“Critères, tous”), in French, without a colon. A sentence under it gives the source or the date.

Do and don’t

• Do give the denominator as the secondary value rather than in the label.
• Do not colour a value to say it is good or bad: that is the conformity rate’s job, with its symbol.

Examples

<Stat value="106" label="Critères, tous" />
<Stat value="62" secondaryValue="/87" label="Règles ACT du W3C">Mesuré au banc du 18 août 2026.</Stat>

Surfaces

• Site: the home page, the method page, the application page.
• App: through StatGroup, on the audited page, the comparison and the report; the app’s StatCard is gone.

Related

ConformityRate.

Decisions

• 2026-08: tabular numerals on the value, so figures in a row line up.
• 2026-09-24: English props (value, secondaryValue, label); the sizes, weights and trackings come from the tokens in a scoped style.
• 2026-09-24: a tone for the figures that count audit statuses, taken from the app’s StatCard, which StatGroup retires; the label always says what the figure is.

Criteria held by construction

• 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  The figure and its label are text; nothing about the value is said by colour.

Tokens it reads

• Colour: --rl-c, --rl-ink, --rl-ink-soft, --rl-nc
• Typography: --rl-weight-bold, --rl-text-3xl, --rl-text-sm, --rl-text-xs, --rl-tracking-stat, --rl-tracking-tight
• Spacing: --rl-space-1, --rl-space-2