Verificador de Contraste de Colores
Comprueba la relación de contraste WCAG entre dos colores y descubre si superan los niveles de accesibilidad AA y AAA.
Texto de ejemplo grande
El texto de ejemplo pequeño muestra qué tan legible queda el cuerpo de texto con este contraste.
Comprueba el contraste entre cualquier color de texto y de fondo con este verificador de contraste de colores WCAG gratuito. Elige o pega dos colores hex y observa al instante la relación de contraste y si la combinación supera los niveles AA y AAA de la WCAG 2.1 tanto para texto normal como grande. Una vista previa en vivo muestra texto de ejemplo real con tus colores, y todo se calcula en tu navegador: sin registro y sin subir nada.
¿Qué es un verificador de contraste de colores?
Un verificador de contraste de colores mide cuánto resalta un color de texto sobre su fondo y presenta el resultado como una relación de contraste. Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen relaciones desde 1:1 (sin contraste) hasta 21:1 (negro sobre blanco) y fijan umbrales mínimos para que el texto siga siendo legible para personas con baja visión o daltonismo. Esta herramienta calcula la relación a partir de la luminancia relativa de cada color y te indica qué niveles de accesibilidad cumple la combinación.
Cómo comprobar el contraste de colores
Establece los colores del texto y del fondo y lee los resultados, que se actualizan en vivo a medida que cambias cualquiera de los colores.
- Elige un color de texto con la muestra o escribe un valor hex como #1f2937.
- Elige un color de fondo del mismo modo, por ejemplo #ffffff.
- Lee la relación de contraste y las insignias de aprobado o reprobado para AA y AAA.
- Usa Intercambiar colores para probar la combinación inversa al instante.
- Ajusta cualquier color hasta alcanzar el nivel que necesites.
Requisitos de contraste WCAG AA y AAA
La WCAG define dos niveles de conformidad. Para el nivel AA, el texto normal necesita una relación de contraste de al menos 4,5:1 y el texto grande de al menos 3:1. Para el nivel AAA, más estricto, el texto normal necesita al menos 7:1 y el texto grande al menos 4,5:1. Texto grande significa aproximadamente 18pt (24px) en peso normal o 14pt (18,66px) en negrita o mayor. Apunta al AA como base y al AAA cuando puedas para lograr interfaces más legibles y accesibles.
¿Por qué usar este verificador de contraste de colores?
- Muestra la relación de contraste WCAG exacta para dos colores cualesquiera.
- Insignias de aprobado/reprobado para AA y AAA, texto normal y grande.
- La vista previa en vivo renderiza texto de ejemplo con tus colores.
- Selectores de color y campos hex, con intercambio en un clic.
- 100% gratis, sin anuncios, registro ni límites.
- Funciona por completo en tu navegador: tus colores nunca salen de tu dispositivo.
Preguntas frecuentes
¿Cuál es una buena relación de contraste?
Apunta a al menos 4,5:1 para el texto del cuerpo y 3:1 para el texto grande para cumplir el nivel AA de la WCAG, que es la base legal y de diseño más habitual. Para el nivel AAA, más estricto, busca 7:1 para el texto normal y 4,5:1 para el texto grande. Las relaciones más altas siempre son más legibles, con el negro puro sobre blanco alcanzando el máximo de 21:1.
¿Cómo se calcula la relación de contraste?
La relación usa la fórmula de la WCAG (L1 + 0,05) / (L2 + 0,05), donde L1 y L2 son la luminancia relativa del color más claro y del más oscuro. La luminancia relativa se calcula a partir de los canales rojo, verde y azul con corrección gamma, ponderados en 0,2126, 0,7152 y 0,0722. Esta herramienta hace todo ese cálculo por ti automáticamente.
¿Qué cuenta como texto grande?
La WCAG define el texto grande como aproximadamente 18pt (24px) o mayor en peso normal, o 14pt (alrededor de 18,66px) o mayor en negrita. El texto grande tiene un requisito de contraste menor (3:1 para AA, 4,5:1 para AAA) porque las letras más grandes son más fáciles de leer con menos contraste.
¿Funcionan los códigos hex abreviados?
Sí. Puedes introducir abreviaturas de tres dígitos como #abc o hex completo de seis dígitos como #aabbcc, con o sin el # inicial. La abreviatura se expande automáticamente antes de calcular el contraste.
¿Comprueba la transparencia o la opacidad?
No. El contraste se mide entre dos colores sólidos. Si tu texto o fondo usa transparencia, primero determina el color efectivo que se muestra sobre su fondo y luego introduce aquí ese valor hex sólido.