Herramienta de Accesibilidad Gratuita
Comprobador de contraste de color
Introduce el color del texto y el color de fondo a continuación para ver si tu combinación de colores es accesible y cumple con los requisitos para personas con discapacidades visuales.
Comprobador de Accesibilidad Web
Descubre si tu sitio es accesible para personas con discapacidad y cumple con la ADA, WCAG y otros requisitos.
¿Cómo funciona un comprobador de contraste de color?
El contraste de color — que es la diferencia de color entre dos elementos — influye en la facilidad con la que los usuarios leen y navegan por un sitio web. Para los usuarios con discapacidades visuales, incluyendo baja visión, cataratas o daltonismo, el contraste de color influye significativamente en su experiencia. Cuanto menor es el contraste, más difícil puede ser para estas personas navegar por una página.
Un comprobador de contraste de color garantiza que las páginas web sean accesibles determinando si cumplen con los requisitos de contraste de color de WCAG.
Comprender las relaciones de contraste
WCAG tiene dos niveles de relaciones de contraste:(opens in a new tab)
Nivel AA: El nivel mínimo de contraste es 4,5:1.
Nivel AAA: El contraste mejorado tiene una relación de 7:1.
Se recomienda que las organizaciones proporcionen texto e imágenes con mayor contraste siempre que sea posible; sin embargo, el Nivel AA es el estándar requerido para la accesibilidad web.
En resumen: cuanto más contraste tengas entre tu texto, los elementos de la interfaz y los colores de fondo, más accesible será para todos.
Prueba nuestra herramienta a continuación para comprobar el contraste de los colores.
Consejos para usar colores accesibles y contraste de color en tu sitio web
Elige la paleta de colores adecuada
Una paleta de colores es una combinación de tonos que se implementan en contextos de diseño específicos, como la estructura de un sitio. El color juega un papel importante para que tu contenido sea accesible a personas con discapacidades visuales. La accesibilidad del color web en el diseño tiene en cuenta a tu audiencia y cualquier condición o discapacidad que puedan tener para percibir los colores.
A la hora de crear un sitio web accesible, la elección de los colores es importante. Incluir tonos accesibles en tu paleta de diseño hará que tu sitio sea más usable para personas con discapacidad visual o baja visión.
Las Pautas de Accesibilidad para el Contenido Web (WCAG) describen varias recomendaciones para la accesibilidad del color, incluyendo orientación sobre las relaciones de contraste, luminancia, fondos y espaciado de color para hacer un sitio más accesible para quienes tienen cualquier tipo de deficiencia visual. Los siguientes aspectos de las paletas de colores web pueden ayudarte a diseñar pensando en la accesibilidad.
Apunta a una relación de contraste de 4,5:1 o superior
La relación de contraste de color determina cuán brillantes u oscuros aparecen los colores en una pantalla. Puede variar de 1 a 21 (escrito como 1:1 y 21:1, respectivamente). El primer número de la relación indica la luminancia relativa (o brillo) de los colores claros, y el segundo representa la luminancia relativa de los colores oscuros. WCAG recomienda usar 4,5:1 como relación mínima para texto y elementos interactivos.
Encuentra combinaciones de colores visualmente amigables
Elige combinaciones de colores centrándote en los colores de fondo, los colores del texto y la tipografía, las llamadas a la acción (CTA) y los botones.
Aquí tienes algunos consejos sobre lo que debes y no debes hacer:
HAZ:
Comienza el proceso identificando el color principal de tu marca
Recuerda que ciertos colores tienden a tener ciertos significados
Busca más espacio en blanco para ayudar a mejorar la legibilidad
Utiliza diferentes saturaciones de los tonos principales de tu marca para aumentar la fidelidad de marca
NO HAGAS:
Permitir que una combinación de colores dificulte la legibilidad
Usar texto de bajo contraste — puede cansar la vista y hacer que tu página sea menos accesible
Usar una tipografía negra digital o negro puro sobre un fondo blanco puro — el contraste extremo puede causar fatiga visual
Recuerda que factores adicionales como la resolución de pantalla, los niveles de brillo y los tipos de dispositivos también afectan la legibilidad del sitio. Prueba los colores en varias plataformas para asegurarte de que estén ajustados para una legibilidad óptima en diferentes dispositivos.
Conoce las excepciones de accesibilidad al contraste de color
Existen algunas excepciones a las directrices de accesibilidad de color establecidas por WCAG:
Los requisitos de relación de contraste de color no son obligatorios para logotipos o elementos gráficos incidentales porque no son necesariamente esenciales para que el usuario comprenda el contenido o la funcionalidad.
El texto que forma parte de un logotipo no tiene un requisito mínimo de contraste.
El texto que forma parte de botones deshabilitados no necesita cumplir con la relación mínima de contraste. Aunque existen algunas excepciones, intenta seguir las mejores prácticas para evitar infracciones accidentales de accesibilidad de color en el diseño web.