Comprobador de contraste WCAG — ratio AA/AAA
Elige color de texto y fondo para ver el ratio WCAG y el cumplimiento AA/AAA en texto normal y grande. Pasos: selecciona o escribe HEX, pulsa Calcular, lee el ratio y las insignias, intercambia o prueba sugerencias. Ejemplo: #767676 sobre #ffffff ≈ 4,54:1 — pasa AA en texto normal, no alcanza AAA en texto normal. Los colores permanecen en tu navegador.
Cómo funciona
Define texto y fondo con el selector o escribiendo HEX. La página convierte sRGB a luminancia relativa, calcula el ratio y muestra Aprobado/No cumple para AA y AAA (texto normal y grande). Intercambia el par, copia un resumen o aplica una sugerencia cuando el contraste es bajo.
Reglas a tener en cuenta
El contraste WCAG depende de la luminancia relativa, no solo del matiz. Consulta estas reglas si el ratio sorprende.
- La luminancia relativa L sale de los canales sRGB tras la curva de linearización WCAG. Ratio = (Lclaro + 0,05) / (Loscuro + 0,05).
- Umbrales: AA texto normal 4,5:1, AA texto grande 3:1, AAA texto normal 7:1, AAA texto grande 4,5:1. Un solo ratio alimenta las cuatro insignias.
- Solo HEX sRGB opaco (#RGB o #RRGGBB). HEX inválido muestra error; primer plano y fondo iguales dan 1:1 y fallan todos los niveles.
- Privacidad: los colores se procesan localmente en esta pestaña — nada va al servidor.
Ejemplo
Carga el ejemplo: primer plano #767676 sobre fondo #ffffff da unos 4,54:1. AA texto normal aprueba (≥4,5:1), AA texto grande aprueba (≥3:1), AAA texto normal falla (≥7:1), AAA texto grande aprueba (≥4,5:1). Intercambia colores para ver cómo cambia el ratio.
Cuándo encaja
- Diseño UI: valida cuerpo de texto y etiquetas sobre el fondo de marca antes de entregar.
- Botones y chips: comprueba blanco sobre color o color sobre blanco para AA normal o grande.
- Modo oscuro: intercambia superficies claras/oscurecidas y confirma que el texto secundario sigue en 4,5:1 o 3:1 en grande.
Frequently asked questions
¿Cuáles son los umbrales de contraste WCAG?
AA texto normal exige al menos 4,5:1; AA texto grande (18 pt regular o 14 pt negrita) 3:1; AAA texto normal 7:1; AAA texto grande 4,5:1. Esta página muestra las cuatro insignias a la vez.
¿Qué se considera texto grande?
El texto grande admite menos contraste porque ocupa más espacio. WCAG lo define como ≥18 pt regular o ≥14 pt en negrita. La vista previa incluye una línea grande y otra normal para comparar.
¿Se suben mis colores?
No. El cálculo se hace en tu navegador. Revisa la pestaña Red: los valores de color no se envían.
¿Cómo usar las sugerencias de color?
Si el par queda por debajo de 4,5:1, puede sugerir un primer plano o fondo más claro u oscuro que alcance AA en texto normal. Son puntos de partida mezclando hacia blanco o negro, no paletas de marca finales.
¿Qué relación tiene con los tokens de marca?
Usa esta página para validar cualquier par texto/fondo. Para una paleta de marca con tokens semánticos, abre la herramienta de tokens de color; también puedes muestrear colores de una foto con la herramienta de extracción.
Related tools
Consultas o comentarios
¿Algo poco claro, roto o que falte? Redacta un mensaje abajo — leemos cada nota sobre estas herramientas.