Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung
Accesibilidad
¿Qué contraste de color se requiere para el texto en los sitios web?
El texto normal requiere un ratio de contraste de al menos 4,5:1 con el fondo, texto grande — a partir de aproximadamente 24 píxeles o negrita a partir de aproximadamente 18,7 píxeles — al menos 3:1. Estos umbrales provienen del estándar internacional WCAG. Garantizan que incluso las personas con vista envejecida puedan leer sus textos — y cada visitante a la luz del sol en su teléfono.
El ratio de contraste, explicado en lenguaje cotidiano
El ratio de contraste describe cuánto diferente es el color del texto y el color de fondo en su brillo. Negro sobre blanco alcanza el valor máximo de 21:1 y se lee sin esfuerzo. El gris claro moderno sobre blanco a menudo está por debajo de 3:1 — para personas con vista envejecida, tal texto se mezcla con una superficie gris. No solo los discapacitados visuales se ven afectados: el cliente que busca sus horarios a la luz del sol en su teléfono también fracasa con contrastes débiles. El umbral de 4,5:1 para texto normal y 3:1 para texto grande es el compromiso establecido en el estándar entre libertad de diseño y legibilidad confiable.
Así es como nuestro núcleo de medición mide el contraste — también en imágenes
axe-core se encarga de la medición básica: calcula el ratio de contraste para los textos de su página a partir del color del texto y del fondo. Para texto en fotos o gradientes de color, ninguna herramienta puede simplemente leer el fondo — exactamente allí continúa nuestro núcleo de medición: hace el texto brevemente invisible, toma una foto del lugar en el navegador, calcula el brillo del fondo real píxel por píxel y determina el contraste real contra el color del texto. Esto convierte «indecidible» en un juicio confiable. El informe documenta cada lugar que falla con el valor medido, el umbral requerido y una captura de pantalla de prueba — por lo que ve exactamente qué parte del texto se ve afectada.
Mejorar el contraste sin sacrificar el diseño
Los buenos contrastes no fuerzan un diseño en blanco y negro. Generalmente es suficiente oscurecer el color del texto unos pocos pasos — de un gris claro a un antracita medio que irradia la misma discreción y sigue siendo legible. Para texto en fotos, ayudan trucos probados: una superficie oscura semitransparente detrás del texto, un gradiente de color en la parte inferior de la imagen o trasladar el texto a una parte tranquila de la imagen. Generalmente no es necesario cambiar sus colores de marca — a menudo es suficiente usarlos para fondos grandes y elegir una variante más oscura o más clara de la misma familia de colores para el texto.
Ejemplos
Texto gris en blanco
body { color: #999999; background: #ffffff; } /* 2,8:1 */body { color: #595959; background: #ffffff; } /* 7,0:1 */El límite para el texto normal es 4.5:1, para el texto grande de 24 píxeles 3:1. El valor está en el informe de prueba por referencia.
Letra blanca en color de marca
.knopf { color: #fff; background: #5aa9ff; } /* 2,5:1 */.knopf { color: #fff; background: #1a5fb4; } /* 6,3:1 */- Verifique primero los textos grises de su sitio web — los pies de página, leyendas de fotos e indicaciones de formularios generalmente están por debajo del umbral.
- Pida a su agencia que compruebe todos los colores de texto frente a los umbrales 4,5:1 y 3:1 y que documente los valores.
- Coloque texto sobre fotos con una superficie oscura semitransparente en lugar de confiar en la legibilidad de la imagen.
- Vea su página a la luz del día brillante en el teléfono — lo que falla allí, falla para los visitantes con visión baja siempre.
- Documente las combinaciones de colores comprobadas en su manual de diseño para que las nuevas páginas las utilicen.
