Verificador de contraste
Prueba colores de primer plano y fondo según WCAG, previsualiza texto real y compara opciones Pantone accesibles.
Color de primer plano
Color de fondo
Relación de contraste
Texto normal
WCAG AA 4.5:1Texto grande
WCAG AA 3:1Componentes UI
WCAG AA 3:1Vista previa en vivo
Texto normal de ejemplo para comprobar la legibilidad del contenido.
Texto grande de ejemplo
Sugerencias Pantone accesibles
Esta combinación ya cumple el objetivo de contraste seleccionado.
Más Herramientas
Cómo usar el verificador de contraste
- Introduce colores HEX o selecciona colores Pantone para el primer plano y el fondo.
- Revisa la relación de contraste y los resultados WCAG AA o AAA para texto normal, texto grande y componentes UI.
- Usa la vista previa, intercambia colores, copia el CSS o prueba sugerencias Pantone accesibles.
Usos del verificador de contraste
- Valida combinaciones de colores de marca antes de usarlas en diseños digitales.
- Comprueba botones, formularios, navegación y otros componentes UI para asegurar un contraste legible.
- Compara paletas inspiradas en Pantone antes de adaptar colores impresos a pantallas.
- Documenta resultados WCAG para revisiones de accesibilidad y entregas de diseño.
Verificador de contraste de color para flujos WCAG, UI y Pantone
Usa este verificador cuando necesites confirmar que un color de texto, fondo, estado de botón o paleta de marca será legible antes de llevarlo a un sitio web, app, presentación o sistema de diseño.
Interpreta correctamente el resultado WCAG
La herramienta calcula la luminancia relativa de ambos colores y devuelve la relación de contraste utilizada por WCAG. El texto de cuerpo suele necesitar 4.5:1 para AA y 7:1 para AAA, mientras que el texto grande y los componentes UI esenciales tienen umbrales más bajos.
Conecta colores Pantone y accesibilidad digital
Los colores Pantone suelen elegirse para marca e impresión, pero sus equivalentes en pantalla también deben revisarse. Busca nombres Pantone o valores HEX, previsualiza la combinación y compara alternativas accesibles antes de entregarlas a diseño o desarrollo.
Un flujo práctico para diseño y desarrollo
Empieza con los valores HEX exactos del archivo de diseño, prueba primer plano y fondo en ambos sentidos, copia el CSS o el informe y conserva la combinación aprobada junto al resto de la documentación de tu paleta Pantone.
Preguntas frecuentes sobre el verificador de contraste
¿Qué mide este verificador de contraste?
Mide la relación de contraste de luminancia entre un color de primer plano y un color de fondo, y compara el resultado con los umbrales WCAG.
¿Cuáles son los requisitos de contraste WCAG AA y AAA?
WCAG AA exige al menos 4.5:1 para texto normal y 3:1 para texto grande o componentes UI. WCAG AAA exige 7:1 para texto normal y 4.5:1 para texto grande.
¿Se pueden comprobar colores Pantone para accesibilidad web?
Sí. Las referencias Pantone pueden convertirse a valores de color en pantalla y revisarse por contraste digital. Verifica siempre los colores finales en el medio donde se usarán.
Aviso sobre el contraste
Los resultados se calculan a partir de valores digitales y sirven para planificar accesibilidad. La impresión física, los materiales, la iluminación y la calibración de pantalla pueden cambiar el contraste percibido.