Skip to content
design system
Thème d’affichage, actuellement Auto

atom · stable · since 2026-09

LevelBadge

Purpose

The level of a criterion, A, AA or AAA, as three letters in a mono frame, read as “niveau AA”. The word is hidden before the code so a list of criteria read aloud says what the badge means.

When to use, when not

Use it next to a criterion wherever the level matters: the audit page, the report, the criteria list. Not for anything that is not a level of the referential.

Anatomy

  1. A span in the mono face with the strong line.
  2. The hidden word “Niveau”.
  3. The level.

Props

Props of LevelBadge
NameTypeDefaultWhat it does
level'A' | 'AA' | 'AAA'The level, as the referential writes it.
class?string''Layout classes only.

States

A, AA, AAA, and in a criterion row.

a

Light
Niveau A
Dark
Niveau A
320 px, light
Niveau A
320 px, dark
Niveau A
216 px, light
Niveau A
Forced colours, captured
LevelBadge, story a, as Chromium renders it with forced colours active

aa

Light
Niveau AA
Dark
Niveau AA
320 px, light
Niveau AA
320 px, dark
Niveau AA
216 px, light
Niveau AA
Forced colours, captured
LevelBadge, story aa, as Chromium renders it with forced colours active

aaa

Light
Niveau AAA
Dark
Niveau AAA
320 px, light
Niveau AAA
320 px, dark
Niveau AAA
216 px, light
Niveau AAA
Forced colours, captured
LevelBadge, story aaa, as Chromium renders it with forced colours active

inRow

Next to a criterion, as the audit page lists them; read "1.1 niveau A".

Light

1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ? Niveau A

Dark

1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ? Niveau A

320 px, light

1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ? Niveau A

320 px, dark

1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ? Niveau A

216 px, light

1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ? Niveau A

Forced colours, captured
LevelBadge, story inRow, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: none; text in the flow, read “Niveau AA”.
  • Keyboard, focus: none.
  • Live regions: none.

Content rules

The level as the referential writes it, nothing else.

Do and don’t

  • Do not colour the levels: they are tiers of the standard, not degrees of gravity.

Examples

<LevelBadge level={criterion.level} />

Surfaces

  • App: the audit page and the report; not ported yet.
  • Extension: the criterion rows, when the panel is on Svelte.

Related

Chip, StatusChip.

Decisions

  • 2026-09-24: the hidden word is “Niveau”, as the referential names it; a badge reading “A A” aloud was the fault on the audit page.

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 level is a code, not a colour: the three tiers share one drawing and the word says which.

Tokens it reads

  • Colour: --rl-ink, --rl-line-strong
  • Typography: --rl-font-mono, --rl-weight-bold, --rl-text-xs, --rl-tracking-label
  • Spacing: --rl-space-1-5
  • Layout: --rl-radius, --rl-border