Técnica General G14 de WCAG 2.1: Garantizar que la información transmitida por las diferencias de color también esté disponible en texto

Jano Llorca Lis

El color es un elemento clave en el diseño web, pero no debe ser el único medio para transmitir información importante. Muchas personas con discapacidad visual, daltonismo o que utilizan lectores de pantalla pueden no percibir las diferencias de color de la misma manera que otros usuarios.

La Técnica G14 de WCAG 2.1 garantiza que la información transmitida por el color también esté disponible en formato de texto, cumpliendo con el criterio de éxito 1.4.1 (Uso del color). Esto mejora la accesibilidad y permite que más usuarios comprendan el contenido de una página sin depender exclusivamente de elementos visuales.

Acerca de esta técnica

El objetivo de esta técnica es asegurar que cuando el color se utiliza para diferenciar o resaltar información importante, esa información también esté disponible en texto. Esto es crucial para que personas con ceguera, baja visión o daltonismo puedan interpretar correctamente la página.

Situaciones donde se debe aplicar:

Formularios que indican campos obligatorios con color rojo sin otra indicación.
Tablas o gráficos donde el color es el único medio de diferenciación.
Calendarios o horarios donde los eventos están codificados por color.
Botones de acción que solo usan color para indicar sus funciones (ejemplo: verde para avanzar, rojo para cancelar).

Ejemplos

Ejemplo incorrecto 1: Campos de formulario obligatorios solo indicados con color rojo

<label for="nombre" style="color: red;">Nombre:</label>
<input type="text" id="nombre">

🔴 Problema:

Las personas con daltonismo o ceguera no percibirán que el campo es obligatorio.
Los lectores de pantalla no anuncian colores, por lo que no hay información audible.

Solución correcta: Agregar un texto adicional para indicar el campo obligatorio

<label for="nombre">Nombre: <span style="color: red;">(Obligatorio)</span></label>
<input type="text" id="nombre" required>

✅ ¿Qué mejora?:

Se añade texto descriptivo que indica claramente que el campo es obligatorio.
El campo usa el atributo required, lo que ayuda a tecnologías de asistencia.

Ejemplo incorrecto 2: Uso exclusivo del color en una tabla de horarios

<table>
  <tr>
    <th>Sesión</th>
    <th>Horario</th>
  </tr>
  <tr style="background-color: blue;">
    <td>Desarrollo Web</td>
    <td>10:00 - 11:00</td>
  </tr>
  <tr style="background-color: yellow;">
    <td>Diseño UX</td>
    <td>11:30 - 12:30</td>
  </tr>
</table>

🔴 Problema:

Los usuarios con daltonismo pueden no distinguir los colores.
No hay texto que indique a qué categoría pertenece cada sesión.

Solución correcta: Agregar texto junto al color

<table>
  <tr>
    <th>Sesión</th>
    <th>Horario</th>
    <th>Tipo</th>
  </tr>
  <tr style="background-color: blue;">
    <td>Desarrollo Web</td>
    <td>10:00 - 11:00</td>
    <td>🔹 Track 1</td>
  </tr>
  <tr style="background-color: yellow;">
    <td>Diseño UX</td>
    <td>11:30 - 12:30</td>
    <td>🟡 Track 2</td>
  </tr>
</table>

✅ ¿Qué mejora?:

Se incluye un texto descriptivo junto a un ícono para reforzar la información.
Facilita la identificación de la información sin depender del color.

Errores comunes y cómo evitarlos

Errores frecuentes:

Usar solo el color para destacar información importante.
No proporcionar un texto alternativo o un patrón adicional.
No verificar la accesibilidad del contenido con herramientas de prueba.

Cómo evitar estos errores:

Usar siempre texto adicional para indicar la información relevante.
Añadir patrones, iconos o etiquetas junto con los colores.
Probar la accesibilidad con herramientas como Color Contrast Analyzer o el modo daltónico de navegadores.

Preguntas frecuentes sobre la técnica general G14

¿Es obligatorio eliminar el uso del color?

No, el color se puede usar, pero debe ir acompañado de texto u otros elementos visuales.

¿Qué alternativas existen al uso exclusivo del color?

Símbolos o iconos (✔, ❌, ⚠️).
Texto adicional que describa el significado del color.
Diferencias de forma o subrayado en enlaces.

¿Cómo afecta esto a los usuarios con daltonismo?

Les permite comprender la información sin depender de la percepción del color.

¿Cómo probar si mi contenido cumple con la Técnica G14?

Puedes usar herramientas como:

Toptal Colorblind Web Page Filter.
WebAIM Color Contrast Checker.

Recursos relacionados

Pruebas y validación de la técnica

Procedimiento

Identificar elementos donde el color transmite información.
Verificar que la información también esté en texto.
Confirmar que el texto no sea condicional (como tooltips o contenido oculto).

Resultados esperados

✅ Si el color no es el único medio para transmitir información, la implementación es correcta.
❌ Si el contenido depende exclusivamente del color, la técnica no está correctamente aplicada.

Asegurar que la información no dependa exclusivamente del color mejora la accesibilidad y la experiencia de todos los usuarios. Aplicar la Técnica G14 hace que tu contenido sea más inclusivo y fácil de comprender para personas con discapacidad visual o daltonismo.

📢 ¡Si necesitas ayuda con la accesibilidad de tu sitio web, contáctanos!

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.