Comprobador de Contraste de Color
Comprueba la relación de contraste WCAG entre el texto y el fondo.
Esta herramienta se ejecuta completamente en tu navegador. Tus archivos nunca se suben a un servidor.
17.74:1
Contrast ratio
Pass
AA — normal text
Pass
AA — large text
Pass
AAA — normal text
Pass
AAA — large text
Qué hace este comprobador
Calcula el contraste de luminancia relativa WCAG entre un color de primer plano (texto) y un color de fondo, y muestra si esa proporción supera cada umbral de accesibilidad.
Cómo utilizarlo
Introduce los colores de primer plano y fondo como valores HEX de tres o seis dígitos. La proporción de contraste, una vista previa en vivo del par y los resultados de aprobado/no aprobado se actualizan al escribir.
Ejemplo resuelto
Un primer plano #767676 sobre un fondo blanco (#ffffff) da una proporción de contraste de unos 4,54:1 — aprueba AA para texto normal (necesita 4,5:1) y AA para texto grande, pero no llega a AAA normal (necesita 7:1).
Umbrales WCAG
La herramienta comprueba cuatro umbrales: AA texto normal 4,5:1, AA texto grande 3:1, AAA texto normal 7:1 y AAA texto grande 4,5:1. Texto grande significa 18pt o más, o 14pt en negrita.
Por qué importa el contraste
Un contraste suficiente mantiene el texto legible para usuarios con baja visión o deficiencias de visión del color, y cumplir estos umbrales es un requisito para sitios web conformes con WCAG.
Limitaciones
Esto solo comprueba los dos colores sRGB opacos que introduces — no examina tamaño o peso de fuente, transparencia, degradados, imágenes de fondo, estados de interacción ni el resto de tu página, así que trata un resultado aprobado como una comprobación, no como una auditoría completa.
Privacidad
El cálculo se ejecuta enteramente en tu navegador; los colores que introduces no se suben.
Preguntas Frecuentes
- ¿Qué relación de contraste necesito para WCAG AA?
- Al menos 4,5:1 para texto normal, o 3:1 para texto grande (18pt+ o 14pt+ en negrita).
- ¿Y para WCAG AAA?
- AAA es más estricto: 7:1 para texto normal y 4,5:1 para texto grande.
- ¿Por qué importa el contraste de accesibilidad?
- Un contraste suficiente hace que el texto sea legible para usuarios con baja visión o deficiencias de visión del color, y es obligatorio para sitios web conformes con WCAG.
Herramientas Relacionadas
Buscador de Nombre de Color
Encuentra el color con nombre más cercano para cualquier código hex.
Convertidor de Color CMYK
Convierte cualquier color hex o RGB a CMYK para impresión.
Generador de CSS de Degradado
Crea un degradado CSS de dos colores y copia el código al instante.
Generador de Colores Análogos
Genera un esquema de colores análogos armonioso a partir de cualquier color base.
Simulador de Daltonismo
Previsualiza cómo se ve un color con protanopia, deuteranopia o tritanopia.
Generador de Paletas de Colores
Genera una paleta aleatoria de 5 colores con un clic.