Què mesura la ràtio de contrast
Compara la lluminositat del text amb la del fons, en una escala que va de 1:1 (el mateix color) a 21:1 (negre sobre blanc). No depèn del to: un vermell i un verd amb la mateixa lluminositat tenen un contrast baixíssim encara que semblin molt diferents, i és justament la combinació que no distingeixen les persones amb daltonisme.
Nivells AA i AAA
- AA, text normal: 4,5:1. El mínim que exigeixen la majoria de les lleis d’accessibilitat, com la directiva europea i la norma EN 301 549.
- AA, text gran: 3:1. Es considera gran a partir de 24 px, o 18,66 px en negreta (18 i 14 punts).
- AAA: 7:1 i 4,5:1. El nivell reforçat. Recomanable per a textos llargs, com articles o documentació.
- Icones i controls: 3:1. Vores de camps de formulari, icones sense text i l’indicador de focus (criteri 1.4.11).
La ràtio no s’arrodoneix: 4,49:1 no compleix AA encara que es quedi a una centèsima. Per això el gris més clar que passa
AA sobre blanc és #767676 (4,54:1), i #777777 ja no hi arriba.
Com arreglar un contrast insuficient
El més senzill és enfosquir el text (o aclarir-lo, si el fons és fosc) sense canviar el to, que és el que fa el suggeriment de l’eina: manté el color de marca i només ajusta la lluminositat. Si el color no es pot tocar, fes-lo servir en elements grans, com titulars o fons de botons, i deixa el text petit en un color amb més contrast.
Text sobre imatges
El contrast d’un text sobre una foto canvia d’un punt a un altre, i cap eina no el pot garantir. El més segur és posar una capa de color semitransparent o un degradat entre la foto i el text, i comprovar el pitjor cas. La vista prèvia fa servir una imatge del generador de ximg.es amb els mateixos colors, perquè vegis com queda el text d’un placeholder:
https://ximg.es/600x300/{fons}/{text}.png?text=Hola