ConformityRate

Purpose

The conformity rate, said one way. It is the central figure of the product and it used to show five ways a few clicks apart. The bands are those of symboleDuTaux in @rgaa-dev/core, 75 and 50; the middle band stays in the ink because the standard has no “warning” colour and saying otherwise would lie.

When to use, when not

Use it wherever a rate is published: a page, a site, a campaign. When the audit cannot publish a rate, give null and the official sentence; never a rounded or provisional figure.

Anatomy

1. The symbol of the band, aria-hidden.
2. The figure, tabular numerals, with its percent sign.
3. Optionally a suffix (“de conformité”).
4. Or, when there is no rate, the reason in the soft ink.

Props

Props of ConformityRate

Name	Type	Default	What it does
rate	number | null		The rate in percent, or `null` when the audit cannot publish one.
unavailableReason?	string | null	null	What prevents publishing, word for word from the official grid.
suffix?	string	''	What the figure qualifies, read after it: "de conformité".
decimals?	number	0	A site's average carries one decimal; a page's rate none.

States

The three bands, the unavailable state with and without a reason, the decimal form for a site average.

average

Light

◐ 71,4 % en moyenne

Dark

◐ 71,4 % en moyenne

320 px, light

◐ 71,4 % en moyenne

320 px, dark

◐ 71,4 % en moyenne

216 px, light

◐ 71,4 % en moyenne

Forced colours, captured

high

Light

● 82 % de conformité

Dark

● 82 % de conformité

320 px, light

● 82 % de conformité

320 px, dark

● 82 % de conformité

216 px, light

● 82 % de conformité

Forced colours, captured

low

Light

○ 34 %

Dark

○ 34 %

320 px, light

○ 34 %

320 px, dark

○ 34 %

216 px, light

○ 34 %

Forced colours, captured

middle

Between 50 and 75 the ink stays neutral: neither a success nor a failure.

Light

◐ 61 %

Dark

◐ 61 %

320 px, light

◐ 61 %

320 px, dark

◐ 61 %

216 px, light

◐ 61 %

Forced colours, captured

unavailable

No figure while the audit is unfinished; the official sentence instead.

Light

Audit inachevé : un critère reste non testé.

Dark

Audit inachevé : un critère reste non testé.

320 px, light

Audit inachevé : un critère reste non testé.

320 px, dark

Audit inachevé : un critère reste non testé.

216 px, light

Audit inachevé : un critère reste non testé.

Forced colours, captured

unavailableBare

Light

Taux indisponible.

Dark

Taux indisponible.

320 px, light

Taux indisponible.

320 px, dark

Taux indisponible.

216 px, light

Taux indisponible.

Forced colours, captured

Accessibility contract

• Role and name: text. The figure is a b.
• Keyboard, focus, live regions: none.
• The unavailable state is a sentence, never a dash.

Content rules

Percent with a non-breaking space before the sign, French decimal comma. The unavailable reason comes word for word from the official grid.

Do and don’t

• Do show the sentence when a criterion is still not tested.
• Do not compute a provisional rate and call it a conformity rate.

Examples

<ConformityRate rate={82} suffix="de conformité" />
<ConformityRate rate={null} unavailableReason="Audit inachevé : un critère reste non testé." />

Surfaces

• App: the dashboard, the site page, the audit page.

Related

StatusChip, Stat.

Decisions

• 2026-08: the thresholds live in core; this component only draws them.
• 2026-09-24: renamed from TauxDeConformite; the band is a modifier class, and the figure takes the decimal comma the doc always promised.

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 ?
  A symbol (● ◐ ○) says the band; the colour only confirms it.

Tokens it reads

• Colour: --rl-c, --rl-ink, --rl-ink-soft, --rl-nc
• Typography: --rl-weight-bold