Check WCAG 2.2 and APCA contrast. Color-blind simulation, fix suggestions, CSS export — 100% local.
| Text Size | Level | Required | Result |
|---|---|---|---|
| Normal text | AA | 4.5:1 | ✓ Pass |
| Normal text | AAA | 7:1 | ✗ Fail |
| Large text (≥24px / 18.66px bold) | AA | 3:1 | ✓ Pass |
| Large text (≥24px / 18.66px bold) | AAA | 4.5:1 | ✓ Pass |
color: #5b9cff; background-color: #0f1115; /* Contrast ratio: 6.88:1 */
This tool runs 100% in your browser. All computation happens locally on your device — your input is never uploaded to any server. Results are for reference only.
WCAG 2.2 defines contrast as (L₁ + 0.05) / (L₂ + 0.05), where L₁ and L₂ are the relative luminances of the lighter and darker colors. Relative luminance linearizes each sRGB channel (c/12.92 when c ≤ 0.03928, otherwise ((c+0.055)/1.055)^2.4) and blends them as 0.2126R + 0.7152G + 0.0722B. Pass thresholds depend on text size: normal text needs 4.5:1 for AA and 7:1 for AAA, while large text (≥24px, or ≥18.66px bold) only needs 3:1 for AA and 4.5:1 for AAA. The tool computes this ratio live, also reports the APCA Lc perceptual score, simulates protanopia/deuteranopia/tritanopia, and can suggest a passing color.
White on a typical mid-red sits around 2.8:1 — fine for a decorative accent, but far below the 4.5:1 AA floor for body text.
Diego's app uses a red primary button (#ff6b6b) on a white page, and his designer wants to confirm the label passes accessibility standards.
To check contrast: enter foreground and background colors — the tool calculates the WCAG contrast ratio and shows whether it passes AA or AAA accessibility standards.
FreeToolHub Contrast Checker is a free browser-based tool that tests color contrast ratios against WCAG accessibility standards, no signup.
Vérifiez les ratios de contraste WCAG 2.2 et APCA. Simulation de daltonisme, suggestions de correction automatique, export CSS. Outil d'accessibilité gratuit — pas d'inscription, 100 % basé sur le navigateur.
WCAG (Web Content Accessibility Guidelines) 2.2 exige un ratio de contraste minimal de 4,5:1 pour le texte normal et de 3:1 pour le texte grand (18px+ ou 14px+ gras) au niveau AA. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le texte grand. Un contraste non conforme rend le contenu illisible pour les utilisateurs ayant des handicaps visuels et peut entraîner des poursuites judiciaires en vertu des lois sur l'accessibilité telles que l'ADA.
APCA (Accessible Perceptual Contrast Algorithm) est un nouveau modèle de contraste proposé pour WCAG 3.0. Contrairement au ratio WCAG actuel qui utilise une formule de luminance simple, APCA prend en compte la manière dont l'œil humain perçoit le contraste différemment en fonction de la taille, du poids et de la polarité du texte (clair sur foncé vs foncé sur clair). Les valeurs APCA vont de 0 à 106+, avec 75+ recommandés pour le corps du texte.
L'outil applique des matrices de transformation de couleurs scientifiques pour simuler comment vos couleurs apparaissent aux utilisateurs atteints de protanopie (daltonisme rouge, ~1 % des hommes), de deutéranopie (daltonisme vert, ~1 % des hommes) et de tritanopie (daltonisme bleu, rare). Cela vous aide à vérifier que votre design est accessible aux ~8 % d'hommes et ~0,5 % de femmes présentant des déficits de la vision des couleurs. Si le ratio de contraste simulé tombe en dessous de 4,5:1, votre design peut être inaccessible à ces utilisateurs.
WCAG 2.2 niveau AA exige un ratio de contraste minimal de 4,5:1 pour le texte normal (moins de 18px ou moins de 14px gras) et 3:1 pour le texte grand (18px+ ou 14px+ gras). Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le texte grand. Cet outil vérifie automatiquement les quatre niveaux.
WCAG utilise une formule simple de ratio de luminance (0,2126R + 0,7152G + 0,0722B) qui peut surestimer le contraste pour certaines paires de couleurs. APCA est un modèle plus récent qui prend en compte le contraste perceptif — la manière dont l'œil humain perçoit réellement différentes couleurs — et est en cours d'examen pour WCAG 3.0. Cet outil montre les deux métriques afin que vous puissiez évaluer en utilisant l'une ou l'autre norme.
Oui, cet outil accepte les trois formats. Entrez "#1a0dab" pour HEX, "rgb(26, 13, 171)" pour RVB ou "hsl(234, 86 %, 36 %)" pour TSL. Vous pouvez également utiliser des couleurs nommées comme "blanc", "noir", "marine", etc. L'outil détecte automatiquement le format et convertit entre eux.
Lorsque votre ratio de contraste n'est pas conforme, l'outil suggère automatiquement la couleur de passage la plus proche. Il ajuste la luminosité de votre couleur de premier plan (tout en préservant la teinte et la saturation) pour trouver l'alternative conforme la plus proche. Cliquez sur "Use" pour appliquer immédiatement la couleur suggérée.
Cet outil est aussi connu sous ces tâches — chaque lien ouvre le même outil avec un guide ciblé :
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.