Criterios de Perceptible
PerceptiblePauta 1.4 Distinguible
1.4.11Contraste no textual
Nivel AALo exige la normativa (EN 301 549).
Qué pide
Los componentes de interfaz (bordes de campos, iconos, estados) y los gráficos tienen un contraste mínimo de 3:1.
A quién ayuda: Personas con baja visión.
Un caso real
Un formulario usa campos con un borde gris muy claro.
BienEl borde del campo tiene un contraste de 3:1 o más con el fondo.
MalLos campos casi no se distinguen del fondo.
Cómo aplicarlo en código
Bordes de campos y foco con 3:1
Los bordes que indican dónde está un control y el indicador de foco necesitan 3:1 contra el fondo.
input, select, textarea {
border: 1.5px solid #6b7280; /* sobre #ffffff: 4,8:1 */
}
:focus-visible {
outline: 3px solid #1747a6; /* sobre #ffffff: 8,4:1 */
outline-offset: 2px;
}input { border: 1px solid #e5e7eb; } /* sobre #ffffff: 1,2:1 */Cómo comprobarlo
Mide el contraste de bordes, iconos, casillas y líneas de gráficos.