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.
Comprueba ratios de contraste WCAG 2.2 y APCA. Simulación de daltonismo, sugerencias de corrección automática y exportación CSS. Herramienta de accesibilidad gratis — sin registro, 100% en el navegador.
Las WCAG (Web Content Accessibility Guidelines) 2.2 exigen una relación de contraste mínima de 4,5:1 para texto normal y de 3:1 para texto grande (18px+ o 14px+ en negrita) en el Nivel AA. El Nivel AAA exige 7:1 para texto normal y 4,5:1 para texto grande. Un contraste que no cumple hace el contenido ilegible para usuarios con discapacidad visual y puede derivar en acciones legales bajo leyes de accesibilidad como el ADA.
APCA (Accessible Perceptual Contrast Algorithm) es un nuevo modelo de contraste propuesto para WCAG 3.0. A diferencia de la ratio WCAG actual, que usa una fórmula de luminancia simple, APCA tiene en cuenta que el ojo humano percibe el contraste de forma distinta según el tamaño del texto, su peso y su polaridad (claro sobre oscuro frente a oscuro sobre claro). Los valores APCALc van de 0 a más de 106, y se recomienda 75 o más para texto de cuerpo.
La herramienta aplica matrices scientifiques de transformación de color para simular cómo aparecen tus colores a usuarios con protanopía (daltonismo rojo, ~1 % de los hombres), deuteranopía (verde, ~1 % de los hombres) y tritanopía (azul, raro). Esto te ayuda a verificar que tu diseño es accesible al ~8 % de los hombres y ~0,5 % de las mujeres con deficiencias de visión del color. Si la relación de contraste simulada baja de 4,5:1, tu diseño puede ser inaccesible para estos usuarios.
WCAG 2.2 Nivel AA exige una relación mínima de 4,5:1 para texto normal (menos de 18px o menos de 14px en negrita) y de 3:1 para texto grande (18px+ o 14px+ en negrita). El Nivel AAA exige 7:1 para texto normal y 4,5:1 para texto grande. Esta herramienta comprueba los cuatro niveles automáticamente.
WCAG usa una fórmula simple de ratio de luminancia (0,2126R + 0,7152G + 0,0722B) que puede sobreestimar el contraste para ciertos pares de colores. APCA es un modelo más nuevo que tiene en cuenta el contraste perceptual, es decir, cómo el ojo humano percibe realmente los distintos colores, y se está considerando para WCAG 3.0. Esta herramienta muestra ambas métricas para que puedas evaluar con cualquiera de los dos estándares.
Sí, esta herramienta acepta los tres formatos. Introduce «#1a0dab» para HEX, «rgb(26, 13, 171)» para RGB o «hsl(234, 86 %, 36 %)» para HSL. También puedes usar colores con nombre como «white», «black», «navy», etc. La herramienta detecta el formato automáticamente y convierte entre ellos.
Cuando tu relación de contraste falla, la herramienta sugiere automáticamente el color aprobado más cercano. Ajusta la luminosidad de tu color de primer plano, conservando el tono y la saturación, para encontrar la alternativa conforme más cercana. Pulsa «Use» para aplicar el color sugerido al instante.
Esta herramienta también se conoce por estas tareas — cada enlace abre la misma herramienta con una guía enfocada:
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.