ES
Deutsch
English
Français
ItalianoComprobador de contraste gratuito según WCAG 2.2
¿Su contraste es suficiente? Comprobado en un segundo.
El contraste insuficiente es el fallo de accesibilidad más frecuente. Pruebe aquí dos colores según WCAG 2.2, o escanee directamente todo su sitio en busca de problemas de contraste.
Así se ve su titular
Y así se lee un texto normal con esta combinación. ¿Pueden todos sus visitantes leerlo sin esfuerzo?
Medición automática según la fórmula WCAG, sin garantía. No sustituye ni una revisión manual por profesionales ni el asesoramiento jurídico.
Escanear todo el sitio en busca de fallos de contraste
Los pares de colores son el principio. El escaneo encuentra cada punto con contraste insuficiente en hasta 10 páginas, en escritorio y móvil, con los valores exactos.
Tarda unos dos minutos
Qué es el contraste de colores y por qué importa
El contraste decide si sus contenidos son legibles para todos sus visitantes. Y es uno de los pocos aspectos de la accesibilidad que se puede medir con exactitud.
El contraste de colores describe la diferencia de luminosidad entre dos colores, por ejemplo entre su texto y el fondo que hay detrás. Las Web Content Accessibility Guidelines (WCAG) lo miden como una relación de contraste en una escala de 1:1 (un color sobre el mismo color) a 21:1 (negro sobre blanco). El cálculo se basa en la luminancia relativa de ambos colores, es decir, en cómo de brillante percibe un color el ojo humano.
Por qué cuenta: millones de personas viven con una discapacidad visual, y alrededor del cuatro por ciento de la población tiene solo una deficiencia en la visión del color. A eso se suma la vida cotidiana, porque a partir de los cuarenta y tantos la sensibilidad al contraste del ojo disminuye de forma medible. Lo que a un ojo joven le parece elegante en un monitor calibrado, para muchos visitantes sencillamente ya no se puede descifrar.
Al mismo tiempo, el contraste insuficiente es el fallo de accesibilidad más frecuente de toda la web: grandes estudios como el WebAIM Million lo encuentran año tras año en unas cuatro de cada cinco páginas de inicio. La causa rara vez es mala voluntad, sino una tendencia de diseño: el texto gris claro sobre fondo blanco parece moderno y sereno, pero suspende con regularidad frente al listón de las WCAG.
Y por último, el contraste es una cuestión legal: la Ley Europea de Accesibilidad exige, a través de la norma europea EN 301 549, el cumplimiento de las WCAG en el nivel AA, incluidas las reglas de contraste. Para las empresas afectadas, un texto demasiado pálido ya no es un defecto estético, sino una infracción medible.
Qué significa la relación de contraste
Las WCAG miden el contraste como la relación entre la luminancia del texto y la del fondo, de 1:1 (sin contraste) a 21:1 (negro sobre blanco).
4,5:1 para texto normal (AA)
El nivel obligatorio para texto corriente según WCAG 1.4.3, y por tanto la referencia de la Ley Europea de Accesibilidad. El gris sobre blanco es lo que más falla.
3:1 para texto grande y UI (AA)
Desde 24 px (o 18,5 px en negrita) basta 3:1. La misma relación se aplica según WCAG 1.4.11 a componentes de interfaz: bordes de botones, iconos y campos de formulario.
7:1 para la máxima exigencia (AAA)
El nivel para personas con baja visión más severa. No es obligación legal, pero es un buen objetivo para textos importantes.
Lo que se suele olvidar
El contraste también aplica a texto sobre imágenes, placeholders de formularios, enlaces en el texto y el contorno de foco. Justo los puntos que encuentra el escaneo.
A quién excluye un contraste débil
Los fallos de contraste no afectan solo a un pequeño grupo marginal. Hacen que su web resulte agotadora o inutilizable para una parte sorprendentemente grande de sus visitantes.
Personas con baja visión
Cataratas, enfermedades de la retina o una fuerte ametropía reducen notablemente la sensibilidad al contraste. El texto pálido se funde entonces con el fondo.
Deficiencias en la visión del color
Aproximadamente uno de cada doce hombres apenas distingue el rojo del verde. Si un enlace solo se diferencia del texto por el tono, es invisible para estos visitantes.
Visitantes mayores
El cristalino se enturbia con los años y deja pasar menos luz. A partir de los 60, el ojo necesita varias veces más contraste que el de una persona de veinte.
Quien navega al aire libre
El sol sobre la pantalla del móvil convierte los contrastes débiles en un gris uniforme. Quien quiere comprar de camino y no puede leer nada, compra en otro sitio.
Usuarios de pantallas sencillas
Monitores antiguos, proyectores y paneles baratos muestran los colores más apagados que el MacBook del diseñador. Un contraste en el límite acaba allí siendo ilegible.
Cualquiera con cansancio
Por la noche, con poca luz o tras ocho horas de pantalla, el rendimiento de contraste de cualquier ojo baja. Un buen contraste es comodidad para todos, no solo una obligación para unos pocos.
Los cinco fallos de contraste más frecuentes
En miles de escaneos vemos una y otra vez los mismos patrones. Revise su web específicamente en estos cinco clásicos.
- 1
Texto gris claro sobre fondo blanco
El clásico eterno: un texto corriente en #999999 o más claro parece discreto, pero sobre blanco solo alcanza alrededor de 2,8:1 en lugar del 4,5:1 exigido. Fechas, pies de foto y textos del pie de página son los más afectados.
- 2
Placeholders en formularios
El texto de ejemplo gris dentro del campo es contenido real en cuanto es la única etiqueta. Los placeholders por defecto de muchos frameworks quedan muy por debajo de 4,5:1 y obligan a los visitantes a adivinar qué va en el campo.
- 3
Letra blanca sobre fotos y degradados
En la zona oscura de la imagen el contraste pasa; en la clara, ya no. Como las imágenes se desplazan según el ancho de pantalla, el texto sobre imágenes necesita un oscurecimiento o una superficie de color sólido detrás.
- 4
Enlaces que solo se distinguen por el color
Un enlace azul pálido dentro de un texto gris necesita 3:1 de contraste con el texto circundante y además una segunda señal, como el subrayado. Si no, muchos visitantes nunca encuentran sus destinos de clic más importantes.
- 5
Botones, iconos y contornos de foco pálidos
Desde WCAG 2.1, los componentes gráficos también necesitan 3:1: bordes de botones, contornos de campos, iconos y el marco que muestra a los usuarios de teclado dónde están. Justo los puntos que más se les escapan a las revisiones de diseño.
Mejorar el contraste sin sacrificar el diseño
Un contraste accesible no significa negro sobre blanco. Normalmente bastan pequeños ajustes selectivos.
Oscurecer los colores con precisión
A menudo solo falta un punto: un gris demasiado claro se convierte en #595959, el azul corporativo pálido recibe una variante más oscura para el texto. La paleta conserva su carácter, y el comprobador de arriba muestra al instante cuándo es suficiente.
Usar el tamaño de letra como palanca
El texto grande desde 24 px (o 18,5 px en negrita) solo necesita 3:1 en lugar de 4,5:1. Una letra algo mayor o más gruesa puede legalizar un color más claro, sobre todo en titulares sobre superficies de color.
No confiar nunca solo en el color
Subrayar los enlaces, marcar los errores también con icono y texto, no señalar los campos obligatorios solo en rojo. Donde existe una segunda señal, la comprensión ya no depende de la visión del color.
Comprobar todos los estados
Hover, foco, enlaces visitados y elementos desactivados tienen sus propios colores, que las guías de estilo suelen olvidar. Compruebe cada color de estado por separado; el escaneo los mide directamente en el estado renderizado.
Cómo comprobar bien su contraste
Cuatro pasos, del color individual al sitio permanentemente limpio.
- 1
Probar un par de colores
Introduzca arriba el color del texto y del fondo. La relación y todos los niveles WCAG se calculan al instante, con vista previa en vivo.
- 2
Escanear el sitio
El escaneo revisa hasta 10 páginas y encuentra cada punto con contraste insuficiente, con los valores medidos.
- 3
Corregir con el informe
El informe muestra cada elemento afectado con el valor actual y el requerido. Ajustar colores, volver a escanear, tachar de la lista.
- 4
Asegurar de forma duradera
Con la monitorización, su web se revisa periódicamente. Si en un rediseño se cuela un gris pálido, lo sabrá de inmediato.
El marco legal: del estándar a la obligación
Cuatro normativas se engranan y convierten una recomendación de diseño en un requisito legal.
WCAG 2.2
El estándar internacional del W3C. El criterio 1.4.3 exige 4,5:1 para texto normal (nivel AA), el 1.4.6 exige 7:1 (nivel AAA) y el 1.4.11 exige 3:1 para componentes de interfaz y gráficos.
EN 301 549
La norma europea para la informática accesible. Adopta las WCAG de nivel AA como referencia vinculante y es el patrón técnico detrás de toda la legislación europea de accesibilidad.
Ley Europea de Accesibilidad
La Directiva UE 2019/882, en vigor desde el 28 de junio de 2025 para muchas webs, tiendas y aplicaciones. Garantiza requisitos comparables en toda la UE: quien vende en Europa no puede esquivar el nivel AA en ningún sitio.
Transposiciones nacionales
Cada Estado miembro traspone la directiva, en España mediante la Ley 11/2023 con sanciones incluidas. El contraste es la infracción más fácil de demostrar: basta una sola medición.
¿Dónde está su web?
El escaneo gratuito mide cada contraste de su web y muestra a qué distancia está del nivel AA.
Qué puede hacer la medición automática y qué no
El escaneo mide con exactitud cada caso verificable por máquina: texto sobre fondos lisos, enlaces, botones, campos de formulario e iconos, cada uno con los valores de color realmente renderizados en escritorio y móvil. Eso cubre la gran mayoría de todos los fallos de contraste.
El texto sobre fotos, vídeos y degradados no puede evaluarse de forma inequívoca por una máquina, porque el fondo es distinto en cada punto. El informe marca esos lugares para revisión manual, de modo que nada cuente en silencio como aprobado cuando un ojo humano todavía debería mirarlo.
Una aclaración más: las valoraciones de esta página, por ejemplo sobre la Ley Europea de Accesibilidad, son primeras evaluaciones técnicas sin compromiso y no constituyen asesoramiento jurídico. Para afirmaciones vinculantes sobre sus obligaciones, consulte a un abogado.
Preguntas frecuentes sobre el contraste de colores
¿Qué relación de contraste exigen las WCAG?
Al menos 4,5:1 para texto normal y al menos 3:1 para texto grande (desde 24 px, o 18,5 px en negrita) según WCAG 1.4.3, nivel AA. Los componentes gráficos también necesitan 3:1 (WCAG 1.4.11). El nivel AAA exige 7:1 para texto normal.
¿Es obligatorio comprobar el contraste?
La Ley Europea de Accesibilidad remite a las reglas de contraste WCAG de nivel AA a través de la norma EN 301 549. Un contraste insuficiente es por tanto una infracción real para las empresas afectadas, y una de las más fáciles de medir.
¿Cómo se calcula la relación de contraste?
A partir de la luminancia relativa de ambos colores con la fórmula WCAG: (L1 + 0,05) / (L2 + 0,05), donde L1 es el color más claro. El comprobador de arriba usa exactamente este cálculo, el mismo que las herramientas de las autoridades.
¿Qué cuenta como texto grande?
Según las WCAG, el texto a partir de 18 puntos (unos 24 px) cuenta como grande, y el texto en negrita ya desde 14 puntos (unos 18,5 px). Para el texto grande basta una relación de 3:1 en el nivel AA. Las dos filas de indicadores del comprobador de arriba muestran ambas evaluaciones en paralelo.
¿Hay excepciones al requisito de contraste?
Sí: los logotipos y nombres de marca, los textos y gráficos puramente decorativos y los elementos desactivados están exentos. Pero cuidado con los placeholders de los formularios: cuentan como contenido real y necesitan el 4,5:1 completo.
Mi diseño se ve bien, ¿no basta con eso?
Lo que parece legible a un diseñador con visión típica puede ser ilegible para personas con baja visión; alrededor del cuatro por ciento de la población tiene solo una deficiencia en la visión del color. Por eso cuenta la relación medible, no la impresión.
¿Ayuda un modo de contraste o un widget superpuesto?
Un modo de contraste activable es un buen complemento, pero no sustituye la obligación de que la vista por defecto cumpla el nivel AA. Las WCAG evalúan lo que todos los visitantes ven sin ningún clic adicional. Unos colores bien elegidos en el origen son siempre el primer paso.
¿El escaneo encuentra todos los problemas de contraste?
Encuentra todo lo medible automáticamente: texto sobre fondos lisos, enlaces, botones, campos de formulario. El texto sobre fotos o degradados necesita además un ojo humano, y el informe marca esos puntos para revisión manual.
Compruebe su contraste antes de que lo hagan sus clientes.
Pruebe un par de colores arriba, escanee su web y reciba un informe con los valores exactos. Gratis y sin instalar nada.
Al comprobador de contraste