Contraste de color y accesibilidad web: guía completa

Formarse » Cursos online gratis » Contraste de color y accesibilidad web: guía completa

Cuando diseñamos una web o trabajamos en el diseño y creación de sitios online solemos centrarnos en que sea bonita, moderna y alineada con la marca, pero muchas veces olvidamos algo esencial: que todo el mundo pueda leer y entender el contenido sin esfuerzo. Los colores corporativos, los degradados y los efectos pueden quedar espectaculares, pero si el contraste entre texto y fondo es pobre, gran parte de la audiencia tendrá problemas reales para usar el sitio.

Además, ya no es solo una cuestión de buena práctica: la accesibilidad digital es un requisito legal y una obligación ética. Normas como las WCAG 2.x y leyes como la Ley 11/2023 en España exigen que las páginas sean utilizables por personas con baja visión, daltonismo, dificultades cognitivas y otros tipos de discapacidad. En este contexto, entender bien el contraste de color, saber medirlo y aprender a mejorarlo se convierte en una pieza clave de cualquier proyecto web.

Contraste de color y accesibilidad web: por qué importa tanto

En una página típica nos encontramos con textos, botones, imágenes, iconos, formularios y muchos otros elementos visuales; si los colores no están bien escogidos, las personas con problemas de visión o con dificultades para diferenciar tonos similares pueden perderse completamente. Un texto gris claro sobre fondo blanco, por ejemplo, puede parecer elegante, pero para quien tiene baja agudeza visual es prácticamente invisible.

Cuando hablamos de accesibilidad web, nos referimos a que cualquier persona, independientemente de sus capacidades visuales, motoras o cognitivas, pueda usar la web de forma autónoma. Si el contraste es insuficiente, leer un párrafo, localizar un enlace o identificar el estado de un botón se vuelve una tarea agotadora o imposible.

Esto afecta especialmente a usuarios con discapacidad visual, daltonismo o sensibilidad al contraste, pero también a personas mayores o a quienes navegan en situaciones de poca calidad de pantalla, mucha luz ambiental o brillo mal configurado. Un buen contraste no solo ayuda a una minoría: mejora la experiencia global de toda la audiencia.

Además, hay que tener en cuenta que el contraste no es solo “blanco y negro”. La relación de contraste se basa en la diferencia de luminosidad percibida entre dos colores, independientemente de si son rojos, azules, verdes o cualquier otra combinación. Existen paletas muy coloridas que pueden ser perfectamente accesibles… y diseños “minimalistas” que, por irse a grises muy suaves, acaban siendo inusables.

Desde el punto de vista normativo, las pautas WCAG 2 definen criterios de conformidad que marcan qué niveles mínimos de contraste tienen que cumplir textos, iconos, bordes de inputs y otros componentes de interfaz. Esto se mide a través de una razón numérica (por ejemplo, 4.5:1 o 7:1) que indica la diferencia de luminosidad entre el primer plano y el fondo.

Qué es el contraste de color y cómo se mide

Cuando hablamos de contraste de color en accesibilidad, en realidad estamos hablando de relación de contraste de luminosidad entre un color de primer plano (texto, icono, borde) y un color de fondo. No se trata tanto de si el color es “bonito” o “feo”, sino de cuánta diferencia de brillo percibido hay entre ambos.

En la escala que utiliza WCAG, la relación mínima (1:1) se da cuando ambos colores son idénticos (por ejemplo, texto blanco sobre fondo blanco) y nadie puede leer nada. La máxima (21:1) corresponde a combinaciones como texto negro puro sobre fondo blanco puro, donde la diferencia de luminosidad es total.

Para evaluar esta relación no hace falta hacer fórmulas a mano: las herramientas de comprobación de contraste calculan automáticamente el ratio a partir de los valores de los colores (generalmente en formato hexadecimal o RGB). Tú solo indicas el color del texto y el del fondo, y la herramienta te devuelve el número de contraste y si cumple o no con WCAG para AA o AAA.

Es importante tener claro que el contraste no depende solo del color en sí, sino también del tamaño y del grosor del texto. Un texto pequeño requiere un contraste más alto que un texto grande en negrita para ser igual de legible. Por eso las pautas WCAG hacen distinciones específicas entre “texto normal” y “texto grande”.

Más allá de textos, las versiones más recientes de las pautas incluyen también requisitos de contraste para gráficos y componentes de interfaz de usuario, como iconos de estado, bordes de campos de formulario o indicadores visuales de error o éxito. No basta con que el párrafo principal se lea bien: los elementos que guían la interacción también deben destacar correctamente.

Pautas WCAG sobre contraste de color (AA y AAA)

Las Web Content Accessibility Guidelines (WCAG) son el marco de referencia internacional para accesibilidad web, y incluyen varios criterios de conformidad relacionados directamente con el contraste. Los niveles más habituales que se exigen son AA y AAA, siendo AAA el más exigente.

El criterio más conocido es el 1.4.3 Contraste (mínimo), que se centra en el texto y en las “imágenes de texto” (por ejemplo, rótulos dentro de una imagen). Este criterio exige que la relación de contraste entre texto e imagen de fondo sea:

• Al menos 4.5:1 para texto normal o pequeño.
• Al menos 3:1 para texto grande.

Se considera texto grande el que utiliza una fuente de 18pt (aprox. 24px CSS) o un texto en negrita de 14pt (aprox. 18.5px CSS). Todo lo que quede por debajo de esos tamaños se trata como texto normal y debe alcanzar el ratio de 4.5:1.

Este criterio tiene algunas excepciones importantes: el texto que forma parte de logotipos o marcas no tiene requisitos de contraste, y tampoco el texto puramente decorativo, inactivo o que no aporta información relevante. Un ejemplo típico serían fondos con texto ornamental que no transmite contenido clave.

Para quienes apuntan a un nivel de excelencia, está el criterio 1.4.6 Contraste (mejorado), propio del nivel AAA. Aquí la exigencia sube un peldaño:

• 7:1 para texto normal.
• 4.5:1 para texto grande o en negrita a gran tamaño.

Es el mismo planteamiento que el nivel AA, pero subiendo los mínimos. Esto hace que muchas combinaciones “modernas” y suaves dejen de ser válidas, y obliga a trabajar con paletas mucho más contrastadas si queremos llegar a AAA en todo el sitio.

Por otro lado, la versión más reciente de las pautas incluye el criterio 1.4.11 Contraste de contenido no textual. Aquí ya no se habla de texto, sino de:

• Componentes de interfaz de usuario (como bordes de inputs, botones, controles interactivos) y
• Objetos gráficos esenciales (por ejemplo, iconos de error/éxito que indican estados importantes).

En este caso, se exige que estos elementos tengan al menos un contraste de 3:1 respecto a los colores adyacentes. Por “color adyacente” se entiende el que está pegado al elemento por al menos un píxel, como el borde de un campo de texto sobre el fondo de la página.

Si, por ejemplo, un campo de formulario tiene un borde azul oscuro (#181F2C) sobre fondo blanco (#FFFFFF), el contraste entre ambos colores será muy alto (en torno a 16.5:1), por lo que ese componente pasaría sin problema una auditoría AA. En cambio, un icono SVG que combine verdes y grises muy claros puede quedarse por debajo de 3:1 en la mayoría de sus pares de colores y, por tanto, no cumplir con 1.4.11.

Contraste de luminosidad y problemas habituales

Un porcentaje nada despreciable de la población tiene algún tipo de dificultad para percibir bien los colores: desde distintos tipos de daltonismo hasta cegueras parciales que reducen el espectro de color visible. A esto hay que sumar usuarios con baja visión, personas mayores o simplemente pantallas con brillo o contraste mal configurados.

Por este motivo, las pautas insisten en que el contraste de luminosidad entre el color del texto y el color del fondo debe ser suficiente para garantizar la legibilidad incluso en situaciones desfavorables: mucha luz ambiental, dispositivos de baja calidad, cristales con reflejos, etc. Cuanto mayor sea el contraste, más fácil será leer en casi cualquier contexto.

En la práctica, las WCAG recomiendan que, al menos en nivel AA, los textos menores de 18pt tengan una razón de contraste de 4.5:1 y los textos de 18pt o más (o equivalentes en negrita) alcancen 3:1. Esto encaja con la idea general de que con textos pequeños hay que ser más exigentes, ya que cualquier bajada de contraste se nota mucho más.

En muchos casos, la solución más sencilla pasa por usar texto negro sobre fondo blanco o casi blanco, o texto muy oscuro sobre fondos muy claros. Combinaciones como gris oscuro sobre blanco roto o tonos sepia sobre beige claro suelen ofrecer un buen equilibrio entre contraste y comodidad visual.

En el lado contrario, encontramos combinaciones desastrosas: texto claro sobre fondo claro, texto oscuro sobre fondo muy oscuro o fondos degradados con cambios bruscos de tono. Estos casos complican la lectura y pueden hacer que partes completas del contenido sean inaccesibles, especialmente cuando se superpone texto sobre imágenes complejas o degradados irregulares.

Herramientas para comprobar el contraste de color

Para no ir “a ojo” (que suele fallar estrepitosamente), lo más sensato es utilizar herramientas de comprobación de contraste que calculen automáticamente el ratio entre dos colores y te digan si cumple AA o AAA. Hay varias opciones muy útiles y gratuitas.

Una de las más populares es el Contrast Checker de WebAIM. Su funcionamiento es muy sencillo: introduces el color de primer plano y el de fondo (por ejemplo, en formato hexadecimal), y la herramienta te muestra la relación de contraste exacta y si pasa los requisitos de WCAG para texto normal, texto grande e incluso gráficos. Además, suele indicar claramente si estás en nivel AA o AAA.

Otra opción muy utilizada es el Color Contrast Analyzer del antiguo The Paciello Group. Esta herramienta permite ver en tiempo real una previsualización del texto con los colores elegidos, ajustar brillo y saturación, e incluso simular distintos tipos de daltonismo para comprobar cómo ven los colores las personas con estas condiciones.

También existe Contrast-Finder, una herramienta pensada para diseñadores, desarrolladores y especialistas en accesibilidad que, además de evaluar si un contraste es suficiente, propone colores alternativos válidos cuando la combinación original no cumple. Lo interesante es que puede:

• Proponer colores muy cercanos al original (algoritmo por defecto), manteniendo en lo posible la identidad visual.
• Ofrecer un rango más amplio de colores aceptables cuando la primera opción no encuentra resultados, aunque se alejen más del diseño inicial.

Contrast-Finder trabaja con colores definidos en formatos habituales: palabras clave CSS, valores hexadecimales (#AABBCC, #ABC) o RGB (rgb(255,255,255) o la forma abreviada 255,255,255). Permite elegir qué color quieres modificar (texto o fondo), fijar el ratio mínimo (3, 4.5 o 7) según nivel AA o AAA y ajustar las opciones de búsqueda hasta encontrar combinaciones viables.

Por último, encontramos herramientas de paleta como Adobe Color o la paleta de accesibilidad de Tanaguru, que no solo calculan el contraste entre colores, sino que indican si una combinación concreta cumple las normas de accesibilidad. Estas son especialmente útiles en la fase de diseño, cuando estás definiendo toda la paleta de marca y quieres asegurarte de que habrá suficientes parejas texto/fondo válidas.

Cómo usar Contrast-Finder paso a paso

La interfaz de Contrast-Finder está basada en un formulario con varios campos clave, orientado a que puedas introducir tus colores actuales y obtener alternativas accesibles sin complicarte la vida. Su lógica es sencilla, pero muy potente para ajustar paletas corporativas.

El primer campo es el color del texto o primer plano. Aquí puedes introducir un nombre de color CSS (p. ej., «Black», «YellowGreen»), un valor hexadecimal (#AABBCC o ABC) o un valor RGB completo (rgb(255,255,255) o 255,255,255). La herramienta hace una previsualización a la derecha para que veas rápidamente cómo queda.

El segundo campo es el color de fondo, que funciona exactamente igual que el del texto. De nuevo, admite palabras clave CSS, hexadecimales o RGB, y también muestra una previsualización del color seleccionado, lo que facilita comprobar que estás usando el tono correcto.

Después debes especificar el ratio mínimo de contraste que quieres alcanzar. Aquí se ofrecen tres valores:

• 3 (para muchos casos de texto grande y componentes de interfaz – nivel AA).
• 4.5 (texto normal en nivel AA y texto grande en AAA).
• 7 (texto normal en nivel AAA).

La elección de este ratio depende de qué nivel de accesibilidad quieres cumplir (AA o AAA), del tamaño del texto y de si está en negrita. Por ejemplo, para nivel AA:

• Texto sin negrita y tamaño menor de 24px → ratio 4.5.
• Texto sin negrita y tamaño igual o mayor de 24px → ratio 3.
• Texto en negrita y tamaño menor de 19px → ratio 4.5.
• Texto en negrita y tamaño igual o mayor de 19px → ratio 3.

En AAA la lógica es la misma, pero los valores se incrementan: donde antes era 4.5 ahora se exige 7, y donde antes era 3 se pide 4.5. En cuanto a tamaños, las WCAG dan equivalencias como 19px ≈ 14pt ≈ 1.2em y 24px ≈ 18pt ≈ 1.5em, aunque conviene revisar la definición de “texto de gran tamaño” en la propia especificación para casos más complejos.

Otro campo importante es “color a editar”, que indica si quieres que la herramienta modifique el color del texto o el del fondo. El color que selecciones se irá ajustando hasta encontrar una variante que alcance el ratio mínimo deseado, mientras que el otro se mantiene fijo para respetar lo máximo posible el diseño original.

Finalmente, puedes elegir entre dos algoritmos de sugerencias: uno que busca “colores válidos y muy cercanos al color inicial”, ideal para cambios sutiles, y otro que genera “un rango de colores válidos”, útil cuando el primero no encuentra ninguna combinación que cumpla el contraste mínimo requerido.

Comprobadores de contraste y herramientas del navegador

Más allá de las herramientas específicas, los propios navegadores incluyen recursos muy útiles para revisar el contraste sobre la marcha en páginas reales, tanto durante el desarrollo como en la fase de auditoría.

Por ejemplo, los DevTools de Firefox disponen de un inspector de accesibilidad que permite analizar elementos de la página y comprobar si su contraste es adecuado. Puedes seleccionar un párrafo, un botón o un enlace y ver directamente si la combinación de color texto/fondo cumple AA o AAA, además de otros posibles problemas de accesibilidad.

Este tipo de herramientas es ideal para detectar fallos de contraste que se nos pasan por alto, como enlaces con poco contraste dentro de bloques de texto, iconos de estado apenas visibles o bordes de formularios demasiado claros. Al trabajar con el inspector, puedes probar cambios en caliente y ver qué ajustes de color serían necesarios para cumplir con las pautas.

Además, en herramientas como el Color Contrast Checker de WebAIM se recomienda aprovechar funciones como el cuentagotas (eyedropper) del selector de color, que permite extraer los valores exactos de cualquier elemento que veas en pantalla. Así, aunque no tengas el código fuente, puedes copiar el color real del diseño, medirlo y decidir si hay que cambiarlo.

En algunos casos, también se ofrecen utilidades adicionales como comprobadores de contraste para enlaces identificados solo por color, o integraciones con herramientas más amplias (como WAVE) que analizan toda la página y resaltan, de un vistazo, dónde hay problemas de contraste por resolver.

Consejos prácticos para mejorar el contraste en tu web

Si estás empezando un diseño desde cero, estás en el mejor momento para elegir una paleta de colores que combine identidad de marca y accesibilidad. Corregir esto después es posible, pero siempre resulta más costoso y limitado.

Lo ideal es partir de la guía de marca y comprobar con un contrast checker si tus colores corporativos principales admiten buenas combinaciones texto/fondo. Si algún color clave no llega a los ratios mínimos, valora reservarlo solo para acentos decorativos (bordes sutiles, iconitos pequeños, fondos decorativos sin texto encima) y no para texto principal.

Evita siempre que puedas poner texto directamente sobre imágenes complejas. Si no hay más remedio (por ejemplo, en una hero con foto), usa trucos como:

• Añadir un overlay de color semiopaco por encima de la imagen (negro con opacidad, por ejemplo) y encima el texto en blanco.
• Aplicar sombras de texto suaves que refuercen el contorno sin caer en efectos exagerados.
• Limitar el área donde se puede mostrar texto para que siempre coincida con una parte homogénea de la imagen.

Ten en cuenta también que un tamaño de texto mayor y un peso en negrita ayudan a compensar pequeños déficits de contraste. Si por branding tienes que usar un color de texto algo más claro, subir ligeramente el tamaño o usar negrita en los elementos clave puede marcar la diferencia, siempre y cuando sigas cumpliendo los ratios mínimos que establece la norma.

Otro consejo de experiencia: aunque blanco puro (#FFFFFF) sobre negro puro (#000000) ofrece el máximo contraste (21:1), un contraste tan extremo puede resultar cansado para la vista en sesiones largas. A menudo es mejor moverse en tonos ligeramente apagados, como un blanco roto y un gris muy oscuro, manteniendo el contraste necesario pero reduciendo el impacto visual.

Mejorar el contraste a posteriori: modos de alto contraste y preferencias

En muchos proyectos ya en producción, cambiar toda la paleta a nivel global no es viable. En estos casos, una estrategia muy útil es añadir funciones que permitan al propio usuario ajustar el contraste según sus necesidades y preferencias.

Una de las opciones más directas es ofrecer temas o modos de contraste. Por ejemplo, un modo estándar y un modo de alto contraste con:

• Fondos más claros u oscuros.
• Textos más oscuros o claros según el caso.
• Botones y enlaces con colores mucho más marcados.

Estos modos se pueden activar mediante un interruptor visible en la interfaz, normalmente en la cabecera o en un panel de accesibilidad. A nivel técnico, se puede gestionar con clases en el <body> y hojas de estilo alternativas o mediante variables CSS en el desarrollo web moderno.

Otra posibilidad es ofrecer controles visuales para ajustar contraste, tamaño del texto o incluso la paleta base. Por ejemplo, sliders o selectores simples que cambian las variables CSS de color. Eso sí, hay que asegurarse de que las combinaciones resultantes sigan respetando las pautas mínimas de accesibilidad y no rompan el diseño.

No hay que olvidar que muchos navegadores y sistemas operativos ya incluyen funciones de accesibilidad integradas, como modo de alto contraste, inversión de colores o tamaño de fuente global. Puedes informar de estas opciones en una página de ayuda y asegurarte de que tu CSS no bloquee ni contradiga esas configuraciones.

En cuanto al almacenamiento de preferencias, puedes guardar el modo de contraste elegido mediante cookies o a través de localStorage en el navegador, para que la web recuerde la opción la próxima vez que el usuario la visite. Cada vez más proyectos optan por usar localStorage para alinearse con tendencias como el movimiento «cookieless» y reducir la dependencia de cookies no esenciales.

Uso del color más allá del contraste: semántica, movimiento y tamaño de texto

El color no solo sirve para dar estilo: muchas veces lo usamos para transmitir información (“verde = correcto, rojo = error”) y ahí es donde pueden aparecer grandes problemas de accesibilidad si se depende únicamente del color. Una persona ciega, por ejemplo, nunca sabrá qué es “lo que está en verde”.

La recomendación general es que nunca se use solo el color para codificar información importante. Si marcas las respuestas correctas en un test en verde, acompáñalo con un símbolo, texto o etiqueta adicional. Por ejemplo, en lugar de “la respuesta correcta está en verde”, podrías indicar “las respuestas correctas están marcadas con una X”, de manera que el lector de pantalla pueda transmitir esta información.

En gráficos, diagramas o tablas, intenta que cada categoría se identifique no solo por color, sino también por patrones, diferentes tipos de subrayado, iconos, texto alternativo o leyendas claras. Así, alguien con dificultades para distinguir colores similares no se perderá el significado de la visualización.

Otra cuestión importante es el uso de movimiento, parpadeos y destellos. Elementos que parpadean más de tres veces por segundo o animaciones muy agresivas pueden provocar molestias serias, llegando incluso a desencadenar ataques en personas con epilepsia fotosensible. Además, animaciones constantes pueden dificultar la concentración de usuarios con TDAH u otros trastornos cognitivos.

Por eso se recomienda evitar imágenes parpadeantes, GIFs demasiado rápidos o banners animados persistentes, o al menos limitar su duración a unos pocos segundos (por ejemplo, menos de 5) y ofrecer un mecanismo claro para pausarlos, detenerlos u ocultarlos si el usuario lo desea.

En paralelo al contraste, el tamaño del texto es otro factor crítico de accesibilidad. Las WCAG contemplan un criterio que exige que el contenido siga siendo legible y funcional cuando el usuario amplía el texto hasta un 200 % sin pérdida significativa de información o funcionalidad. Esto se consigue, sobre todo, usando unidades relativas como em, rem o porcentajes en lugar de píxeles fijos.

Trabajar con tamaños relativos también implica revisar el diseño: conviene que los contenedores, anchos máximos (max-width) y rejillas se ajusten en función del contenido textual. De lo contrario, al aumentar el tamaño de fuente se pueden romper maquetas, solaparse bloques o provocar scroll horizontal innecesario.

Obtener y probar colores en otros contextos (documentos, Office, Word)

La preocupación por el contraste no se limita a las páginas web; folletos, carteles, PDFs, presentaciones y documentos de oficina también deben ser legibles, sobre todo cuando están destinados al público general o a entornos educativos y administrativos.

En el caso de documentos creados con Microsoft Word, por ejemplo, los colores se expresan de forma nativa en formato RGB (Red, Green, Blue). Para comprobar el contraste de un color usado en un texto o fondo, puedes:

1. Seleccionar la pestaña Inicio en la cinta de opciones.
2. Abrir las opciones de color de fuente.
3. Elegir “Más colores…”.
4. Ir a la pestaña “Personalizado”.
5. Anotar los valores numéricos de Rojo, Verde y Azul (RGB) que se muestran.

Con estos datos, puedes introducir el color en cualquier comprobador de contraste online (en formato rgb(…)), indicando también el color de fondo del documento, y verificar si se alcanza el ratio mínimo de 4.5 o 3 según el tamaño del texto. Esto es muy útil para folletos impresos o PDFs que se publican en webs o intranets.

Al diseñar materiales como cartelería, trípticos o informes, recuerda que los fondos degradados, tramas o patrones complejos pueden perjudicar seriamente la legibilidad, especialmente cuando hay texto encima. Siempre que sea posible, opta por zonas de color sólido bien contrastado para el contenido textual y restringe los efectos decorativos a áreas donde no haya información clave.

Al prestar atención al contraste de color, al tamaño del texto, a la forma en que usamos el color para transmitir información y al control del movimiento, podemos transformar cualquier web en un entorno mucho más inclusivo y fácil de usar. Ajustar unos cuantos colores, revisar tamaños y ofrecer opciones de personalización no solo ayuda a cumplir la normativa, sino que también mejora la experiencia de todos los usuarios y refuerza la imagen de una marca comprometida con la accesibilidad y la diversidad.