Comprobador de contraste de color

Acerca del comprobador de contraste de color

Este comprobador de contraste de color gratuito mide la relación de contraste entre un color de texto y un color de fondo, y le indica si cumple WCAG AA y AAA para texto normal y texto grande.

Funciona en su navegador: no se sube nada.

Qué significa la relación

La relación de contraste compara la luminancia relativa de dos colores —cuánta luz emite o refleja cada uno— en una escala que va de 1:1 a 21:1.

• 1:1: colores idénticos, el texto es invisible
• 21:1: negro puro sobre blanco puro, el máximo posible
• 4.5:1: el mínimo para el texto corrido según WCAG AA

El detalle importante es que el cálculo usa la luminancia, no lo distintos que parezcan los colores. Dos colores pueden resultar muy diferentes a la vista y aun así no pasar. Rojo sobre verde es el ejemplo clásico: visualmente llamativo, de luminancia casi idéntica y prácticamente ilegible para mucha gente.

Por eso también no puede juzgar el contraste a ojo. Quienes diseñan trabajan en buenos monitores, con luz controlada y ojos jóvenes, y el gris claro que parece elegante en el estudio desaparece en un teléfono a pleno sol.

Los umbrales

WCAG fija dos niveles, y el requisito depende del tamaño del texto.

Nivel AA: el objetivo habitual, y el que citan la mayoría de las leyes de accesibilidad:

• 4.5:1 para texto normal
• 3:1 para texto grande
• 3:1 para componentes de interfaz y gráficos con significado

Nivel AAA: un estándar más estricto, apropiado para contenidos dirigidos a personas con baja visión:

• 7:1 para texto normal
• 4.5:1 para texto grande

Texto grande significa 18pt (24px) o mayor, o 14pt (18.66px) en negrita o mayor. Las letras más grandes tienen trazos más gruesos, así que sobreviven a un contraste menor.

AA es el objetivo realista para la mayoría de los sitios. AAA es difícil de alcanzar en un diseño completo y no se espera para contenido general.

Por qué esto afecta a mucha más gente de la que cree

Es fácil archivar el contraste como «caso extremo». Las cifras dicen lo contrario.

Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen alguna forma de deficiencia en la visión del color: unos 300 millones de personas en todo el mundo. La rojo-verde es con diferencia la más común.

Casi todo el mundo a partir de los 40 experimenta un declive en la sensibilidad al contraste, y el cristalino del ojo amarillea con la edad, lo que altera la percepción de los azules.

Todo el mundo, a veces. Los fallos de contraste afectan a personas con visión perfecta que leen al aire libre, con la pantalla atenuada, en un monitor barato o a través de una pantalla de teléfono manchada en el autobús. Aquí las mejoras de accesibilidad son sencillamente mejoras de legibilidad para todos.

También hay una dimensión legal. El nivel WCAG 2.1 AA es referenciado en la práctica por la Americans with Disabilities Act, por la Section 508 en la contratación federal estadounidense, por la European Accessibility Act y por normas equivalentes en el Reino Unido, Canadá y Australia. El contraste está entre los incumplimientos citados con más frecuencia en las quejas de accesibilidad, en buena medida porque es muy fácil de medir.

Dónde suelen fallar los diseños

• Texto de marcador de posición en gris claro en los campos de formulario: extremadamente habitual y casi siempre insuficiente
• Texto blanco sobre una fotografía: la relación cambia a lo largo de la imagen; añada una capa superpuesta o un velo oscuro
• Colores de marca usados como texto: un azul o un naranja corporativo de tono medio sobre blanco suele quedarse cerca de 3:1
• Estados desactivados: exentos del requisito, pero conviene mantenerlos legibles igualmente
• Enlaces distinguidos solo por el color: si un enlace tiene la misma claridad que el texto que lo rodea, subráyelo
• Texto blanco sobre amarillo, o gris sobre gris: los culpables de siempre
• Modo oscuro: blanco puro sobre negro puro es técnicamente 21:1, pero provoca halación; los colores ligeramente suavizados se leen mejor
• Mensajes de error en rojo sobre fondo blanco: a menudo por debajo de 4.5:1 justo en el mensaje que más importa

Arreglar una pareja que no pasa

Cuando una combinación no pasa, cambie la luminosidad en lugar del tono. Normalmente puede mantener reconocible un color de marca mientras lo oscurece o aclara lo suficiente para que apruebe.

Enfoques prácticos:

Reserve el color de marca para elementos grandes: titulares, botones, iconos, donde el umbral es 3:1, y use una variante más oscura para el texto corrido.

Ajuste solo un lado. Oscurecer el texto suele ser menos disruptivo que cambiar el fondo.

Sobre imágenes, añada un velo: una capa oscura semitransparente entre la foto y el texto. Garantiza la relación sea cual sea el contenido de la imagen.

No dependa solo del color para transmitir significado. Añada un icono, una etiqueta o un subrayado, para que la información sobreviva para quien no puede distinguir los colores en absoluto.

Cómo usarlo

• Elija un color de texto y un color de fondo
• Vea la relación de contraste y las etiquetas de aprobado o suspenso AA / AAA
• Lea la vista previa en vivo para juzgarlo usted mismo y luego ajuste los colores

Conviene saber

• Pruebe los colores reales, incluida cualquier opacidad. Un texto al 70 % de opacidad es, en la práctica, otro color frente a su fondo.
• Compruebe ambos temas. Una paleta que aprueba en modo claro puede suspender en modo oscuro.
• Los logotipos están exentos del requisito de contraste, igual que el texto incidental y decorativo.
• Las tipografías finas necesitan más contraste en la práctica del que sugiere la relación. La norma no mide el grosor del trazo, pero sus lectores sí lo notan.
• Compruébelo en un teléfono a la luz del día si puede. Es una prueba más honesta que cualquier monitor.
• Aprobar es un suelo, no una meta. 4.5:1 es el mínimo aceptable, no el objetivo.

Preguntas frecuentes

¿Qué es una buena relación de contraste?

Para el texto corrido, al menos 4.5:1 para cumplir WCAG AA, el nivel al que se refieren la mayoría de las leyes de accesibilidad. El texto grande, es decir 18pt/24px o 14pt/18.66px en negrita y superiores, necesita 3:1. El nivel AAA, más estricto, pide 7:1 en texto normal. Trate estas cifras como mínimos y no como objetivos; la lectura cómoda suele situarse bastante por encima.

¿Cuál es la diferencia entre WCAG AA y AAA?

AA es el estándar práctico que adoptan la mayoría de las normativas y organizaciones, y exige 4.5:1 para texto normal y 3:1 para texto grande. AAA es más estricto, con 7:1 y 4.5:1, y está pensado para contenidos dirigidos específicamente a lectores con baja visión. AAA es difícil de lograr en un diseño completo y no se espera en sitios de propósito general.

¿Por qué mi combinación de colores no pasa si a mí me parece bien?

Porque el contraste se calcula a partir de la luminancia, no de lo diferentes que parezcan dos colores. El rojo y el verde se ven muy distintos pero tienen luminancias parecidas, y por eso esa pareja no pasa. El juicio personal tampoco es fiable: quienes diseñan suelen trabajar en buenas pantallas, con iluminación controlada y buena vista, unas condiciones que la mayoría de los lectores no comparte.

¿Importa el contraste en imágenes e iconos?

Sí. WCAG exige 3:1 para los componentes de interfaz y para los gráficos que transmiten significado, como los iconos que indican un estado o el borde de un campo de formulario. Las imágenes puramente decorativas y los logotipos están exentos. El texto colocado sobre una fotografía es el problema habitual, ya que la relación cambia a lo largo de la imagen; una capa semitransparente lo resuelve.

¿Cómo arreglo una pareja de colores que no pasa sin perder el color de marca?

Ajuste la luminosidad en lugar del tono. Una versión más oscura o más clara del mismo color suele seguir siendo reconocible como color de marca y a la vez superar el umbral. También puede conservar el original para titulares, botones e iconos, donde solo se exigen 3:1, y usar una variante más oscura para el texto corrido, donde se aplica 4.5:1.

¿Es negro puro sobre blanco puro la mejor opción?

Es el máximo, con 21:1, pero no necesariamente lo más cómodo. Un contraste muy alto puede provocar halación —un efecto de resplandor alrededor de las letras—, sobre todo en modo oscuro y en algunos lectores con dislexia o astigmatismo. Un gris muy oscuro sobre un blanco roto, o un blanco suavizado sobre un gris oscuro, suele leerse con más comodidad y aprueba igualmente con holgura.

¿Mis elecciones de color se envían a algún sitio?

No. La relación se calcula en su navegador a medida que elige los colores, así que no se transmite ni se guarda nada y la herramienta funciona sin conexión.

Herramientas relacionadas

• Selector de color: encuentre y convierta colores entre HEX, RGB y HSL
• Selector de color de imagen: extraiga un color de una imagen
• Paleta de colores a partir de una imagen: cree una paleta y luego pruébela aquí
• Generador de degradados CSS: compruebe el contraste del texto en ambos extremos de un degradado