Verificador de contraste
Elige un color de primer plano y de fondo para ver la relación de contraste en vivo y comprobar si cumple las pautas de accesibilidad WCAG AA y AAA para texto normal y texto grande. Una vista previa en vivo muestra la combinación en la práctica.
Cómo funciona
Elige tus colores de primer plano y de fondo con los selectores o escribiendo un código hexadecimal. La relación de contraste se calcula a partir de la luminancia relativa de ambos colores y se compara con los umbrales WCAG para texto normal (4,5:1 para AA, 7:1 para AAA) y texto grande (3:1 para AA, 4,5:1 para AAA).
Consejo
Si una combinación falla, prueba a oscurecer el color más oscuro o aclarar el más claro — incluso pequeños ajustes pueden llevar la relación por encima del siguiente umbral.
¿Qué se considera "texto grande"?
WCAG define el texto grande como al menos 18pt (24px), o 14pt (~18,5px) en negrita — los títulos y textos similares destacados pueden usar los umbrales más flexibles de texto grande.
Más herramientas en esta categoría
Calculadora de exposición
Encuentra exposiciones fotográficas equivalentes entre apertura, velocidad de obturación e ISO.
Calculadora de relación de aspecto
Escala una imagen o vídeo de forma proporcional y encuentra su relación simplificada.
Generador de degradado CSS
Diseña un degradado CSS lineal o radial y copia el código generado.
Generador de paletas de colores
Convierte cualquier color base en paletas complementarias, análogas y triádicas.
Conversor de formatos de color
Convierte cualquier color entre HEX, RGB, HSL y CMYK al instante, con copia con un clic para cada formato.
Generador de escala tipográfica
Genera un conjunto armonioso de tamaños de fuente a partir de un tamaño base y una proporción de escala, listo para copiar como propiedades personalizadas CSS.