Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿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.
Beispiele
Grauer Fließtext auf Weiß
body { color: #999999; background: #ffffff; } /* 2,8:1 */body { color: #595959; background: #ffffff; } /* 7,0:1 */Die Grenze für normalen Text ist 4,5:1, für großen Text ab 24 Pixel 3:1. Der Wert steht im Prüfbericht je Fundstelle.
Weiße Schrift auf Markenfarbe
.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.