Verificador de contraste de color

Comprueba tus colores

Prueba combinaciones de colores para asegurarte de que cumplan con los estándares de accesibilidad WCAG para la legibilidad del texto.

1.00:1

Contraste

No cumple

Muy pobre

Texto normal

AA (4.5:1)

AAA (7:1)

Texto grande

AA (3:1)

AAA (4.5:1)

Color del texto

Color de fondo

Soluciones rápidas

Título de vista previa

El rápido zorro marrón salta sobre el perro perezoso

Ejemplo de texto pequeño (12px)

Texto

#ffffff

Fondo

#e57000

Estándares WCAG

Nivel AA

Ratio mínimo de contraste de 4.5:1 para texto normal y 3:1 para texto grande. Requerido para la mayoría de los sitios web.

Nivel AAA

Ratio mejorado de contraste de 7:1 para texto normal y 4.5:1 para texto grande. Recomendado para una accesibilidad óptima.

Contraste insuficiente para todos los tamaños de texto - no cumple con los estándares WCAG.

Calcula la relación de contraste entre los colores del texto y el fondo.

Elige un color usando el selector de color para el texto y el fondo o introduce un color en formato hexadecimal RGB (por ejemplo, #259 o #2596BE). Puedes ajustar el deslizador para seleccionar el color. Las Pautas de Accesibilidad para el Contenido Web (WCAG) tienen una guía específica para determinar si el texto es legible para los usuarios videntes. Este criterio utiliza un algoritmo para mapear combinaciones de colores en ratios comparables. Usando esta fórmula, la WCAG indica que un ratio de contraste de color 4.5:1 entre el texto y su fondo es adecuado para texto normal (cuerpo), y el texto grande (18+ pt regular, o 14+ pt en negrita) debe tener al menos un ratio de contraste de 3:1.

Características clave

Cálculo de relación de contraste en tiempo real
Verificación de cumplimiento WCAG AA & AAA
Deslizadores HSL para ajuste fino
Múltiples formatos de vista previa

Herramientas avanzadas

Corrección automática de color
Muestras de texto y fondo
Detección de nombre de color
Exportar resultados

Preguntas frecuentes

Para cumplir WCAG AA, el texto normal necesita una relación de contraste mínima de 4,5:1, mientras que el texto grande (18pt o 14pt en negrita) necesita 3:1.

WCAG AAA exige relaciones de contraste más altas: 7:1 para el texto normal y 4,5:1 para el texto grande, frente a 4,5:1 y 3:1 de AA respectivamente.

Usa nuestra función de corrección automática para ajustar el texto o el fondo sin perder la intención de tu diseño, o ajusta los colores a mano con los deslizadores HSL, que muestran con indicadores visuales las zonas óptimas para cumplir AA/AAA.

Las zonas verdes y los marcadores AA/AAA muestran los rangos óptimos para cumplir WCAG. Las pistas de dirección (Más claro/Más oscuro) te orientan hacia un mejor contraste según tu combinación de colores actual.

Sí, puedes introducir cualquier código hex de color o usar el selector de color para elegir colores propios. La URL se actualiza automáticamente para que puedas compartir combinaciones concretas.