Verificador de la razón de contraste WCAG
Sepa si un texto sigue siendo legible sobre su fondo según las WCAG: #111827 sobre blanco alcanza 17.74 a 1 y aprueba AA y AAA tanto en texto normal como grande. Una cifra que sus incidencias de accesibilidad pueden citar. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Primer plano
- #111827
- Fondo
- #ffffff
- Razón de contraste
- 17,74
Este verificador de la razón de contraste WCAG toma dos colores hexadecimales —primer plano y fondo— y devuelve la razón de contraste oficial que usan las Pautas de Accesibilidad para el Contenido Web, junto con indicadores claros de aprobado o reprobado en AA y AAA, tanto para texto normal como para texto grande. Diseñadores, desarrolladores y auditores usan esa razón para decidir si el cuerpo del texto, los botones, las etiquetas y el chrome de la interfaz siguen siendo legibles para personas con baja visión o diferencias en la percepción del color. El motor sigue la fórmula de luminancia relativa de WCAG 2.x: cada canal hexadecimal se lineariza desde sRGB, la luminancia se pondera con los coeficientes estándar 0.2126, 0.7152 y 0.0722, y la razón de contraste es (L más clara más 0.05) dividida entre (L más oscura más 0.05). Los umbrales no están redondeados: el texto normal necesita al menos 4.5 para AA y 7 para AAA; el texto grande necesita al menos 3 para AA y 4.5 para AAA. Los resultados son deterministas, sin llamadas de red, muestreo ni atajos que dependan de la fecha.
Qué mide la razón de contraste WCAG y qué contiene la respuesta
La razón de contraste es el número único que usa WCAG para describir cuán fuertemente destaca un texto sobre su fondo, tomando en cuenta la percepción humana de la luminancia en lugar de una simple distancia RGB. Un par de negro puro sobre blanco puro alcanza veintiuno a uno, el máximo teórico para colores sRGB opacos, mientras que colores idénticos dan uno a uno y no cumplen ningún criterio de texto.
Texto grande en términos de WCAG significa al menos dieciocho puntos regular o el equivalente en catorce puntos negrita; la herramienta no mide el tamaño de fuente en sí misma —solo aplica los umbrales de texto grande para que usted pueda mapear la matriz a su escala tipográfica.
No hay rastreo de página, análisis de CSS, mezcla de opacidad, ni muestreo de degradados: usted proporciona dos colores hexadecimales explícitos y recibe una matriz reproducible adecuada para integración continua de tokens de diseño, backends de plugins de Figma, y comentarios de tickets que deben citar una razón numérica en lugar de una opinión de captura de pantalla.
Cómo se leen las entradas hexadecimales y cómo se mantienen reproducibles AA y AAA
Ambos valores deben ser hexadecimales: almohadilla inicial opcional, ya sean tres dígitos que se expanden a seis (#abc se convierte en #aabbcc) o seis dígitos completos, sin distinguir mayúsculas de minúsculas. Los sufijos alfa, las funciones rgb(), las funciones hsl(), los colores CSS con nombre, y los enteros sueltos se rechazan con un mensaje que nombra el campo y muestra lo que se recibió, para que un token incorrecto nunca se convierta en un fallo silencioso que pasa como correcto.
Cada color se limita a treinta y dos caracteres para mantener la validación económica y bloquear accidentes de pegado. Tras el análisis, los canales se linearizan con la curva sRGB por partes de WCAG —dividir entre 12.92 por debajo del umbral 0.04045, o elevar ((c más 0.055) entre 1.055) a la potencia 2.4 en caso contrario— y luego se combinan en la luminancia relativa.
La razón usa la luminancia más clara en el numerador; los indicadores de aprobación comparan la razón sin redondear en coma flotante contra 4.5, 7.0 y 3.0, para que un 4.50 mostrado no pueda ocultar un verdadero 4.499 que debería reprobar AA.
Dónde encajan las comprobaciones de contraste en los sistemas de diseño, las revisiones de interfaz y la integración continua
Los equipos de producto se topan con los requisitos de contraste cuando una paleta de marca se ve elegante en una diapositiva de marketing pero falla en el texto del cuerpo sobre una tarjeta blanca, cuando un tema de modo oscuro se genera a partir de tokens claros, o cuando las partes interesadas legales y de cumplimiento piden evidencia documentada de AA antes del lanzamiento.
Los ingenieros conectan el mismo contrato a comprobaciones de pull request que bloquean un cambio de token si el AA de texto normal cae por debajo de 4.5 para los colores primarios del cuerpo, o registran el estado AAA de texto grande para titulares que deliberadamente se sitúan más cerca de la superficie. Los especialistas de control de calidad y accesibilidad usan la razón numérica en informes de errores, para que los desarrolladores corrijan el par exacto en lugar de adivinar a partir de una captura de pantalla.
Los equipos de contenido y marketing verifican que los códigos hexadecimales de una campaña sigan aprobando cuando se colocan sobre fondos claros u oscuros del sitio. Combínelo con herramientas de conversión de color cuando necesite intermedios RGB o HSL, y con auditorías de accesibilidad de página completa cuando deba escanear marcado en vivo en lugar de dos valores hexadecimales explícitos.
Qué puede hacer con ella
Revisión de tokens de diseño y paletas
Verifique cada par de primer plano/fondo de una paleta de marca contra AA y AAA, antes de fijar los tokens para temas claros y oscuros.
Informes de errores de accesibilidad
Adjunte una razón de contraste numérica y la matriz AA/AAA a los tickets, para que los ingenieros corrijan el par hexadecimal exacto, no una captura de pantalla vaga.
Preguntas frecuentes
¿Cuánto cuesta el verificador de la razón de contraste WCAG?
Es gratis en su navegador, en esta página.
¿Cuáles son los umbrales de AA y AAA usados aquí?
Texto normal: AA ≥ 4.5 y AAA ≥ 7. Texto grande: AA ≥ 3 y AAA ≥ 4.5. Los indicadores usan la razón sin redondear; la razón mostrada se redondea a dos decimales.
¿Esta herramienta escanea mi sitio web en busca de problemas de contraste?
No. Solo compara dos colores hexadecimales que usted proporciona.
¿Por qué un par falló AA cuando a mí me parece bien?
La percepción humana varía y la luz ambiental difiere. WCAG usa luminancia relativa sobre sRGB linearizado, no viveza percibida. Confíe en la razón numérica para las comprobaciones de cumplimiento, y luego ajuste los valores hexadecimales hasta que la matriz apruebe.
¿Qué formatos de color acepta el verificador WCAG?
Solo colores hexadecimales de tres o seis dígitos, con o sin almohadilla inicial y en mayúsculas o minúsculas. Los nombres de color, la notación RGB o HSL y la transparencia se rechazan, así un valor erróneo nunca pasa por bueno.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/color/contrast \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/contrast", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"foreground": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/contrast",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"foreground": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/contrast", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"foreground":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"foreground":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/contrast", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"foreground": "#111827",
"background": "#ffffff"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.contrast",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_color_chars | 32 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Utilícelo gratis en el navegador para revisiones de paletas y tokens de diseño, o llame a la API a $0.002 por solicitud exitosa cuando necesite la misma matriz en integración continua, sistemas de diseño o controles de accesibilidad automatizados.
Qué mide la razón de contraste WCAG y qué contiene la respuesta
Este verificador normaliza cada entrada hexadecimal a una forma canónica en minúsculas #rrggbb y un eco rgb(r, g, b), luego devuelve contrast_ratio redondeado a dos decimales para la presentación, más un objeto wcag con ramas normal_text y large_text, cada una con campos booleanos aa y aaa. La etiqueta de método wcag_relative_luminance documenta que la ruta es la fórmula publicada de luminancia relativa, no un experimento perceptual delta-E o APCA. Los códigos hexadecimales inválidos, los campos faltantes, los valores que no son cadenas, y las cadenas demasiado largas se rechazan con invalid_input y nunca se cobran. Si necesita una auditoría completa del sitio, combine este endpoint con un escáner de accesibilidad más amplio; esta página responde únicamente a la pregunta de los dos colores, con JSON estable tanto para humanos como para máquinas.
Cómo se leen las entradas hexadecimales y cómo se mantienen reproducibles AA y AAA
Los campos preferidos son foreground para el color del texto o del icono, y background para la superficie detrás de él, pero se aceptan los alias fg, color1, text y hex1 para el primer color, y bg, color2 y hex2 para el segundo, de modo que formularios, cadenas de consulta y hojas de cálculo puedan reutilizar el mismo contrato sin renombrar columnas. Combine la comprobación gratuita en el navegador de esta página con la API de pago cuando los pipelines de sistemas de diseño necesiten el mismo resultado matemático sin reimplementar la matemática de luminancia en cada lenguaje.
Dónde encajan las comprobaciones de contraste en los sistemas de diseño, las revisiones de interfaz y la integración continua
Los diseñadores pueden pegar pares hexadecimales de Figma o de un archivo JSON de tokens y leer la matriz AA y AAA antes de confirmar una escala de color. En esta página el trabajo se ejecuta enteramente en su navegador; a través de la API cada consulta exitosa cuesta $0.002, la validación fallida no se cobra, y nada se almacena después de que se devuelve la respuesta. Esa separación —exploración interactiva gratuita y una API de pago idéntica— coincide con el resto del catálogo tier A del KIT y le permite pasar de un taller de paletas a un pipeline automatizado sin cambiar el resultado matemático.
Casos de integración
Controles de integración continua para colores de interfaz
Llame a la API desde pull requests para hacer fallar las compilaciones cuando los pares hexadecimales de cuerpo o botón caigan por debajo de AA de texto normal (4.5:1).
Preguntas técnicas
¿Qué formatos de color se aceptan?
Solo hexadecimal: #RGB o #RRGGBB, con o sin la almohadilla inicial, sin distinguir mayúsculas de minúsculas. rgb(), hsl(), los colores con nombre, y el hexadecimal con alfa se rechazan con invalid_input.