Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Qué contraste necesitan botones y campos de entrada en sitios web?
Los botones, campos de entrada y gráficos significativos necesitan una proporción de contraste de al menos 3:1 con su entorno. Este umbral proviene del estándar WCAG. Asegura que un visitante con poca visión vea dónde puede hacer clic y dónde puede escribir — un campo de entrada blanco con borde gris claro en fondo blanco es prácticamente invisible.
Los elementos de control deben destacarse
Mientras que la regla de contraste conocida afecta el texto, esto trata de todo lo demás visible que lleva una función: el borde del campo de entrada, el área del botón, el icono de lupa de búsqueda, el marca de verificación en la casilla. El diseño moderno y muy reducido es la trampa más común aquí — los bordes de campo gris claro en fondo blanco se ven elegantes, pero a menudo están muy por debajo de 3:1. Un visitante con visión que se deteriora entonces ve un formulario sin campos visibles: no sabe dónde poner el cursor. Los símbolos sin etiqueta de texto — como el menú de hamburguesa — también deben contrastar con al menos 3:1 desde el fondo, de lo contrario la navegación no existe para él.
Cómo nuestro sistema de medición mide el contraste de los elementos de control
Nuestro sistema de medición selecciona una muestra de los elementos de control de su página — campos de entrada, botones, botones de enlace diseñados — y fotografía cada uno junto con el entorno en el navegador. De los píxeles calcula el brillo de borde, relleno y entorno y de ello la proporción de contraste real del borde del elemento. Si los bordes medidos están por debajo de 3:1, el informe lo reporta deliberadamente como un caso de prueba evidenciado y no inmediatamente como una infracción: un campo aparentemente débil puede ser llevado visualmente por un contenedor circundante — un humano lo juzga en el estándar Gold basado en la foto de pantalla proporcionada. El criterio se considera cumplido solo con una muestra suficientemente grande e inequívocamente adecuada; los objetos puramente gráficos como diagramas siguen siendo un asunto de verificación humana.
Beispiele
Eingabefeld mit blassem Rahmen
input { border: 1px solid #dddddd; background: #fff; } /* 1,3:1 */input { border: 1px solid #767676; background: #fff; } /* 4,5:1 */Rahmen, Symbole und Fokusrahmen brauchen 3:1 zum Hintergrund, sonst ist das Feld nicht als Feld erkennbar.
- Revise sus formularios: cada campo de entrada necesita un borde o relleno que se destaque claramente del fondo.
- Pida a su agencia que compruebe los colores de borde de los campos contra el umbral de 3:1 y que los oscurezcan donde sea necesario.
- Controle los símbolos sin texto — búsqueda, menú, carrito — para un contraste suficiente con el fondo.
- Preste atención a los estados: la marca de una pestaña seleccionada o una casilla de verificación activa también necesita 3:1.
- Vea sus formularios desde una distancia de dos metros — si los campos desaparecen visualmente, el contraste es muy débil.