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

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:
{{CriterioWCAG
|id_wcag_criterio=1.4.11
|id_wcag_subcriterio=1.4.11-A
|wcag_titulo_criterio=1.4.11-A. Contraste en componentes y gráficos
|wcag_nivel=AA
|wcag_version=2.2
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.4_Distinguible
|wcag_pauta_url=Principio_1/1.4_Distinguible
|wcag_grupo=Contraste
|wcag_subgrupo=Componentes_y_gráficos


== '''1.4.11-A. Se debe asegurar un ratio mínimo de contraste de al menos 3:1 en los colores adyacentes de:''' ==
|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>


* '''Componentes de la interfaz de usuario: la información visual necesaria para identificar los componentes de la interfaz de usuario y los estados.'''
|wcag_lista_discapacidades=
* '''Ojetos gráficos: todas las partes de los gráficos que sean necesarias para comprender el contenido'''
[[Categoría:Discapacidad baja visión]]
*
*
*


'''A) EJEMPLO ACCESIBLE:'''
|wcag_texto_criterioOAW=
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.


'''B) EJEMPLO NO ACCESIBLE:'''
 
|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><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G195 G195: Using an author-supplied, highly visible focus indicator]</span></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><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>
 
|wcag_recursos=
<strong> Consejos </strong>
<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=
Usa la herramienta  ‘’’[https://www.tpgi.com/color-contrast-checker/ Colour Contrast Analyser]’’’
 
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar todos los elementos visuales necesarios para la comprensión o interactuación, como por ejemplo:
<ul>
<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>
 
|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=
 
<div class="accessibility-card">
El borde del botón contrasta claramente con el fondo.
<pre class="wcag-codigo-html">
<button style="border:2px solid #000; background:#fff;">Enviar</button>
</pre>
</div>
 
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>'''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>'''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>
 
 
}}

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