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 1: Línea 1:
== '''1.4.1-C. Evitar el color como único recurso en imágenes''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=1.4.1
  Análisis interno:
|id_wcag_subcriterio=1.4.1-C
  Este criterio impacta principalmente a: Personas con discapacidad visual total y baja visión 
|wcag_titulo_criterio=1.4.1-C. Evitar el color como único recurso en imágenes
  Problema grave: Si las imágenes transmiten información solo mediante color, los usuarios con baja visión o daltonismo no podrán interpretarlas correctamente, provocando barreras de comprensión. 
|wcag_nivel=A
-->
|wcag_version=2.2
<html>
|wcag_principio=1_Perceptible
<!-- criterio 1.4.1-C -->
|wcag_principio_url=Principio_1
<article class="wcag-card">
|wcag_pauta=1.4_Facilitar_ver_y_escuchar_contenido
  <section class="wcag-info">
|wcag_pauta_url=Principio_1/1.4_Facilitar_ver_y_escuchar_contenido
    <ul>
|wcag_grupo=Presentación
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_subgrupo=Uso_del_color
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.4 Facilitar ver y escuchar contenido</span></li>
      <li><span class="label">Categoría:</span><span class="value">Presentación</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Uso del color</span></li>
    </ul>
  </section>


  <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera grave</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></li>
  <span class="gravedad gravedad-grave">Barrera grave</span>
    </ul>
</li>
  </section>
<li class="discapacidad-item">
</article>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
</html>
  <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>G111: Uso de color y patrones</li>
<li>G14: Información por color también disponible en texto</li>
<li>F13: Fallo cuando el texto alternativo no incluye la información basada en color</li>
</ul>
 
|wcag_recursos=
<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=Comprobación manual
 
|wcag_pasos_evaluacion=
<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 2.</span> Comprobar que existen pistas adicionales (patrones, formas, iconos, bordes…)</li>
<li><span class="paso-badge">Paso 3.</span> Revisar que el texto alternativo incluye la información diferenciada por 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=
Ejemplo accesible:
<div class="accessibility-card">
<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>
 
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=
<ul>
<li>Inspector del navegador</li>
<li>Simuladores de daltonismo (Chrome DevTools / Stark)</li>
</ul>
}}

Revisión del 18:56 4 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

  • G111: Uso de color y patrones
  • G14: Información por color también disponible en texto
  • F13: Fallo cuando el texto alternativo no incluye la información basada en color

Recursos de apoyo

  • 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 Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Identificar imágenes donde el color transmite información.
  2. Paso 2. Comprobar que existen pistas adicionales (patrones, formas, iconos, bordes…)
  3. Paso 3. Revisar que el texto alternativo incluye la información diferenciada por 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

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

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

Ejemplo no accesible: 

<!-- Gráfica donde solo cambia el color de las barras -->

Las barras solo se diferencian por color.

Otras herramientas de evaluación

  • Inspector del navegador
  • Simuladores de daltonismo (Chrome DevTools / Stark)










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=3338»