Cómo comprobar el contraste de dos colores
- Elige el color del texto en Text (foreground) color, pulsa la muestra de color para seleccionarlo visualmente, o escribe/pega un código hexadecimal como
#767676(la almohadilla#es opcional y también funciona la forma corta de 3 dígitos, comof0a). - Elige el color de fondo en Background color igual. El ratio de contraste, los distintivos de aprobado/suspenso y la vista previa se actualizan según escribes.
- Lee los cuatro distintivos: AA Normal, AA Large, AAA Normal y AAA Large. En verde significa que el par cumple ese requisito; en rojo, que no.
- ¿No pasa? Elige tu objetivo en el desplegable Suggest colors that meet y la herramienta lista los colores más cercanos que sí pasan, pulsa Apply en cualquiera para cargarlo directamente en el comprobador.
- Usa ⇄ Swap para intercambiar los dos colores (útil para revisar la variante en modo oscuro) o Copy results para pegar el informe completo en una tarea o una revisión de diseño.
Todo se ejecuta localmente en tu navegador: sin subidas, sin cuenta y sin ida y vuelta al servidor.
Por qué el contraste importa más de lo que parece
El texto con poco contraste es el fallo de accesibilidad más común de la web. Las auditorías automáticas del millón de páginas de inicio más visitadas lo encuentran en la gran mayoría de sitios, año tras año, normalmente texto gris claro sobre blanco, o un color de marca usado en los enlaces que se ve bien en el monitor calibrado del diseñador y desaparece por completo en la pantalla de un portátil al aire libre.
Las personas afectadas no son un caso minoritario. Alrededor de uno de cada doce hombres tiene algún tipo de deficiencia en la visión del color, y un grupo mucho mayor, cualquiera a partir de los cuarenta y tantos, cualquiera con cataratas, cualquiera leyendo en el móvil bajo el sol, tiene la sensibilidad al contraste reducida. El texto que no llega a 4,5:1 no se vuelve ilegible para ellos: se vuelve cansado, y el texto cansado se salta.
Además tiene una vertiente comercial directa. El nivel AA de WCAG 2.1 es el estándar recogido en la Ley Europea de Accesibilidad, en la norma EN 301 549 y en la mayoría de cuestionarios de proveedores de grandes empresas. Si tu producto lo compra una administración, una universidad o una gran compañía, alguien comprobará el contraste antes de firmar el contrato. Hacerlo tú primero sale mucho más barato.
Cómo leer los números
El ratio de contraste es un único número entre 1:1 (dos colores idénticos) y 21:1 (negro puro sobre blanco puro). Los umbrales que importan:
- 3:1, AA para texto grande, y también el mínimo para elementos no textuales como iconos, bordes de formulario e indicadores de foco.
- 4,5:1, AA para texto normal. Es la cifra a la que se refieren casi todos los requisitos de cumplimiento cuando dicen “WCAG AA”.
- 7:1, AAA para texto normal. Merece la pena apuntar aquí en lecturas largas: artículos, documentación, cualquier cosa que el usuario mire diez minutos seguidos.
Un punto de referencia útil: el gris más claro que aún supera 4,5:1 sobre blanco es #767676, y el más claro que aún supera 7:1 es #595959. Si el texto de tus párrafos es más claro que esos, no pasa.
Corregir un par que falla sin arruinar el diseño
La objeción habitual a corregir el contraste es que estropea el diseño, que “accesible” significa negro sobre blanco. No es así. Como el contraste depende casi por completo de la luminosidad, casi siempre puedes conservar el tono exacto de tu marca y limitarte a oscurecerlo o aclararlo un poco. Eso es justo lo que hace la lista de sugerencias: mantiene fijos tono y saturación y busca la luminosidad más cercana que pasa, de modo que #4a9be0 se convierte en un azul algo más profundo, no en otro color.
También sugiere mover el fondo en lugar del texto, que a menudo es la mejor opción: oscurecer un panel de color pálido un pequeño porcentaje es invisible para todo el mundo excepto para la auditoría.
Usos habituales
- Revisar texto, enlaces y etiquetas de botón contra la paleta de tu marca antes de publicar un sistema de diseño.
- Verificar la variante en modo oscuro (usa Swap para intercambiar un par claro y volver a comprobarlo).
- Elegir colores de texto accesibles para una paleta creada con el Generador de Paletas de Colores.
- Convertir el color de marca de un cliente de RGB o HSL a hexadecimal con el Conversor de Colores y comprobarlo aquí.
- Extraer un color de una captura con el Selector de Color de Imagen y comprobar si el texto de la web real realmente pasa.
- Documentar una corrección de accesibilidad en una tarea de Jira, el botón Copy results da un resumen listo para pegar.
