Utilitaires

Couleurs

Les classes text-* colorent le texte avec les couleurs du thème, les tons d’emphase ou les niveaux du corps de page. Les classes d’opacité en atténuent le rendu. Vérifiez toujours le contraste avec le fond.

Couleurs du thème#

Sur fond blanc, text-warning et text-light ne sont pas lisibles : réservez-les aux fonds sombres. Ils sont donc absents de cet exemple.

Primaire : bleu, pour les actions et les liens.

Secondaire : vert, identique au succès.

Succès : opération réussie.

Danger : opération refusée.

Information : bleu foncé.

Sombre : gris très foncé.

<p class="text-primary mb-1">Primaire : bleu, pour les actions et les liens.</p>
<p class="text-secondary mb-1">Secondaire : vert, identique au succès.</p>
<p class="text-success mb-1">Succès : opération réussie.</p>
<p class="text-danger mb-1">Danger : opération refusée.</p>
<p class="text-info mb-1">Information : bleu foncé.</p>
<p class="text-dark mb-0">Sombre : gris très foncé.</p>

Sur fond sombre#

Blanc : solde disponible 1 250 000 FCFA.

Clair : dernière connexion hier.

Avertissement : carte bientôt expirée.

<div class="bg-dark p-3">
  <p class="text-white mb-1">Blanc : solde disponible 1 250 000 FCFA.</p>
  <p class="text-light mb-1">Clair : dernière connexion hier.</p>
  <p class="text-warning mb-0">Avertissement : carte bientôt expirée.</p>
</div>

Tons d'emphase#

Les tons -emphasis sont plus foncés que les couleurs de base. Ils sont conçus pour être lus sur le fond -subtle correspondant.

text-primary-emphasis

text-success-emphasis

text-info-emphasis

text-warning-emphasis

text-danger-emphasis

text-dark-emphasis

<div class="d-flex flex-column gap-2">
  <div class="p-2 bg-primary-subtle text-primary-emphasis">text-primary-emphasis</div>
  <div class="p-2 bg-success-subtle text-success-emphasis">text-success-emphasis</div>
  <div class="p-2 bg-info-subtle text-info-emphasis">text-info-emphasis</div>
  <div class="p-2 bg-warning-subtle text-warning-emphasis">text-warning-emphasis</div>
  <div class="p-2 bg-danger-subtle text-danger-emphasis">text-danger-emphasis</div>
  <div class="p-2 bg-light-subtle text-dark-emphasis border">text-dark-emphasis</div>
</div>

Texte du corps de page#

text-body : texte courant.

text-body-emphasis : texte renforcé, noir.

text-body-secondary : information secondaire.

text-body-tertiary : décoration uniquement.

text-black : noir.

Un lien hérite de la couleur avec text-reset.

<p class="text-body mb-1">text-body : texte courant.</p>
<p class="text-body-emphasis mb-1">text-body-emphasis : texte renforcé, noir.</p>
<p class="text-body-secondary mb-1">text-body-secondary : information secondaire.</p>
<p class="text-body-tertiary mb-1">text-body-tertiary : décoration uniquement.</p>
<p class="text-black mb-1">text-black : noir.</p>
<p class="mb-0 text-primary">Un lien <a href="#" class="text-reset">hérite de la couleur</a> avec <code>text-reset</code>.</p>

Opacité du texte#

text-opacity-* règle la variable --bs-text-opacity. Elle agit sur les classes de couleur du thème. Réservez-la au texte décoratif.

100 % : Mensualité du mois

75 % : Mensualité du mois

50 % : Mensualité du mois

25 % : Mensualité du mois

<p class="text-primary text-opacity-100 mb-1">100 % : Mensualité du mois</p>
<p class="text-primary text-opacity-75 mb-1">75 % : Mensualité du mois</p>
<p class="text-primary text-opacity-50 mb-1">50 % : Mensualité du mois</p>
<p class="text-primary text-opacity-25 mb-0">25 % : Mensualité du mois</p>

Ne pas transmettre un état par la seule couleur#

Associez toujours la couleur à un mot et à une icône. Ici, le statut reste compréhensible en niveaux de gris ou pour une personne daltonienne.

Virement exécuté
Virement rejeté : solde insuffisant

<ul class="list-unstyled mb-0">
  <li class="text-success d-flex align-items-center gap-2 mb-1">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.5 3.5 6 11 2.5 7.5l-1 1L6 13l8.5-8.5z"/></svg>
    <span>Virement exécuté</span>
  </li>
  <li class="text-danger d-flex align-items-center gap-2">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="m3 2-1 1 5 5-5 5 1 1 5-5 5 5 1-1-5-5 5-5-1-1-5 5z"/></svg>
    <span>Virement rejeté : solde insuffisant</span>
  </li>
</ul>

Classes de couleur de texte

Classes de couleur de texte
Classes	Couleur
`text-primary`	Bleu `#2B62AA`
`text-secondary` `text-success`	Vert `#387A1B`
`text-info`	Bleu foncé `#0856A1`
`text-warning`	Jaune `#ffc107` (fonds sombres seulement)
`text-danger`	Rouge `#dc3545`
`text-light`	Gris clair `#EAEBEA` (fonds sombres seulement)
`text-dark`	Gris foncé `#212529`
`text-white` `text-black`	Blanc et noir
`text-body`	Couleur du texte de la page (`--bs-body-color`)
`text-body-emphasis`	Texte renforcé (`--bs-emphasis-color`)
`text-body-secondary`	Texte atténué à 75 % (`--bs-secondary-color`)
`text-body-tertiary`	Texte atténué à 50 % (`--bs-tertiary-color`)
`text-primary-emphasis` `text-secondary-emphasis` `text-success-emphasis` `text-info-emphasis` `text-warning-emphasis` `text-danger-emphasis` `text-light-emphasis` `text-dark-emphasis`	Ton foncé de chaque couleur, à lire sur le fond `-subtle`
`text-opacity-25` `text-opacity-50` `text-opacity-75` `text-opacity-100`	Opacité du texte
`text-reset`	Hérite de la couleur du parent (`color: inherit`)
`text-bg-primary` `text-bg-secondary` `text-bg-success` `text-bg-danger` `text-bg-warning` `text-bg-info` `text-bg-light` `text-bg-dark`	Fond et texte contrasté en une seule classe
`text-muted` `text-black-50` `text-white-50`	Classes dépréciées : préférez `text-body-secondary`, ou une couleur avec `text-opacity-50`

Contraste sur fond blanc

Rapports calculés pour du texte sur #fff. Le seuil WCAG AA est de 4,5 : 1 pour un texte normal.

Contraste sur fond blanc
Classe	Rapport	Verdict
`text-primary`	6,1 : 1	Conforme
`text-success`, `text-secondary`	5,3 : 1	Conforme
`text-info`	7,4 : 1	Conforme
`text-danger`	4,5 : 1	Limite : à éviter pour du petit texte
`text-body-secondary`	7,1 : 1	Conforme
`text-body-tertiary`	3,2 : 1	Insuffisant : décoratif seulement
`text-warning`	1,6 : 1	Insuffisant : fonds sombres seulement
`text-light`	1,2 : 1	Insuffisant : fonds sombres seulement

Variables Sass et CSS

Variables Sass et CSS
Variable	Rôle
`$utilities-text`, `$utilities-text-colors`	Couleurs de `text-*` (thème, `black`, `white`, `body`), créées à partir de `$theme-colors`.
`$utilities-text-emphasis-colors`	Tons `text-*-emphasis`.
`$theme-colors`	Ajoutez une couleur pour obtenir `text-nom`, `bg-nom`, `border-nom` et `text-bg-nom`.
`--bs-primary-rgb`, `--bs-success-rgb`…	Composantes de chaque couleur ; lues par `text-*`.
`--bs-text-opacity`	Opacité du texte (1 par défaut), modifiée par `text-opacity-*`.
`--bs-primary-text-emphasis`, `--bs-success-text-emphasis`…	Couleur des classes `text-*-emphasis`.
`--bs-body-color`, `--bs-emphasis-color`	Texte courant et texte renforcé.
`--bs-secondary-color`, `--bs-tertiary-color`	Textes atténués, lus par `text-body-secondary` et `text-body-tertiary`.

Bonnes pratiques

À faire

Choisissez la couleur pour son sens (succès, erreur) et doublez-la d’un mot, d’une icône ou d’un libellé.
Utilisez text-bg-* pour un texte sur fond coloré, et text-*-emphasis sur un fond -subtle.
Vérifiez le contraste final dès que vous combinez une couleur de texte avec une opacité ou un fond personnalisé.

À éviter

N’indiquez pas un statut (payé, en retard, rejeté) par la seule couleur du texte.
N’employez pas text-warning ni text-light sur fond blanc.
Ne réservez pas text-body-tertiary ni text-opacity-* à une information importante.
N’utilisez plus text-muted, text-black-50 et text-white-50, qui sont dépréciées.

Accessibilité

Texte normal : contraste d’au moins 4,5 : 1 ; grand texte (24 px, ou 19 px en gras) : 3 : 1.
Une information transmise par la couleur doit l’être aussi par le texte, une forme ou une icône (WCAG 1.4.1).
Marquez les icônes décoratives avec aria-hidden="true" et laissez le mot porter le sens.