Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.11-A»

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.11-A. Contraste en componentes y gráficos''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=1.4.11
   Análisis interno:
|id_wcag_subcriterio=1.4.11-A
   Este criterio impacta principalmente a: Personas con baja visión
|wcag_titulo_criterio=1.4.11-A. Contraste en componentes y gráficos
   Problema grave: Si los elementos visuales como botones, iconos y gráficos tienen contraste insuficiente, los usuarios con baja visión no podrán identificarlos correctamente, provocando barreras graves para la interacción.
|wcag_nivel=AA
-->
|wcag_version=2.2
<html>
|wcag_principio=1_Perceptible
<!-- criterio 1.4.11-A -->
|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=Contraste
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
|wcag_subgrupo=Componentes_y_gráficos
      <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>
|wcag_discapacidades=
      <li><span class="label">Pauta:</span><span class="value">1.4 Facilitar ver y escuchar contenido</span></li>
<li class="discapacidad-item">
      <li><span class="label">Categoría:</span><span class="value">Contraste</span></li>
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
      <li><span class="label">Subcategoría:</span><span class="value">Componentes y gráficos</span></li>
   <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
    </ul>
   <span class="gravedad gravedad-grave">Barrera grave</span>
  </section>
</li>
  <section class="wcag-users">
 
    <p>Usuarios más afectados</p>
|wcag_lista_discapacidades=
    <ul>
[[Categoría:Discapacidad 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>
 
    </ul>
|wcag_texto_criterioOAW=
  </section>
La presentación visual de los siguientes elementos tiene una ratio de contraste de al menos 3:1 con los colores adyacentes:
</article>
* Componentes de la interfaz de usuario: información visual necesaria para identificar los componentes y los estados, excepto en los componentes inactivos o cuando la apariencia la determina el agente de usuario y no la modifica el autor.
</html>
* Objetos gráficos: partes de los gráficos necesarias para comprender el contenido, excepto cuando una presentación concreta es esencial para la información que se transmite.
 
|wcag_descripcion_resumida=
Los componentes de interfaz (botones, iconos, campos de formulario, indicadores de foco) y las partes esenciales de gráficos deben tener contraste mínimo de 3:1 frente al color de fondo o colores adyacentes para ser perceptibles.
 
|wcag_objetivo=
Facilitar la identificación clara de componentes interactivos y gráficos esenciales a personas con baja visión, garantizando que puedan localizar y comprender elementos interactivos y visuales.
 
|wcag_importancia=
Sin contraste suficiente, elementos como botones, iconos, estados activos o partes clave de gráficos pueden pasar desapercibidos, afectando la interacción y el acceso a la información visual.
 
|wcag_referencias=
<ul>
<li>G207: Contraste mínimo de 3:1 para iconos</li>
<li>G209: Contraste en límites entre colores contiguos</li>
<li>G195: Indicador de foco visible proporcionado por el autor</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Verificar contraste mínimo de 3:1 en iconos, botones y bordes de campos.</li>
<li>Proporcionar indicadores de foco claramente visibles.</li>
<li>Asegurar contraste suficiente en gráficos relevantes (líneas, marcadores, sectores).</li>
<li>Evitar estados inactivos de bajo contraste si son relevantes para el usuario.</li>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar componentes interactivos y gráficos esenciales.</li>
<li><span class="paso-badge">Paso 2.</span> Comprobar contraste entre borde/icono/elemento y el fondo adyacente.</li>
<li><span class="paso-badge">Paso 3.</span> Verificar contraste del indicador de foco y estados activos.</li>
<li><span class="paso-badge">Paso 4.</span> Confirmar ratio ≥ 3:1 con herramienta de contraste.</li>
</ol>
 
|wcag_resultado_evaluacion=
Elementos de interfaz y gráficos esenciales presentan contraste mínimo de 3:1 con el fondo o colores contiguos.
 
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
<div class="accessibility-card">
<pre class="wcag-codigo-html">
<button style="border:2px solid #000; background:#fff;">Enviar</button>
</pre>
<p>El borde del botón contrasta claramente con el fondo.</p>
</div>
 
Ejemplo no accesible:
<div class="accessibility-card-error">
<pre class="wcag-codigo-html">
<button style="border:1px solid #ccc; background:#eee;">Enviar</button>
</pre>
<p>Bajo contraste entre borde y fondo, difícil de percibir.</p>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Colour Contrast Analyser</li>
<li>Contrast Checker WCAG</li>
<li>Herramientas del navegador</li>
</ul>
}}

Revisión del 19:05 4 nov 2025

1.4.11-A. Contraste en componentes y gráficos

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)

  • La presentación visual de los siguientes elementos tiene una ratio de contraste de al menos 3:1 con los colores adyacentes:
    • Componentes de la interfaz de usuario: información visual necesaria para identificar los componentes y los estados, excepto en los componentes inactivos o cuando la apariencia la determina el agente de usuario y no la modifica el autor.
    • Objetos gráficos: partes de los gráficos necesarias para comprender el contenido, excepto cuando una presentación concreta es esencial para la información que se transmite.

Comprensión del criterio

Descripción resumida

Los componentes de interfaz (botones, iconos, campos de formulario, indicadores de foco) y las partes esenciales de gráficos deben tener contraste mínimo de 3:1 frente al color de fondo o colores adyacentes para ser perceptibles.

Objetivo

Facilitar la identificación clara de componentes interactivos y gráficos esenciales a personas con baja visión, garantizando que puedan localizar y comprender elementos interactivos y visuales.

Importancia de cumplir el criterio

Sin contraste suficiente, elementos como botones, iconos, estados activos o partes clave de gráficos pueden pasar desapercibidos, afectando la interacción y el acceso a la información visual.

Referencias WCAG

  • G207: Contraste mínimo de 3:1 para iconos
  • G209: Contraste en límites entre colores contiguos
  • G195: Indicador de foco visible proporcionado por el autor

Recursos de apoyo

  • Verificar contraste mínimo de 3:1 en iconos, botones y bordes de campos.
  • Proporcionar indicadores de foco claramente visibles.
  • Asegurar contraste suficiente en gráficos relevantes (líneas, marcadores, sectores).
  • Evitar estados inactivos de bajo contraste si son relevantes para el usuario.

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Paso 1. Identificar componentes interactivos y gráficos esenciales.
  2. Paso 2. Comprobar contraste entre borde/icono/elemento y el fondo adyacente.
  3. Paso 3. Verificar contraste del indicador de foco y estados activos.
  4. Paso 4. Confirmar ratio ≥ 3:1 con herramienta de contraste.

Resultado esperado

Elementos de interfaz y gráficos esenciales presentan contraste mínimo de 3:1 con el fondo o colores contiguos.

Ejemplo

Ejemplo accesible: 
<button style="border:2px solid #000; background:#fff;">Enviar</button>

El borde del botón contrasta claramente con el fondo.

Ejemplo no accesible: 

<button style="border:1px solid #ccc; background:#eee;">Enviar</button>

Bajo contraste entre borde y fondo, difícil de percibir.

Otras herramientas de evaluación

  • Colour Contrast Analyser
  • Contrast Checker WCAG
  • Herramientas del navegador










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.11-A. Contraste en componentes y gráficos

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.11-A&oldid=3345»