Vérifier la taille minimale d’une police accessible
Un texte trop petit peut rendre une interface autrement fonctionnelle difficile à lire, notamment pour les personnes malvoyantes, les lecteurs âgés ou toute personne consultant un écran dans de mauvaises conditions.
Lancer gratuitement
Cet outil compare une taille exprimée en pixels CSS à un minimum pratique pour le corps du texte, une légende ou un libellé de bouton. Il indique le seuil applicable, précise si la taille le respecte et calcule l’écart exact. Ce résultat facilite un premier contrôle d’accessibilité ; il ne prétend pas que la taille suffit à rendre une conception accessible.
Déterminez le rôle du contenu avant d’évaluer la valeur
Une taille de police ne suffit pas à elle seule, car les textes remplissent des fonctions différentes. Pour la lecture suivie, cet outil retient un minimum courant de 16 pixels CSS. Les légendes sont généralement plus brèves et secondaires ; leur seuil est donc fixé à 12 pixels. Les libellés de bouton doivent rester lisibles tout en tenant dans leur commande et sont comparés à 14 pixels. Sélectionnez le rôle réel des mots, et non l’apparence donnée au composant. Une ligne placée sous une image reste une légende, même si elle reprend la police de l’article. Le texte d’une commande actionnable reste un libellé de bouton, même si celle-ci ressemble à un lien. Un rôle explicite rend les audits cohérents d’une page à l’autre et évite d’appliquer partout le seuil le plus faible. Ces valeurs constituent des repères pratiques répandus, pas des critères juridiques universels. Votre système de conception peut imposer des minima supérieurs selon son public, sa police, ses appareils ou ses conditions de lecture.
Interprétez le résultat comme un contrôle de premier niveau
La réponse contient la taille fournie, le type de contenu, le minimum retenu, un indicateur de conformité et un écart signé. Un écart nul signifie que la taille atteint exactement le seuil et satisfait ce contrôle. Une valeur négative indique ce qu’il manque ; une valeur positive représente la marge disponible. Cette comparaison directe est utile pour examiner des jetons de conception, inventorier des composants, automatiser des contrôles et rédiger des critères de réception. Elle transforme une inquiétude vague en décision reproductible. Toutefois, réussir ce test doit lancer l’évaluation, et non la conclure. La taille perçue dépend aussi de la police, de la graisse, du dessin des lettres, de l’interligne, de la densité d’écran, du zoom et de la mise en page. Un texte de 16 pixels peut rester pénible si son contraste est faible ou ses lignes trop longues. Servez-vous du signal pour repérer rapidement les risques, puis examinez le composant rendu avec du contenu réel et des réglages d’assistance représentatifs.
Associez la taille minimale à une typographie robuste
Une typographie accessible doit résister aux adaptations réellement appliquées à une page. Après avoir corrigé une taille signalée, vérifiez que le zoom n’entraîne aucune coupure, que les commandes grandissent sans perdre leur libellé et que la mise en page se réorganise sans défilement horizontal imposé. Dans l’interface finale, privilégiez les unités CSS relatives lorsqu’elles préservent les préférences de l’utilisateur, même si cet outil reçoit des pixels pour assurer une comparaison claire. Contrôlez le contraste dans les états normal, survol, focus, désactivé et erreur. Donnez au corps un interligne et une longueur de ligne confortables, et ne placez pas d’instruction essentielle dans une minuscule légende. Pour un bouton, un libellé lisible ne compense ni une cible trop petite, ni un focus invisible, ni l’absence de nom accessible. Les seuils restent volontairement simples : 16 pixels pour le corps, 12 pour les légendes et 14 pour les boutons. Si votre public présente des besoins particuliers, adoptez une règle interne plus exigeante.
Cas d’usage
Examiner les jetons de conception
Comparez les valeurs typographiques à un repère cohérent avant de déployer les composants dans tout le produit.
Auditer une bibliothèque de composants
Repérez les corps, légendes et libellés de bouton trop petits pendant l’inventaire des composants réutilisables.
Ajouter un contrôle avant publication
Exploitez la réponse déterministe de l’API pour détecter une régression dans un processus d’accessibilité documenté.
Questions fréquentes
Respecter le minimum garantit-il la conformité en matière d’accessibilité ?
Non. Il s’agit d’un contrôle pratique, pas d’une certification juridique. Le contraste, le zoom, la redistribution, l’espacement, la lisibilité, le contenu et les interactions comptent aussi.
Quelle unité de taille faut-il saisir ?
Saisissez la taille calculée en pixels CSS. Si votre feuille de style emploie rem ou em, convertissez la valeur rendue en pixels avant le contrôle.
Quels seuils l’outil utilise-t-il ?
Il compare le corps à 16px, les légendes à 12px et les libellés de bouton à 14px. Votre système de conception peut relever ces repères pratiques.
Pourquoi une légende peut-elle être plus petite que le corps ?
Une légende est généralement brève et secondaire, mais doit rester lisible. N’y dissimulez pas une instruction essentielle en petits caractères.
Que se passe-t-il si je fournis un autre type de contenu ?
La requête renvoie une erreur d’entrée non valide. Utilisez body, caption ou button_label afin d’appliquer un seuil défini.
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/verify/accessibility-font-size-min-check \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"content_type":"body"}'const res = await fetch("https://api.kit.forhosting.com/verify/accessibility-font-size-min-check", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"content_type": "body"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/verify/accessibility-font-size-min-check",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"content_type": "body"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/verify/accessibility-font-size-min-check", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"content_type":"body"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"content_type":"body"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/verify/accessibility-font-size-min-check", 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
{
"font_size": 16,
"content_type": "body"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "verify.accessibility_font_size_min_check",
"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.
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. |