Contrast de color insuficient: com detectar-lo i corregir-lo

L’error de contrast de color és el que apareix amb més freqüència a les auditories d’accessibilitat web. És fàcil d’entendre, fàcil de mesurar i, en la majoria de casos, fàcil de corregir. I malgrat tot, és present en una proporció altíssima de webs.

Què és el contrast de color

El contrast de color és la diferència de luminositat entre el color del text i el color del fons sobre el qual apareix. Quan aquesta diferència és insuficient, el text és difícil o impossible de llegir per a persones amb baixa visió, daltonisme o simplement en condicions de llum adverses, una pantalla a l’exterior amb sol, per exemple.
Les WCAG 2.2 mesuren el contrast amb una ràtio numèrica. Una ràtio d’1:1 significa que text i fons són idèntics, i és il·legible. Una ràtio de 21:1 és el màxim possible, text negre sobre fons blanc.

Què exigeix el nivell AA

El nivell AA, el mínim exigit per llei, estableix:

• Text normal (fins a 18px regular o 14px en negreta): contrast mínim de 4,5:1
• Text gran (18px o més en regular, o 14px o més en negreta): contrast mínim de 3:1
• Elements d’interfície i gràfics informatius (botons, icones, camps de formulari): contrast mínim de 3:1

El nivell AAA, més exigent però no obligatori, eleva el mínim a 7:1 per a text normal i 4,5:1 per a text gran.

Els errors més habituals

Aquests són els casos que apareixen amb més freqüència a les auditories:

• Text gris clar sobre fons blanc — el clàssic del disseny minimalista. Un gris com #999999 sobre blanc té una ràtio de 2,85:1, molt per sota del mínim.
• Text blanc sobre fons de color clar — botons taronja, groc o verd clar amb text blanc solen fallar.
• Text sobre imatge de fons — si no hi ha una capa de color sòlid al mig, el contrast no es pot garantir.
• Placeholders de formulari — el text gris clar dels placeholders gairebé mai compleix el mínim. Però compte: els placeholders no substitueixen les etiquetes, i aquest és un error diferent.
• Text en estat hover o focus — el contrast ha de complir-se en tots els estats de l’element, no només en l’estat per defecte.

Com mesurar el contrast

Hi ha diverses eines per mesurar el contrast abans de publicar:

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker) — introdueixes els dos colors i et dona la ràtio i si supera els nivells A, AA i AAA.
• WAVE (wave.webaim.org) — analitza la teva web i marca els elements amb contrast insuficient directament sobre la pàgina.
• Colour Contrast Analyser — aplicació d’escriptori que permet mesurar el contrast de qualsevol element a la pantalla amb un comptagotes.
• La nostra eina d’autoavaluació — analitza la teva web automàticament i detecta els errors de contrast entre tots els altres criteris WCAG.

Com corregir-lo

En la majoria de casos no cal un redisseny. Les correccions habituals són:

• Enfosquir el text — si tens text gris, fes-lo uns tons més fosc fins que superi el 4,5:1. Sovint un canvi de #999 a #767676 ja és suficient per superar el mínim (aquesta és la ràtio exacta de 4,54:1).
• Aclarir o enfosquir el fons — si no pots tocar el color del text, ajusta el fons.
• Augmentar la mida del text — si el text supera els 18px, el mínim baixa a 3:1, cosa que dona més marge.
• Afegir una capa semitransparent — en texts sobre imatges, una capa negra o blanca amb opacitat entre el 40% i el 60% sol ser suficient per garantir el contrast.

Una cosa que cal tenir en compte: corregir el contrast no hauria de trencar el disseny. En la majoria de casos, enfosquir lleugerament un gris o ajustar un color de botó és un canvi imperceptible visualment per a la majoria d’usuaris, però fa una diferència enorme per a qui té baixa visió.

Contrast i elements d’interfície

Un error menys conegut: el criteri de contrast s’aplica també als elements d’interfície, no només al text. Els contorns dels camps de formulari, les icones informatives i els components visuals que transmeten informació han de tenir un contrast mínim de 3:1 respecte al fons adjacent.
Un camp de formulari amb contorn gris clar sobre fons blanc és un error WCAG, encara que el text dins del camp sigui perfectament llegible.

Quan les eines automàtiques no poden confirmar l’error

Les eines automàtiques com axe-core de vegades marquen elements de contrast com a «incomplets» en lloc d’errors confirmats. Això passa quan el text apareix sobre un gradient, una imatge de fons o un color calculat dinàmicament, i l’eina no pot determinar el color exacte del fons i prefereix no confirmar l’error en lloc d’equivocar-se.
En aquests casos cal revisió manual: mesurar el contrast real amb una eina de comptagotes sobre el resultat visual final.