CONTRAST_THRESHOLDS

Ce que ça fait

Expose les trois seuils de contraste WCAG niveau AA appliqués par meetsContrastAA.

Signature

const CONTRAST_THRESHOLDS: {
  readonly normalText: 4.5;
  readonly largeText: 3;
  readonly nonText: 3;
}

Paramètres

N/A — une constante.

Retour

N/A — une constante gelée par le typage (as const).

Champ	Valeur	Critère WCAG
normalText	4,5	1.4.3 — texte sous 24 px, ou sous 18,66 px en gras
largeText	3	1.4.3 — texte d’au moins 24 px, ou d’au moins 18,66 px en gras
nonText	3	1.4.11 — composants d’interface et contenus graphiques

Erreurs

N/A.

Exemple minimal

import { CONTRAST_THRESHOLDS } from "@legba-core/ui";

const seuilTexte = CONTRAST_THRESHOLDS.normalText;

Exemple complet

import { CONTRAST_THRESHOLDS, contrastRatio } from "@legba-core/ui";

/** Marge restante avant de passer sous le seuil AA — utile en revue de maquette. */
function margeAvantEchec(avant: string, arriere: string): number {
  return contrastRatio(avant, arriere) - CONTRAST_THRESHOLDS.normalText;
}

const marge = margeAvantEchec("#8a4e12", "#f4f2ec");

Pièges

• largeText et nonText valent tous deux 3, mais ne se remplacent pas : ils répondent à deux critères WCAG différents. Utiliser le nom qui correspond au contenu réel, pour que le jour où l’un des deux change, seul celui-là bouge.
• Ces valeurs sont celles du niveau AA. Le niveau AAA (7 et 4,5) n’est pas exposé.
• Préférer meetsContrastAA à une comparaison manuelle : elle choisit le seuil et rend la comparaison inclusive (exactement 4,5 est conforme), deux détails faciles à manquer à la main.

Voir aussi

• contrastRatio
• meetsContrastAA