Verificador de contraste de color
Comprueba el contraste entre el color del texto y el fondo según WCAG 2.1 AA y AAA — con la relación de contraste al instante, vista previa en vivo y distintivos de aprobado/reprobado.
Colores
4.48:1Cuanto más alta, mejor. WCAG exige al menos 4,5:1 para texto normal.Aa texto normal — el veloz zorro marrón
Aa texto grande
Acerca de esta herramienta
Este verificador de contraste de color mide qué tan legible es el texto sobre su fondo usando la fórmula de contraste de WCAG 2.1. Introduce un color de texto y un color de fondo como valores HEX, o elígelos visualmente, y mostrará al instante la relación de contraste (por ejemplo 4,52:1) junto con distintivos de aprobado o reprobado para los niveles AA y AAA de las Pautas de Accesibilidad para el Contenido Web. Una vista previa en vivo muestra texto de ejemplo con tus colores para que juzgues el resultado de un vistazo, y un botón de intercambio invierte el primer plano y el fondo. Todo funciona en tu navegador, por lo que es rápido, privado y funciona sin conexión una vez cargado: ideal para diseñadores, desarrolladores y cualquiera que cree interfaces accesibles.
Cómo usarlo
- 1 Introduce el color de tu texto (primer plano) como valor HEX o elígelo con el selector.
- 2 Introduce el color de fondo de la misma forma; se admiten #rgb y #rrggbb.
- 3 Lee la relación de contraste y los distintivos AA/AAA para texto normal y grande.
- 4 Usa el botón de intercambio y ajusta hasta alcanzar al menos 4,5:1.
Cómo funciona
Cada color se convierte primero de sRGB a luz lineal: cada canal se divide entre 255 y los valores por encima de 0,03928 se elevan a una curva gamma. La luminancia relativa es entonces L = 0,2126·R + 0,7152·G + 0,0722·B, dando más peso al verde porque el ojo es más sensible a él. La relación de contraste entre dos colores es (L1 + 0,05) / (L2 + 0,05), donde L1 es el color más claro y L2 el más oscuro. Esto da un valor de 1:1 (colores idénticos) hasta 21:1 (negro puro sobre blanco puro). WCAG 2.1 exige una relación de al menos 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA, que sube a 7:1 y 4,5:1 en AAA. Texto grande significa aproximadamente 18,66px en negrita o 24px normal en adelante.
Preguntas frecuentes
¿Qué relación de contraste necesito para cumplir WCAG?
Para el nivel AA de WCAG 2.1 necesitas al menos 4,5:1 para texto normal y 3:1 para texto grande. El nivel AAA es más estricto y exige 7:1 para texto normal y 4,5:1 para texto grande. La mayoría de los sitios apunta a AA como base legal y práctica.
¿Qué cuenta como texto grande?
WCAG define el texto grande como al menos 18,66px (unos 14pt) en negrita, o al menos 24px (unos 18pt) en cualquier grosor. El texto grande es más fácil de leer, por lo que se le permite un umbral de contraste menor (3:1 para AA, 4,5:1 para AAA).
¿Cómo se calcula la relación de contraste?
La luminancia relativa de cada color se calcula a partir de sus canales rojo, verde y azul linealizados (L = 0,2126R + 0,7152G + 0,0722B). La relación es entonces (más claro + 0,05) / (más oscuro + 0,05), con valores de 1:1 hasta 21:1 para negro sobre blanco.
¿Por qué el negro puro sobre blanco da 21:1?
El negro tiene una luminancia relativa de 0 y el blanco de 1. Al sustituir en (1 + 0,05) / (0 + 0,05) da 21, la relación de contraste máxima posible. Por eso #000000 sobre #ffffff cumple todos los niveles WCAG.
¿El contraste de color afecta al SEO y a la ley de accesibilidad?
Sí. El contraste suficiente forma parte de los estándares de accesibilidad a los que hacen referencia leyes como la ADA, la Sección 508 y la Ley Europea de Accesibilidad, y una buena legibilidad mejora las métricas de usabilidad. Cumplir WCAG AA reduce el riesgo legal y hace que tu contenido sea usable para personas con baja visión o deficiencias de color.
Herramientas y usos relacionados
Un verificador de contraste es esencial para un diseño web y de apps accesible. Combínalo con el conversor de color para pasar entre HEX, RGB y HSL mientras ajustas tu paleta, y con la calculadora de porcentajes al escalar espaciados u opacidad. Diseñadores, desarrolladores front-end y creadores de contenido lo usan para que botones, etiquetas y texto del cuerpo sigan siendo legibles para todos.