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 23: Línea 23:


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
La presentación visual de los siguientes elementos tiene una ratio de contraste de al menos 3:1 con los colores adyacentes:
Se debe asegurar un ratio mínimo de contraste de al menos 3:1 en los colores adyacentes de:
* 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.
* '''Componentes de la interfaz de usuario:''' la información visual necesaria para identificar los componentes de la interfaz de usuario y los estados.
* 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.
* '''Objetos gráficos:''' todas las partes de los gráficos que sean necesarias para comprender el contenido.
 


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 38: Línea 39:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>G207: Contraste mínimo de 3:1 para iconos</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G195 G195: Using an author-supplied, highly visible focus indicator]</span></li>
<li>G209: Contraste en límites entre colores contiguos</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G174 G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast]</span></li>
<li>G195: Indicador de foco visible proporcionado por el autor</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G207 G207: Ensuring that a contrast ratio of 3:1 is provided for icons]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G209 G209: Provide sufficient contrast at the boundaries between adjoining colors]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Verificar contraste mínimo de 3:1 en iconos, botones y bordes de campos.</li>
<li>Verificar contraste mínimo de 3:1 en iconos, botones y bordes de campos.</li>
Línea 54: Línea 57:


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta  ‘’’[https://www.tpgi.com/color-contrast-checker/ Colour Contrast Analyser]’’’
<ol class="paso-list">
<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 1.</span>
<li><span class="paso-badge">Paso 2.</span> Comprobar contraste entre borde/icono/elemento y el fondo adyacente.</li>
Localizar todos los elementos visuales necesarios para la comprensión o interactuación, como por ejemplo:
<li><span class="paso-badge">Paso 3.</span> Verificar contraste del indicador de foco y estados activos.</li>
<ul>
<li><span class="paso-badge">Paso 4.</span> Confirmar ratio ≥ 3:1 con herramienta de contraste.</li>
<li>a. Componentes de interfaz de usuario como botones o campos de formulario.</li>
<li>b. Objetos gráficos como iconos (cuando representen funcionalidades esenciales), diagramas o gráficas.</li>
<li>c. Indicador del foco de los elementos.</li>
</ul>
</li>
 
<li><span class="paso-badge">Paso 2.</span>
Comprobar que presentan un contraste de al menos <strong>3:1</strong> con los colores adyacentes.
<ul>
<li>a. Con el icono de <strong>“Foreground colour”</strong>, seleccionar el color principal (por ejemplo: fondo de un botón, borde de un campo de formulario, línea de una gráfica…).</li>
<li>b. Pulsar en el icono de <strong>“Background colour”</strong> y seleccionar el color adyacente (p. ej., fondo de la página, fondo de otro componente…).</li>
<li>c. Comprobar que el <strong>“Contrast ratio”</strong> indicado junto a <strong>“WCAG 2.1 results”</strong> es superior a <strong>3:1</strong>.</li>
</ul>
</li>
</ol>
</ol>


Línea 65: Línea 83:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
 
<div class="accessibility-card">
<div class="accessibility-card">
El borde del botón contrasta claramente con el fondo.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<button style="border:2px solid #000; background:#fff;">Enviar</button>
<button style="border:2px solid #000; background:#fff;">Enviar</button>
</pre>
</pre>
<p>El borde del botón contrasta claramente con el fondo.</p>
</div>
</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=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Colour Contrast Analyser</li>
<li>'''Revisión visual''': comprobar si bordes, iconos, estados de controles (p. ej. foco, hover, seleccionado) y elementos gráficos son claramente distinguibles del fondo.</li>
<li>Contrast Checker WCAG</li>
<li>'''Medición de contraste''': utilizar herramientas como Colour Contrast Analyser, WebAIM Contrast Checker o Chrome DevTools para confirmar una relación mínima de 3:1 para componentes interactivos y gráficos esenciales.</li>
<li>Herramientas del navegador</li>
<li>'''Inspección del navegador''': verificar colores definidos en CSS para elementos de interfaz como botones, enlaces, campos de formulario, iconos, y estados activos o de foco.</li>
<li>'''Pruebas de accesibilidad visual''': activar filtros de baja visión o simuladores (daltonismo, contraste reducido) para garantizar que los componentes siguen siendo reconocibles.</li>
</ul>
</ul>
}}
}}

Revisión del 10:43 5 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)

  • Se debe asegurar un ratio mínimo de contraste de al menos 3:1 en los colores adyacentes de:
    • Componentes de la interfaz de usuario: la información visual necesaria para identificar los componentes de la interfaz de usuario y los estados.
    • Objetos gráficos: todas las partes de los gráficos que sean necesarias para comprender el contenido.

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

Recursos de apoyo

Consejos
  • 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

Usa la herramienta ‘’’Colour Contrast Analyser’’’
  1. Paso 1. Localizar todos los elementos visuales necesarios para la comprensión o interactuación, como por ejemplo:
    • a. Componentes de interfaz de usuario como botones o campos de formulario.
    • b. Objetos gráficos como iconos (cuando representen funcionalidades esenciales), diagramas o gráficas.
    • c. Indicador del foco de los elementos.
  2. Paso 2. Comprobar que presentan un contraste de al menos 3:1 con los colores adyacentes.
    • a. Con el icono de “Foreground colour”, seleccionar el color principal (por ejemplo: fondo de un botón, borde de un campo de formulario, línea de una gráfica…).
    • b. Pulsar en el icono de “Background colour” y seleccionar el color adyacente (p. ej., fondo de la página, fondo de otro componente…).
    • c. Comprobar que el “Contrast ratio” indicado junto a “WCAG 2.1 results” es superior a 3:1.

Resultado esperado

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

Ejemplo

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

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

Otras herramientas de evaluación

  • Revisión visual: comprobar si bordes, iconos, estados de controles (p. ej. foco, hover, seleccionado) y elementos gráficos son claramente distinguibles del fondo.
  • Medición de contraste: utilizar herramientas como Colour Contrast Analyser, WebAIM Contrast Checker o Chrome DevTools para confirmar una relación mínima de 3:1 para componentes interactivos y gráficos esenciales.
  • Inspección del navegador: verificar colores definidos en CSS para elementos de interfaz como botones, enlaces, campos de formulario, iconos, y estados activos o de foco.
  • Pruebas de accesibilidad visual: activar filtros de baja visión o simuladores (daltonismo, contraste reducido) para garantizar que los componentes siguen siendo reconocibles.










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