Que mide o ratio de contraste
Compara a luminosidade do texto coa do fondo, nunha escala que vai de 1:1 (a mesma cor) a 21:1 (negro sobre branco). Non depende do ton: un vermello e un verde coa mesma luminosidade teñen un contraste baixísimo aínda que parezan moi distintos, e é xusto a combinación que non distinguen as persoas con daltonismo.
Niveis AA e AAA
- AA, texto normal: 4,5:1. O mínimo que esixen a maioría das leis de accesibilidade, como a directiva europea e a norma EN 301 549.
- AA, texto grande: 3:1. Considérase grande a partir de 24 px, ou 18,66 px en grosa (18 e 14 puntos).
- AAA: 7:1 e 4,5:1. O nivel reforzado. Recomendable para textos longos, como artigos ou documentación.
- Iconas e controis: 3:1. Bordos de campos de formulario, iconas sen texto e o indicador de foco (criterio 1.4.11).
O ratio non se redondea: 4,49:1 non cumpre AA aínda que quede a unha centésima. Por iso o gris máis claro que pasa AA
sobre branco é #767676 (4,54:1), e #777777 xa non chega.
Como arranxar un contraste insuficiente
O máis sinxelo é escurecer o texto (ou aclaralo, se o fondo é escuro) sen cambiar o ton, que é o que fai a suxestión da ferramenta: mantén a cor de marca e só axusta a luminosidade. Se a cor non se pode tocar, úsaa en elementos grandes, como titulares ou fondos de botóns, e deixa o texto pequeno nunha cor con máis contraste.
Texto sobre imaxes
O contraste dun texto sobre unha foto cambia dun punto a outro, e ningunha ferramenta o pode garantir. O seguro é poñer unha capa de cor semitransparente ou un degradado entre a foto e o texto, e comprobar o peor caso. A vista previa usa unha imaxe do xerador de ximg.es coas mesmas cores, para que vexas como queda o texto dun placeholder:
https://ximg.es/600x300/{fondo}/{texto}.png?text=Ola