Comprobador de contraste de color
Color del primer plano (texto)
Color de fondo
Avance
Texto normal (18px)
Texto grande (24px en negrita)
Háganoslo saber
Por favor, comparte tu experiencia.
Herramientas similares
Generador de gradientes
Crea degradados lineales y radiales con salida CSS.
Generador de paletas de colores
Extrae colores de las imágenes y genera paletas.
Generador de marcadores de posición
Generar imágenes de marcador de posición
Generador de favicon
Cambiar el tamaño de las imágenes y generar archivos ICO.
Acerca de Comprobador de contraste de color
Comprueba el cumplimiento de las directrices WCAG AA/AAA y las relaciones de contraste para los colores de texto y fondo. Herramienta de accesibilidad gratuita.
Cómo usar
Paso 1
Introduzca o seleccione un color de primer plano (texto) mediante código HEX o selector de color.
Paso 2
Introduzca o seleccione un color de fondo mediante código HEX o selector de color.
Paso 3
Visualice la relación de contraste calculada en tiempo real.
Paso 4
Compruebe el cumplimiento de las WCAG AA y AAA para texto normal y grande.
Paso 5
Vea la vista previa visual del texto sobre fondo
Paso 6
Si el contraste falla, utilice los colores sugeridos para una mejor accesibilidad.
Paso 7
Utilice la opción "Intercambiar colores" para invertir el primer plano y el fondo.
Características y beneficios
- ✅Cálculo de la relación de contraste en tiempo real
- ✅Verificación de cumplimiento de WCAG 2.1 AA y AAA
- ✅Comprobaciones separadas para texto normal y texto grande.
- ✅Vista previa visual del texto sobre fondo
- ✅Selectores de color para una fácil selección de color.
- ✅Entrada de color HEX con validación
- ✅Botón para intercambiar colores para realizar pruebas rápidas.
- ✅Generadores de colores aleatorios
- ✅Sugerencias automáticas para contrastes fallidos
- ✅Muestra las proporciones requeridas (4,5:1, 3:1, 7:1, 4,5:1)
- ✅Indicadores de aprobado/suspenso con marcas de verificación
- ✅100% basado en navegador - sin carga al servidor
- ✅100% gratis - sin marcas de agua, sin necesidad de registrarse
Preguntas frecuentes
¿Qué es la relación de contraste de color?
La relación de contraste de color mide la diferencia de luminancia entre dos colores y se expresa como una proporción, por ejemplo, 4,5:1. Una proporción mayor indica un mejor contraste. Se calcula utilizando la fórmula WCAG 2.1, basada en la luminancia relativa de cada color.
¿Qué son los estándares WCAG AA y AAA?
Las WCAG (Directrices de Accesibilidad para el Contenido Web) definen dos niveles de conformidad: AA (mínimo) requiere una relación de aspecto de 4,5:1 para texto normal y de 3:1 para texto grande. AAA (mejorado) requiere una relación de aspecto de 7:1 para texto normal y de 4,5:1 para texto grande. La mayoría de los sitios web buscan cumplir con el nivel AA.
¿Qué se considera texto grande?
El texto grande se define como de 18 pt (24 px) o más, o de 14 pt (18,66 px) o más si está en negrita. El texto grande requiere menor contraste (3:1 para AA, 4,5:1 para AAA) porque es más fácil de leer.
¿Por qué mi diseño no supera las pruebas de contraste?
Las razones más comunes incluyen: usar texto claro sobre fondo claro, texto oscuro sobre fondo oscuro o colores con luminancia similar. Incluso los colores que a simple vista parecen diferentes pueden tener un contraste deficiente. Siempre realice una prueba con un medidor de contraste.
¿Debo aspirar a la certificación AA o AAA?
WCAG AA es el requisito legal para la mayoría de los sitios web y se considera el estándar mínimo. Se recomienda AAA para una mayor accesibilidad, especialmente para sitios web dirigidos a personas mayores o con discapacidad visual. Comience con AA y, siempre que sea posible, procure alcanzar AAA.
¿Puedo usar cualquier color si el contraste es bueno?
Un buen contraste es esencial, pero no suficiente. Considere también el daltonismo (utilice nuestro simulador de daltonismo), evite depender únicamente del color para transmitir información y asegúrese de que los colores combinen bien en su diseño general.
¿Qué ocurre si no consigo un buen contraste con los colores de mi marca?
Prueba a ajustar el tono (más claro o más oscuro), usa el color de tu marca para los detalles en lugar del texto, añade bordes o fondos, o utiliza la función de sugerencias para encontrar la alternativa más parecida. Los colores de marca suelen poder ajustarse ligeramente sin perder su identidad.
¿Tengo que comprobar todas las combinaciones de colores?
Verifique todas las combinaciones de texto sobre fondo, especialmente el texto principal, los encabezados, los enlaces, los botones y los campos de formulario. Compruebe también los estados de desplazamiento y enfoque. Los iconos y gráficos que transmiten información también deben cumplir con los requisitos de contraste.
¿Es 21:1 la relación de contraste máxima?
Sí, 21:1 es la relación de contraste máxima posible, que se logra con negro puro (#000000) sobre blanco puro (#FFFFFF) o viceversa. Esto representa el mayor contraste posible.