Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.1-C»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 4: Línea 4:
|wcag_titulo_criterio=1.4.1-C. Evitar el color como único recurso en imágenes
|wcag_titulo_criterio=1.4.1-C. Evitar el color como único recurso en imágenes
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
Línea 44: Línea 44:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>G111: Uso de color y patrones</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G111 G111: Using color and pattern]</span></li>
<li>G14: Información por color también disponible en texto</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G14 G14: Ensuring that information conveyed by color differences is also available in text]</span></li>
<li>F13: Fallo cuando el texto alternativo no incluye la información basada en color</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F13 F13: Failure due to a text alternative not including information conveyed by color differences in the image]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Usar patrones, texturas o formas distintas además del color.</li>
<li>Usar patrones, texturas o formas distintas además del color.</li>
Línea 57: Línea 58:
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar imágenes donde el color transmite información.</li>
<li><span class="paso-badge">Paso 1.</span>  
<li><span class="paso-badge">Paso 2.</span> Comprobar que existen pistas adicionales (patrones, formas, iconos, bordes…)</li>
Localizar todas las imágenes de la página que utilizan el color para transmitir una información.
<li><span class="paso-badge">Paso 3.</span> Revisar que el texto alternativo incluye la información diferenciada por color.</li>
</li>
<li><span class="paso-badge">Paso 2.</span>  
Verificar que esta información está disponible mediante algún mecanismo visual adicional que no se base en el color.
</li>
<li><span class="paso-badge">Paso 3.</span>  
Verificar que en el texto alternativo de las imágenes se incluye la misma información que se trasmite mediante el color.
</li>
</ol>
</ol>


Línea 70: Línea 77:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
 
<div class="accessibility-card">
<div class="accessibility-card">
Se muestra un gréfico y se indican patrones para que sea posible identificar a qué corresponde cada dato.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<!-- Gráfica donde cada barra tiene color y un patrón -->
<!-- Gráfica donde cada barra tiene color y un patrón -->
Línea 78: Línea 86:
</div>
</div>


Ejemplo no accesible:
<div class="accessibility-card-error">
<pre class="wcag-codigo-html">
<!-- Gráfica donde solo cambia el color de las barras -->
</pre>
<p>Las barras solo se diferencian por color.</p>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Inspector del navegador</li>
<li>'''Revisión visual''': comprobar que las imágenes que transmiten información (gráficos, diagramas, mapas, leyendas) no dependen solo del color; deben incluir etiquetas, patrones, texto o formas para diferenciar elementos.</li>
<li>Simuladores de daltonismo (Chrome DevTools / Stark)</li>
<li>'''Inspección del navegador''': revisar el código para verificar que existen descripciones textuales o alternativas que explican la información transmitida en la imagen.</li>
<li>'''Simulación de daltonismo''': usar herramientas del navegador (Chrome DevTools, Edge, Firefox) o extensiones de accesibilidad para simular visión con alteración de color y confirmar que la información sigue siendo comprensible.</li>
<li>'''Pruebas con lectores de pantalla''': (NVDA, JAWS, VoiceOver) comprobar que la descripción textual alternativa permite comprender la información sin necesidad de percibir el color.</li>
</ul>
</ul>
}}
}}

Revisión del 10:01 5 nov 2025

1.4.1-C. Evitar el color como único recurso en imágenes

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • En las imágenes no se debe emplear el color como único medio visual para transmitir información.

Comprensión del criterio

Descripción resumida

Si una imagen utiliza colores para diferenciar información (gráficas, diagramas, mapas, iconos…), también debe aportar señales adicionales como texto, patrones, formas, bordes o iconos. Esto asegura que las personas con dificultades para percibir colores puedan comprender el contenido.

Objetivo

Garantizar que la información contenida en imágenes sea accesible para usuarios con daltonismo o baja percepción del color, así como para quienes visualizan contenidos en entornos monocromos o con alto contraste.

Importancia de cumplir el criterio

Si la información depende únicamente del color, muchas personas no podrán interpretarla correctamente. Patrones, formas, etiquetado y otros elementos redundantes evitan la pérdida de significado.

Referencias WCAG

Recursos de apoyo

Consejos
  • Usar patrones, texturas o formas distintas además del color.
  • Asegurar que la información basada en color también está disponible en texto.
  • Verificar que el texto alternativo de la imagen refleja diferencias clave.
  • Simular la visualización en monocromo o modo daltónico.

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar todas las imágenes de la página que utilizan el color para transmitir una información.
  2. Paso 2. Verificar que esta información está disponible mediante algún mecanismo visual adicional que no se base en el color.
  3. Paso 3. Verificar que en el texto alternativo de las imágenes se incluye la misma información que se trasmite mediante el color.

Resultado esperado

La información visual transmitida por color en imágenes también se ofrece mediante señales adicionales, garantizando su comprensión en ausencia de percepción cromática.

Ejemplo

Se muestra un gréfico y se indican patrones para que sea posible identificar a qué corresponde cada dato. 

<!-- Gráfica donde cada barra tiene color y un patrón -->

Las barras se diferencian por color y patrón (rayas, puntos, cuadrícula).

Otras herramientas de evaluación

  • Revisión visual: comprobar que las imágenes que transmiten información (gráficos, diagramas, mapas, leyendas) no dependen solo del color; deben incluir etiquetas, patrones, texto o formas para diferenciar elementos.
  • Inspección del navegador: revisar el código para verificar que existen descripciones textuales o alternativas que explican la información transmitida en la imagen.
  • Simulación de daltonismo: usar herramientas del navegador (Chrome DevTools, Edge, Firefox) o extensiones de accesibilidad para simular visión con alteración de color y confirmar que la información sigue siendo comprensible.
  • Pruebas con lectores de pantalla: (NVDA, JAWS, VoiceOver) comprobar que la descripción textual alternativa permite comprender la información sin necesidad de percibir el color.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.1-C. Evitar el color como único recurso en imágenes

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.1-C&oldid=3439»