Criterios de Perceptible
PerceptiblePauta 1.4 Distinguible
1.4.1Uso del color
Nivel ALo exige la normativa (EN 301 549).
Qué pide
El color no es el único medio para transmitir información o indicar una acción.
A quién ayuda: Personas daltónicas o con baja visión.
Un caso real
Un formulario marca en rojo los campos con error.
BienAdemás del borde rojo, hay un icono y el texto «Introduce un email válido».
MalSolo cambia el color del borde del campo.
Cómo aplicarlo en código
Errores con texto, no solo con un borde rojo
<label for="iban">IBAN</label>
<input id="iban" aria-invalid="true" aria-describedby="iban-error">
<p id="iban-error" class="error">
<svg aria-hidden="true" focusable="false">…</svg>
Error: el IBAN debe tener 24 caracteres.
</p><label for="iban">IBAN</label>
<input id="iban" style="border-color: red">Enlaces dentro del texto subrayados
Si un enlace solo se distingue por el color, quien no percibe ese color no lo encuentra.
p a { text-decoration: underline; text-underline-offset: .18em; }p a { color: #1747a6; text-decoration: none; }Cómo comprobarlo
Mira la página en escala de grises: ¿se sigue entendiendo todo?