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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 3 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.4.1-C. En las imágenes no se debe emplear el color como único medio visual para transmitir información.''' ==
{{CriterioWCAG
'''A) EJEMPLO ACCESIBLE:'''
|id_wcag_criterio=1.4.1
|id_wcag_subcriterio=1.4.1-C
|wcag_titulo_criterio=1.4.1-C. Evitar el color como único recurso en imágenes
|wcag_nivel=A
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.4_Distinguible
|wcag_pauta_url=Principio_1/1.4_Distinguible
|wcag_grupo=Presentación
|wcag_subgrupo=Uso_del_color


'''B) EJEMPLO NO ACCESIBLE:'''
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]
 
|wcag_texto_criterioOAW=
En las imágenes no se debe emplear el color como único medio visual para transmitir información.
 
|wcag_descripcion_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.
 
|wcag_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.
 
|wcag_importancia=
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.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G111 G111: Using color and pattern]</span></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><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>
 
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<li>Usar patrones, texturas o formas distintas además del color.</li>
<li>Asegurar que la información basada en color también está disponible en texto.</li>
<li>Verificar que el texto alternativo de la imagen refleja diferencias clave.</li>
<li>Simular la visualización en monocromo o modo daltónico.</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar todas las imágenes de la página que utilizan el color para transmitir una información.
</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>
 
|wcag_resultado_evaluacion=
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.
 
|wcag_ejemplo_evaluacion=
 
<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">
<!-- Gráfica donde cada barra tiene color y un patrón -->
</pre>
<p>Las barras se diferencian por color y patrón (rayas, puntos, cuadrícula).</p>
</div>
 
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>'''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>
 
}}

Revisión actual - 12:37 6 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=3705»