meetsContrastAA

Ce que ça fait

Dit si un rapport de contraste atteint le seuil WCAG niveau AA correspondant à la nature du contenu.

Signature

type ContrastKind = "normal-text" | "large-text" | "non-text";

function meetsContrastAA(ratio: number, kind?: ContrastKind): boolean

Paramètres

Nom	Type	Requis	Défaut	Description
ratio	number	oui	—	Rapport rendu par contrastRatio
kind	ContrastKind	non	"normal-text"	Nature du contenu évalué

kind	Seuil	S’applique à
"normal-text"	4,5	Texte sous 24 px, ou sous 18,66 px en gras (WCAG 1.4.3)
"large-text"	3	Texte d’au moins 24 px, ou d’au moins 18,66 px en gras (WCAG 1.4.3)
"non-text"	3	Composants d’interface et contenus graphiques : bordure, icône, anneau de focus (WCAG 1.4.11)

Retour

true si le seuil est atteint. La comparaison est inclusive : exactement 4,5 est conforme.

Erreurs

N’en lève aucune. Une valeur de kind inconnue (atteignable seulement depuis du JavaScript non typé) rend false — jamais un « conforme » accordé par défaut.

Exemple minimal

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

const conforme = meetsContrastAA(contrastRatio("#8a4e12", "#f4f2ec"));

Exemple complet

import { contrastRatio, meetsContrastAA, type ContrastKind } from "@legba-core/ui";

interface CoupleAVerifier {
  nom: string;
  avant: string;
  arriere: string;
  nature: ContrastKind;
}

function couplesNonConformes(couples: readonly CoupleAVerifier[]): string[] {
  return couples
    .map((couple) => ({ ...couple, ratio: contrastRatio(couple.avant, couple.arriere) }))
    .filter((couple) => !meetsContrastAA(couple.ratio, couple.nature))
    .map((couple) => `${couple.nom} : ${couple.ratio.toFixed(2)}:1`);
}

const echecs = couplesNonConformes([
  { nom: "texte sur fond", avant: "#1d1a14", arriere: "#f4f2ec", nature: "normal-text" },
  { nom: "anneau de focus", avant: "#8a4e12", arriere: "#f4f2ec", nature: "non-text" },
]);

Pièges

• "large-text" dépend de la taille RENDUE, pas de la taille déclarée dans la feuille de styles : un font-size: 1.5em dans un contexte réduit peut rester du texte normal. Mesurer avec getComputedStyle avant de choisir la nature.
• Le défaut est "normal-text", le seuil le plus exigeant : un appel sans kind ne sous-estime jamais l’exigence.
• AA seulement. Le niveau AAA (7 pour du texte normal, 4,5 pour du texte large) n’est pas exposé — comparer directement au rapport si nécessaire.
• Un true ne dit rien de la taille de cible, du focus visible ni du nom accessible : ce sont des critères WCAG distincts.

Voir aussi

• contrastRatio
• CONTRAST_THRESHOLDS
• THEME_TOKENS