Contraste de colores

Con Contraste de colores, diseñadores y desarrolladores de interfaces pueden evaluar colores antes de aprobar su accesibilidad. Mide el contraste WCAG entre dos colores.

Mide el contraste WCAG entre dos colores. La herramienta es gratuita en el navegador y muestra el resultado sin pedirte una cuenta.

Cómo usar

Introduce el color de fondo, por ejemplo como código hexadecimal.
Añade el color del texto o del elemento que quieres comparar con ese fondo.
Ejecuta la comprobación para obtener la relación de contraste entre los dos colores.
Lee los umbrales WCAG mostrados para texto normal, texto grande y elementos de interfaz.
Prueba otra pareja de colores si el primer resultado no cumple tus necesidades.

Ejemplo

El ejemplo compara un color oscuro con uno claro. La herramienta calcula la relación de contraste y muestra los umbrales WCAG relevantes. Comprueba si la relación es suficiente para texto normal, texto grande o elementos de interfaz; después, prueba otra pareja si tu sistema de diseño lo permite. El resultado te ayuda a decidir antes de publicar.

Entrada

#0F172A
#FFFFFF

Límites y formatos

La herramienta compara dos colores, no la legibilidad real de una imagen o una foto.
La transparencia, los degradados y las superposiciones no siempre se representan.
Una buena relación por sí sola no valida todos los aspectos de accesibilidad de una página.
Comprueba por separado los colores de los estados hover, activo y deshabilitado.
Los valores mostrados deben interpretarse según el tamaño y la finalidad del texto.

Dónde se procesa

Todo el cálculo de contraste se ejecuta en tu navegador. Los códigos de color que introduces permanecen en tu dispositivo y no se envían a ningún sitio. El resultado aparece justo después de la comprobación. Puedes borrar los campos o cerrar la pestaña sin conservar esos valores.

Preguntas frecuentes

¿Qué relación de contraste debo buscar para el texto del cuerpo?

Los umbrales WCAG dependen del tamaño y la finalidad del texto. Para texto normal, el nivel AA suele exigir un contraste mayor que para texto grande. Lee la orientación que muestra la herramienta para tu caso concreto y comprueba cada estilo de texto por separado.

¿Puedo usar nombres de colores como rojo o azul?

El campo espera valores que la herramienta pueda leer, especialmente códigos de color hexadecimales. Si un nombre no se reconoce, sustitúyelo por su código hexadecimal equivalente y vuelve a ejecutar la comprobación.

¿Comprueba la herramienta el contraste en una captura de pantalla?

No, calcula el contraste entre dos colores introducidos. No lee una imagen ni una página completa. Para una maqueta, anota los códigos de color utilizados y prueba cada pareja importante por separado.