Verificador de Contraste de Color
Comprueba el ratio de contraste entre dos colores según los estándares WCAG AA y AAA.
Cómo usar Verificador de Contraste de Color
- Introduce el color de tu texto (HEX o RGB).
- Introduce el color de fondo.
- Consulta el ratio de contraste y qué niveles WCAG cumple.
Acerca de Verificador de Contraste de Color
Que un texto sea legible sobre su fondo es algo medible, no una cuestión de gusto. Las pautas de accesibilidad WCAG lo expresan como un ratio de contraste que va de 1:1 (dos colores idénticos) a 21:1 (negro sobre blanco). Introduce un color de texto y un color de fondo en HEX (#137256 o #137) o RGB (rgb(19,114,86)), y este verificador indica el ratio exacto con dos decimales, junto con si aprueba o no cuatro umbrales: 4.5:1 y 7:1 para texto normal (AA y AAA), y 3:1 y 4.5:1 para texto grande.
El cálculo utiliza la fórmula oficial de luminancia relativa de WCAG: cada canal se linealiza y luego se pondera según el brillo que percibe el ojo, así que la cifra coincide con lo que reportan las herramientas de auditoría de accesibilidad. El ratio siempre compara el color más claro con el más oscuro, lo que significa que intercambiar los dos campos te da exactamente el mismo número.
Compara dos colores sólidos, así que no puede evaluar un texto colocado sobre una foto, un degradado o una superposición semitransparente; en esos casos, toma antes una muestra del píxel que hay detrás del texto. Tampoco analiza una página en vivo: eres tú quien proporciona los colores. Para convertir un valor antes de pegarlo, usa el convertidor de color, y para construir una paleta que cumpla los estándares en torno a un color de marca, prueba el generador de tonalidades. Nada se sube a ningún servidor.
Preguntas frecuentes
¿Qué ratio de contraste necesito?
Al menos 4.5:1 para texto normal y 3:1 para texto grande para cumplir con WCAG AA. AAA eleva esos valores a 7:1 y 4.5:1 respectivamente. El verificador comprueba los cuatro a la vez, así puedes ver exactamente qué niveles supera tu combinación.
¿Qué se considera texto grande?
Aproximadamente 18pt (24px) en peso normal, o 14pt (18,66px) en negrita o superior. Cualquier tamaño menor se trata como texto normal y debe cumplir el umbral más estricto.
¿Qué formatos de color puedo introducir?
HEX de tres o seis dígitos (#137 o #137256) y RGB como rgb(19,114,86). Cualquiera de los dos campos acepta cualquiera de los formatos, así que puedes combinarlos.
¿Importa en qué campo pongo cada color?
No. La fórmula divide la luminancia más clara entre la más oscura, así que el ratio es idéntico independientemente del orden en que los introduzcas.
¿Por qué mi texto sigue viéndose difícil de leer a pesar de aprobar?
El ratio solo mide los dos colores que proporcionas. Los grosores de fuente finos, los tamaños pequeños, las pantallas de baja calidad y el texto sobre imágenes recargadas perjudican la legibilidad sin cambiar el número, así que trata un resultado aprobado como un mínimo, no como una garantía.