Comprobador de contraste y legibilidad de colores

La legibilidad es la diferencia de luminancia entre el color del texto y el color del fondo. Cuanto mayor sea la diferencia, más fácil será leer el texto. Un contraste demasiado bajo hace que el contenido sea difícil de leer, especialmente para personas con deficiencias visuales, personas mayores o en condiciones de iluminación difíciles (p. ej., en un teléfono bajo luz solar directa).

Según la Organización Mundial de la Salud (OMS), aproximadamente 2.200 millones de personas en todo el mundo tienen algún tipo de deficiencia visual. Además, millones padecen daltonismo (alrededor del 8 % de los hombres y el 0,5 % de las mujeres), y muchos más experimentan un deterioro visual relacionado con la edad.

La herramienta calcula la relación de contraste utilizando la fórmula especificada en las WCAG 2.1 (Web Content Accessibility Guidelines) – directrices internacionales de accesibilidad digital. El resultado permite una evaluación objetiva de si los colores son lo suficientemente legibles, independientemente de la configuración del monitor o la percepción individual del color.

La herramienta muestra la relación de contraste en una escala de 1:1 (sin contraste) a 21:1 (contraste máximo: negro sobre blanco). El resultado se compara con los umbrales definidos en el estándar WCAG:

• Texto normal – requiere al menos 4,5:1 para el nivel AA (estándar mínimo) o 7:1 para el nivel AAA (estándar mejorado). Se aplica al texto menor de 18pt (24px) o menor de 14pt (18,5px) en negrita.
• Texto grande / negrita – requiere al menos 3:1 para el nivel AA o 4,5:1 para el nivel AAA. Se aplica al texto desde 18pt (24px) o desde 14pt (18,5px) en negrita: encabezados, botones, resaltados.
• Iconos y elementos de interfaz – requieren al menos 3:1 para el nivel AA. Se aplica a iconos, botones, campos de formulario y otros elementos de interfaz que transmiten información.

El nivel AA es el mínimo exigido por las normativas de accesibilidad digital en muchos países, incluida la directiva de la UE sobre accesibilidad web. El nivel AAA proporciona mejor legibilidad, pero no siempre es práctico de alcanzar para todos los elementos.

Si el contraste es demasiado bajo, no necesita buscar el color adecuado por ensayo y error. La función Coincidencia encuentra automáticamente una variante de color de texto que cumple con el umbral de contraste seleccionado.

Cómo funciona la coincidencia:

1. Seleccione el objetivo de coincidencia de la lista, p. ej., AA para texto normal o AAA para texto grande.
2. Haga clic en el botón Coincidencia.
3. La herramienta buscará entre las variantes de luminosidad del color del texto y sugerirá la más cercana que cumpla con los requisitos.
4. El color sugerido se puede copiar al portapapeles o establecer inmediatamente como el nuevo color del texto.

El algoritmo preserva el tono y la saturación del color original, cambiando solo la luminosidad. El color sugerido se mantiene coherente con la identidad visual al tiempo que cumple con el estándar de accesibilidad.

Veo un error de formato de color

Compruebe el formato del color. Un código HEX debe empezar con # y contener 3 o 6 caracteres (p. ej., #fff o #ffffff). Para formato RGB, compruebe que los valores están separados por comas y en el rango 0–255.

La función Coincidencia no encuentra un color adecuado

Cuando el fondo y el texto tienen una luminosidad similar en el mismo tono, el algoritmo puede no encontrar una variante que cumpla los requisitos sin cambiar el tono. En este caso, considere cambiar el color de fondo o elegir un color de texto completamente diferente.

El color en el selector no corresponde al código introducido

El selector de colores del navegador solo admite el formato HEX sin transparencia. Si introduce un color en formato RGBA o HSLA con transparencia, el selector mostrará solo la parte de color (sin alfa). Los cálculos de contraste siguen teniendo en cuenta la transparencia.

El daltonismo es un trastorno de la percepción del color que afecta a aproximadamente el 8 % de los hombres y el 0,5 % de las mujeres. Las personas con daltonismo pueden tener dificultades para distinguir ciertos pares de colores, incluso si el contraste de luminancia es suficiente.

Tipos más comunes de daltonismo:

• Deuteranopía – dificultad para distinguir entre verde y rojo (la forma más común)
• Protanopía – dificultad para ver el color rojo
• Tritanopía – dificultad para ver azul y amarillo (poco frecuente)

Esta herramienta comprueba el contraste de luminancia, que es importante para todos los usuarios. Sin embargo, al diseñar, conviene evitar combinaciones de colores problemáticas (p. ej., texto rojo sobre fondo verde) y no depender únicamente del color para transmitir información: use también formas, iconos y texto.