Comprobador de contraste
Comprueba el contraste de forma rápida y sencilla
Normal Text – Example
Large Text – Example
Non Text Element (Icon)
Normal Text
Large Text
Non Text Elements
Opciones de entrada
Introduce simplemente el color de fondo y el color del texto. La herramienta comprueba automáticamente si los colores tienen suficiente contraste.
¿Preguntas?
Información general sobre el comprobador de contraste
Este comprobador de contraste verifica si la combinación de color de texto y color de fondo cumple con los requisitos de las Web Content Accessibility Guidelines (WCAG).
Indica si la combinación es adecuada para textos normales, textos grandes y elementos no textuales.
Indica si la combinación es adecuada para textos normales, textos grandes y elementos no textuales.
Un buen contraste de color garantiza que los contenidos sean legibles para todas las personas, especialmente para:
– Personas con discapacidad visual
– Personas con daltonismo
– Usuarios con mucha luz ambiental o pantallas de baja calidad
Además, un contraste suficiente es obligatorio por ley (por ejemplo, según WCAG 2.x, EN 301 549).
– Personas con discapacidad visual
– Personas con daltonismo
– Usuarios con mucha luz ambiental o pantallas de baja calidad
Además, un contraste suficiente es obligatorio por ley (por ejemplo, según WCAG 2.x, EN 301 549).
– AA es el estándar mínimo recomendado para sitios web accesibles.
– AAA es un estándar superior y opcional para una legibilidad especialmente buena.
En muchos países y proyectos, WCAG AA es el objetivo relevante.
– AAA es un estándar superior y opcional para una legibilidad especialmente buena.
En muchos países y proyectos, WCAG AA es el objetivo relevante.
El texto grande o en negrita es más fácil de leer.
Por ello, las WCAG permiten valores de contraste más bajos sin comprometer la legibilidad.
Por ello, las WCAG permiten valores de contraste más bajos sin comprometer la legibilidad.
Según las WCAG, un texto se considera grande cuando:
tiene al menos 18 pt (≈ 24 px) o
tiene al menos 14 pt (≈ 18,5 px) y está en negrita.
tiene al menos 18 pt (≈ 24 px) o
tiene al menos 14 pt (≈ 18,5 px) y está en negrita.
Los elementos no textuales son, por ejemplo:
– Iconos
– Botones sin texto
– Símbolos gráficos
– Elementos de interfaz con significado
– Iconos
– Botones sin texto
– Símbolos gráficos
– Elementos de interfaz con significado
Para los elementos no textuales, las WCAG exigen un contraste mínimo de 3:1 para que su función sea reconocible.
Sí.
Puedes introducir los colores:
mediante el selector de color o
directamente como valor HEX (por ejemplo,
Ambas entradas se sincronizan automáticamente.
Puedes introducir los colores:
mediante el selector de color o
directamente como valor HEX (por ejemplo,
#1a1a1a).Ambas entradas se sincronizan automáticamente.
El botón intercambia el color del texto y el color de fondo.
Así puedes comprobar rápidamente si ambas variantes cumplen con los requisitos WCAG.
Así puedes comprobar rápidamente si ambas variantes cumplen con los requisitos WCAG.
El comprobador funciona en tiempo real.
Cada cambio de color se calcula al instante para que veas de inmediato si el contraste es suficiente.
Cada cambio de color se calcula al instante para que veas de inmediato si el contraste es suficiente.
No.
El comprobador de contraste es una herramienta de apoyo para evaluar colores.
Una evaluación completa de accesibilidad incluye otros aspectos como:
Navegación por teclado
Compatibilidad con lectores de pantalla
Gestión del foco
Estructura y semántica
El comprobador de contraste es una herramienta de apoyo para evaluar colores.
Una evaluación completa de accesibilidad incluye otros aspectos como:
Navegación por teclado
Compatibilidad con lectores de pantalla
Gestión del foco
Estructura y semántica
El cálculo se basa en las reglas de contraste WCAG 2.x, que también se utilizan en las normativas legales actuales (por ejemplo, EN 301 549).
La herramienta es útil para:
Diseñadores y desarrolladores web
Redactores y gestores de contenido
Agencias
Empresas con obligaciones de accesibilidad
todas las personas que quieran garantizar una mejor legibilidad
Diseñadores y desarrolladores web
Redactores y gestores de contenido
Agencias
Empresas con obligaciones de accesibilidad
todas las personas que quieran garantizar una mejor legibilidad
Utiliza texto más oscuro sobre fondo claro (o al revés)
Aumenta la diferencia de luminosidad
Usa tipografías más grandes o en negrita
Evita tonos de gris similares
Aumenta la diferencia de luminosidad
Usa tipografías más grandes o en negrita
Evita tonos de gris similares
No necesariamente.
Contrastes demasiado fuertes pueden resultar cansados.
El objetivo es un contraste suficiente, no el máximo posible.
Contrastes demasiado fuertes pueden resultar cansados.
El objetivo es un contraste suficiente, no el máximo posible.