Comprovar el contrast de colors

Tria el color del text i el del fons per saber si el teu disseny és llegible i accessible. Et donem la ràtio de contrast, si compleix els nivells AA i AAA de les pautes WCAG i, si no hi arriba, el color de text més semblant que sí que compleix.

Text i fons

Accepta HEX, rgb(), hsl(), oklch() o noms CSS. Si el text és semitransparent, es barreja amb el fons.

Text gran d'exemple

Aquest és un text de mida normal. L'accessibilitat web vol dir que qualsevol persona, també amb baixa visió o daltonisme, pugui llegir i fer servir la teva pàgina.

Botó

Ràtio de contrast

Text normal (4,5:1) AA
Text normal (7:1) AAA
Text gran (3:1) AA
Text gran (4,5:1) AAA
Icones i components (3:1) AA

Què és la ràtio de contrast?

La ràtio de contrast compara la luminància relativa de dos colors i va d'1:1 (el mateix color) a 21:1 (negre sobre blanc). La defineixen les pautes d'accessibilitat WCAG 2 del W3C i és la referència que fan servir les lleis d'accessibilitat (a l'Estat espanyol, el RD 1112/2018 i la norma EN 301 549) i eines com Lighthouse.

Nivells AA i AAA

AA és el nivell exigit habitualment: 4,5:1 per al text normal i 3:1 per al text gran (a partir de 24 px, o 18,66 px en negreta). AAA és el nivell reforçat: 7:1 i 4,5:1 respectivament. Les icones, les vores dels camps de formulari i altres components de la interfície necessiten com a mínim 3:1 respecte als colors del voltant.

Els logotips i el text purament decoratiu o d'elements desactivats n'estan exempts.

Com millorar el contrast

Gairebé sempre n'hi ha prou d'enfosquir el text (o aclarir-lo sobre fons foscos) sense canviar de to: per això et proposem el mateix color amb una altra lluminositat, calculada a l'espai OKLCH perquè el canvi sigui el més petit possible. Evita el text gris clar sobre blanc i el text sobre imatges sense una capa fosca entremig.