Comprobador de contraste de color
Vista previa
Haz espacio para las buenas ideas.
Un poco de claridad marca la diferencia.
Reúne tus ideas, mantén los detalles en orden y dedica tiempo al trabajo que importa. Todo lo que necesitas en un solo lugar.
Hecho para tu día a día.
Comprueba el contraste entre los colores del texto y el fondo
Dos colores pueden verse bien en una maqueta y, sin embargo, ser difíciles de leer cuando se usan en textos pequeños o controles. Introduce un color HEX de primer plano y otro de fondo para consultar su relación de contraste y evaluar la combinación según los umbrales WCAG 2.x AA y AAA para texto. La vista previa aplica esos colores a textos, botones y otros elementos habituales de interfaz para que puedas evaluar la combinación más allá de un número.
¿Qué significan los resultados de contraste WCAG?
- Texto normal: al menos 4.5:1 para AA y 7:1 para AAA.
- Texto grande: al menos 3:1 para AA y 4.5:1 para AAA. WCAG considera grande un texto de al menos 24px normal o unos 18.7px en negrita.
- Componentes de interfaz y objetos gráficos significativos: puede aplicarse un umbral de contraste no textual de 3:1 respecto a colores adyacentes.
La decisión de cumplir o no se basa en la relación sin redondear, aunque el valor mostrado tenga menos decimales. Una pareja de colores que supera la prueba no significa que toda la página o el componente cumpla WCAG: también deben comprobarse otras combinaciones, estados, estilos de enfoque, semántica e interacciones.
Cómo comprobar una pareja de colores
- Introduce los valores HEX de primer plano y fondo o elige los colores con el selector.
- Consulta la relación de contraste y los resultados para texto normal, texto grande e interfaz.
- Examina la vista previa de la interfaz en tiempo real. Cambia un color y compara el resultado antes de aplicarlo a tu diseño.
Preguntas frecuentes
¿Es suficiente 4.5:1 para cualquier tipo de texto?
Es el mínimo de contraste WCAG AA para texto normal. AAA establece un objetivo más alto, de 7:1; el texto grande tiene otros umbrales.
¿Superar AA significa que mi sitio web es accesible?
No. Esta herramienta solo comprueba una pareja de colores proporcionada. La accesibilidad también depende de otras parejas de primer plano y fondo y de muchos requisitos más allá del contraste.
¿Puedo comprobar transparencias, degradados o una página web completa?
No en esta versión. El comprobador evalúa una pareja de colores HEX sólidos mediante el cálculo de contraste WCAG 2.x; no analiza páginas web ni realiza pruebas APCA/WCAG 3.