Qué mide el ratio de contraste
Compara la luminosidad del texto con la del fondo, en una escala que va de 1:1 (el mismo color) a 21:1 (negro sobre blanco). No depende del tono: un rojo y un verde con la misma luminosidad tienen un contraste bajísimo aunque parezcan muy distintos, y es justo la combinación que no distinguen las personas con daltonismo.
Niveles AA y AAA
- AA, texto normal: 4,5:1. El mínimo que exigen la mayoría de las leyes de accesibilidad, como la directiva europea y la norma EN 301 549.
- AA, texto grande: 3:1. Se considera grande a partir de 24 px, o 18,66 px en negrita (18 y 14 puntos).
- AAA: 7:1 y 4,5:1. El nivel reforzado. Recomendable para textos largos, como artículos o documentación.
- Iconos y controles: 3:1. Bordes de campos de formulario, iconos sin texto y el indicador de foco (criterio 1.4.11).
El ratio no se redondea: 4,49:1 no cumple AA aunque se quede a una centésima. Por eso el gris más claro que pasa AA
sobre blanco es #767676 (4,54:1), y #777777 ya no llega.
Cómo arreglar un contraste insuficiente
Lo más sencillo es oscurecer el texto (o aclararlo, si el fondo es oscuro) sin cambiar el tono, que es lo que hace la sugerencia de la herramienta: mantiene el color de marca y solo ajusta la luminosidad. Si el color no se puede tocar, úsalo en elementos grandes, como titulares o fondos de botones, y deja el texto pequeño en un color con más contraste.
Texto sobre imágenes
El contraste de un texto sobre una foto cambia de un punto a otro, y ninguna herramienta lo puede garantizar. Lo seguro es poner una capa de color semitransparente o un degradado entre la foto y el texto, y comprobar el peor caso. La vista previa usa una imagen del generador de ximg.es con los mismos colores, para que veas cómo queda el texto de un placeholder:
https://ximg.es/600x300/{fondo}/{texto}.png?text=Hola