Calculateur de contraste APCA
Sachez si une couleur de texte reste lisible sur son fond : le quasi-noir #111827 sur blanc obtient Lc 104.5, et inverser les deux couleurs change le signe. Un seul nombre signé que vos revues de design peuvent citer. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Texte
- #111827
- Arrière-plan
- #ffffff
- Lc
- 104,5
- Lc absolu
- 104,5
- Polarité
- BoW
- Lisibilité
- body_fluent
Ce calculateur de contraste APCA prend une couleur de texte et une couleur d'arrière-plan en codes hex et renvoie le Lc signé (contraste de luminosité) produit par l'Accessible Perceptual Contrast Algorithm, utilisé dans les travaux de lisibilité du brouillon WCAG 3. Contrairement au ratio de contraste WCAG 2.x plus ancien, l'APCA est sensible à la polarité : un texte sombre sur une surface claire donne un Lc positif, tandis qu'un texte clair sur une surface sombre donne un Lc négatif d'amplitude comparable. Designers, développeurs et spécialistes de l'accessibilité s'appuient sur ce seul nombre—avec les tables de taille et de graisse de police—pour décider si le corps de texte, les libellés d'interface et les traits non textuels restent lisibles sur les écrans auto-éclairés. Le moteur implémente les constantes publiques 0.0.98G-4g : linéarisation en puissance 2.4, coefficients Y sRGB, soft-clamp du noir et mise à l'échelle SAPC BoW/WoB. Les résultats sont entièrement déterministes, sans appels réseau, échantillonnage ni raccourcis liés à la date.
Ce que mesure le Lc APCA et en quoi il diffère du ratio WCAG 2
L'APCA prédit le contraste perceptuel du texte et du contenu non textuel sur les écrans auto-éclairés en modélisant le gamma du moniteur, les noirs doux et la façon asymétrique dont la vision humaine traite les paires sombre-sur-clair versus clair-sur-sombre. La sortie est un Lc signé qui s'étend environ de plus ou moins cent dix : par exemple, un corps de texte presque noir sur blanc pur se situe souvent près de Lc quatre-vingt-dix ou plus, tandis que les mêmes couleurs inversées produisent un grand Lc négatif.
Le WCAG 2.x, lui, rapporte un unique ratio de contraste positif issu de la luminance relative avec des seuils fixes AA et AAA tels que 4.5 pour 1 et 7 pour 1 ; ce ratio ignore la polarité et tend à sur- ou sous-estimer certaines paires de tons moyens que les gens peinent réellement à lire.
Ce calculateur renvoie toujours le Lc signé, la magnitude absolue, l'étiquette de polarité BoW (black on white / texte sombre sur clair) ou WoB (white on black / texte clair sur sombre), le Y linéarisé de chaque couleur, et une bande grossière de lisibilité dérivée du Lc absolu pour un triage rapide.
Il n'y a ni crawl de page, ni parsing CSS, ni mélange d'opacité, ni échantillonnage de dégradés : vous fournissez deux couleurs hex explicites et recevez un objet reproductible adapté aux gardes de tokens de design, aux tickets d'accessibilité et aux revues automatisées de palette qui doivent citer un Lc numérique plutôt qu'une opinion subjective sur une capture d'écran.
Comment les entrées hex sont lues et pourquoi le chemin 0.0.98G-4g reste déterministe
Les deux valeurs doivent être en hex : dièse initial optionnel, trois chiffres qui s'étendent à six ou six chiffres complets, sans distinction de casse. Suffixes alpha, fonctions rgb(), fonctions hsl(), couleurs CSS nommées et entiers bruts sont rejetés avec un message qui nomme le champ et montre ce qui a été reçu, pour qu'un jeton erroné ne devienne jamais un fail-open silencieux. Chaque couleur est plafonnée à trente-deux caractères pour garder la validation légère et bloquer les collages accidentels.
Après analyse, chaque canal est élevé à la puissance 2.4 après division par deux cent cinquante-cinq, puis combiné avec les coefficients sRGB APCA 0.2126729, 0.7151522 et 0.0721750 pour former Y. Les Y quasi noirs à ou sous 0.022 reçoivent le soft-clamp afin de ne pas sur-pénaliser le noir pur. Lorsque le Y du fond est supérieur à celui du texte, la branche BoW applique les exposants 0.56 et 0.57 avec l'échelle 1.14 et le décalage 0.027 ; sinon la branche WoB utilise 0.65 et 0.62 et renvoie un Lc négatif.
Les deltas de luminance extrêmement faibles sont ramenés à zéro.
Où les contrôles APCA s'insèrent dans les design systems, le mode sombre et WCAG 3
Les équipes produit se tournent vers l'APCA lorsqu'une palette de marque qui a passé WCAG 2 AA reste boueuse en mode sombre, lorsque du texte gris moyen sur des surfaces douces échoue aux tests humains de lisibilité, ou lorsque les parties prenantes demandent des nombres Lc alignés sur les discussions du brouillon WCAG 3 plutôt que le seul ratio ancien.
Les ingénieurs branchent le même contrat sur des contrôles de pull request qui bloquent un changement de token si le Lc absolu des couleurs de corps primaires passe sous un seuil d'équipe comme soixante, ou enregistrent les valeurs WoB pour des titres héro du thème sombre volontairement plus proches de la surface. QA et spécialistes de l'accessibilité joignent Lc signé et polarité aux rapports de bug pour que les développeurs corrigent la paire exacte au lieu de deviner depuis une capture.
Les équipes contenu et marketing vérifient que les codes hex de campagne franchissent encore les bandes minimales de corps lorsqu'ils sont placés sur des fonds de site clairs ou sombres. Associez-le au vérificateur de ratio WCAG 2 lorsque vous avez encore besoin d'une documentation AA/AAA, et aux outils de conversion de couleur lorsque vous avez besoin d'intermédiaires RGB ou HSL avant de calculer le Lc.
Cas d’usage
Revue des tokens de design et du mode sombre
Vérifiez chaque paire texte/fond des thèmes clairs et sombres pour le Lc signé et la polarité avant de verrouiller les tokens de marque.
Rapports d'accessibilité avec polarité
Joignez le Lc signé, la polarité BoW/WoB et la bande de lisibilité pour que les ingénieurs corrigent la paire hex exacte, pas une capture vague.
Questions fréquentes
Combien coûte le calculateur de contraste APCA ?
Il est gratuit dans votre navigateur sur cette page.
Qu'est-ce que le Lc et pourquoi peut-il être négatif ?
Lc est le contraste de luminosité APCA. Les valeurs positives signifient un texte sombre sur fond clair (BoW) ; les négatives, un texte clair sur fond sombre (WoB). Conservez le signe pour les rapports sensibles à la polarité ; n'utilisez la valeur absolue que pour comparer des seuils de magnitude.
En quoi cela diffère-t-il du vérificateur de ratio de contraste WCAG ?
WCAG 2.x renvoie un unique ratio positif et des drapeaux AA/AAA. L'APCA renvoie un Lc signé avec polarité, une mathématique différente (Y en puissance 2.4, soft-clamp du noir, exposants BoW/WoB) et vise les travaux de lisibilité du brouillon WCAG 3 plutôt que les seuils 4.5:1 / 7:1.
Cet outil analyse-t-il mon site pour des problèmes de contraste ?
Non. Il ne compare que deux couleurs hex que vous fournissez.
Quels formats de couleur le calculateur APCA accepte-t-il ?
Uniquement les couleurs hexadécimales à trois ou six chiffres, avec ou sans dièse initial, en majuscules ou minuscules. Les noms de couleur, les notations RGB ou HSL et la transparence sont refusés : une valeur erronée ne passe jamais.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/color/apca-contrast \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/apca-contrast", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/apca-contrast",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/apca-contrast", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/apca-contrast", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"text": "#111827",
"background": "#ffffff"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.apca_contrast",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
max_color_chars | 32 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Explorez des paires gratuitement dans le navigateur, ou appelez l'API à $0.002 par requête réussie lorsque le CI du design system, les backends Figma ou les pipelines de tokens ont besoin de la même matrice Lc à chaque fois.
Ce que mesure le Lc APCA et en quoi il diffère du ratio WCAG 2
Le champ method est fixé à apca_0.0.98G-4g afin que les journaux de CI documentent exactement quel jeu de constantes a produit le nombre. Hex invalides, champs manquants, valeurs non chaînes et chaînes trop longues sont rejetés avec invalid_input et ne sont jamais facturés.
Comment les entrées hex sont lues et pourquoi le chemin 0.0.98G-4g reste déterministe
Les champs préférés sont text pour la couleur d'encre ou d'icône au premier plan et background pour la surface derrière. Les alias foreground, fg, color1 et hex1 mappent vers text ; bg, color2 et hex2 vers background, afin que tableurs, chaînes de requête et formulaires réutilisent le même contrat sans renommer les colonnes.
Où les contrôles APCA s'insèrent dans les design systems, le mode sombre et WCAG 3
Les designers collent des paires hex depuis Figma ou un JSON de tokens et lisent polarité plus une bande telle que body_preferred ou large_text avant de verrouiller une échelle. Sur cette page le travail s'exécute entièrement dans votre navigateur ; via l'API chaque recherche réussie coûte $0.002, une validation échouée n'est pas facturée et rien n'est stocké après la réponse. Cette répartition—exploration interactive gratuite et API payante identique—correspond au reste du catalogue KIT de niveau A et vous permet de passer d'un atelier de palette à un pipeline automatisé sans changer le résultat mathématique.
Cas d'intégration
Gardes CI pour la préparation au brouillon WCAG 3
Appelez l'API depuis les pull requests pour faire échouer les builds lorsque le Lc absolu des couleurs de corps tombe sous le seuil de votre équipe.
Questions techniques
Quels formats de couleur sont acceptés ?
Hex uniquement : #RGB ou #RRGGBB, avec ou sans dièse initial, sans distinction de casse. rgb(), hsl(), couleurs nommées et hex avec alpha sont rejetés avec invalid_input.