PhotoCut Studio

Accesibilidad de color: contraste y daltonismo en diseño

Actualizado: julio de 2026 · Lectura: 7 minutos

Un diseño puede verse impecable para vos y ser ilegible o confuso para una parte de tu audiencia. Los dos problemas de color más comunes —y más fáciles de arreglar— son el contraste insuficiente y depender solo del color para dar información. Esta guía explica ambos sin tecnicismos y cómo revisarlos en un par de minutos.

1. Contraste: que el texto se lea

El contraste mide cuánto se diferencia el texto de su fondo. Se expresa como un ratio, de 1:1 (invisible) a 21:1 (negro sobre blanco). Las pautas de accesibilidad WCAG fijan mínimos:

El error típico es el texto gris claro sobre fondo blanco: se ve «elegante» pero mucha gente no lo lee. Antes de dar por buena una combinación, medí el ratio con un verificador de contraste: te dice si pasa AA/AAA para texto normal y grande.

2. Daltonismo: no dependas solo del color

Cerca del 8% de los hombres tiene algún tipo de daltonismo (y un porcentaje menor de mujeres). Los casos más comunes confunden el rojo y el verde. Eso rompe patrones que damos por obvios:

La regla de oro: el color nunca debería ser la única señal. Sumá siempre algo más —un ícono, una palabra, un patrón, distinto brillo— para que la información se entienda aunque no se perciba el color.

Cómo revisar tu diseño en 2 pasos

  1. Contraste: medí el texto contra su fondo con el verificador; que pase AA como mínimo.
  2. Daltonismo: simulá cómo se ve tu diseño con protanopía, deuteranopía, tritanopía y en escala de grises. Si algo deja de entenderse, esa información dependía solo del color.

Buenas prácticas rápidas

Todo en tu navegador

Tanto el verificador de contraste como el simulador de daltonismo funcionan localmente: subís una imagen o elegís colores y todo se procesa en tu equipo, sin subir nada.

Preguntas frecuentes

¿Qué es el contraste WCAG AA y AAA?

Un ratio de diferencia entre texto y fondo. Para texto normal, mínimo 4.5:1 (AA) o 7:1 (AAA); para texto grande, 3:1 (AA).

¿Por qué no debería usar solo el color para dar información?

Porque ~8% de los hombres tiene daltonismo. Sumá otra señal (ícono, texto, patrón) además del color.

¿Cómo reviso si mi diseño es accesible?

Medí el contraste (que pase AA) y simulá el daltonismo para confirmar que la info no depende solo del color.

¿La accesibilidad afecta el SEO o solo a los usuarios?

Ayuda a ambos: mejora la experiencia de todos y es una buena práctica valorada, pero el motivo principal es que más gente pueda usar lo que hacés.

Revisar la accesibilidad de mis colores →

Simulador de daltonismo

Mirá cómo ve tu imagen o diseño alguien con daltonismo y revisá la accesibilidad.

Cómo elegir una paleta de colores

Roles, escalas 50–900 y cómo derivar una paleta de una imagen.

Paleta de colores, HEX y contraste

Extraé colores de una imagen y verificá el contraste WCAG entre texto y fondo.