Contrast de text: 1.4.3 i 1.4.6, com es calcula i com es mesura

Un text gris clar sobre fons blanc pot semblar elegant a la pantalla calibrada d'un dissenyador i resultar il·legible al sol, en un portàtil barat o per a algú amb baixa visió, cataractes o 60 anys. El contrast entre text i fons és una de les variables més mesurables de l'accessibilitat i una de les que més s'incompleixen. Aquesta lliçó explica què exigeixen les WCAG, com es calcula la ràtio de contrast i quines eines utilitzar per comprovar-ho.

Què exigeixen els criteris

El criteri 1.4.3 Contrast (mínim), de nivell AA, estableix que el text i les imatges de text tenen una ràtio de contrast d'almenys 4,5:1 respecte al fons, amb tres excepcions:

• Text gran: n'hi ha prou amb 3:1. Es considera gran el text d'almenys 18 punts (uns 24 píxels CSS) o 14 punts en negreta (uns 18,66 píxels CSS).
• Text incidental: text de components inactius (un botó deshabilitat), text purament decoratiu, text que no és visible per a ningú o text que forma part d'una imatge amb un altre contingut visual significatiu.
• Logotips: el text que forma part d'un logotip o nom de marca no té cap requisit.

El criteri 1.4.6 Contrast (millorat), de nivell AAA, eleva les ràtios a 7:1 per al text normal i 4,5:1 per al text gran. No és exigible en la majoria de normatives (el RD 1112/2018 (PDF, s'obre en una finestra nova) i l'EN 301 549 (PDF, s'obre en una finestra nova) demanen nivell AA), però és un objectiu raonable per a continguts de lectura llarga o adreçats a persones grans.

Com es calcula la ràtio

La ràtio de contrast compara la luminància relativa dels dos colors (la vas conèixer a la lliçó anterior), un valor entre 0 (negre) i 1 (blanc) que s'obté dels components RGB amb una fórmula que corregeix la percepció no lineal de l'ull. La ràtio és:

(L1 + 0,05) / (L2 + 0,05)

on L1 és la luminància del color més clar i L2 la del més fosc. El resultat va d'1:1 (mateix color) a 21:1 (negre pur sobre blanc pur). Algunes referències útils:

L'exemple del #767676 davant del #777777 il·lustra una cosa important: la ràtio és una mesura objectiva amb un llindar fix. Un dissenyador no pot «negociar» un 4,4:1; o compleix o no compleix.

Casos que confonen

Text sobre imatges o degradats

El contrast es mesura contra el fons real que hi ha darrere de cada lletra. Si el text és sobre una fotografia, cal mesurar a la zona pitjor (la més clara si el text és blanc). Solucions habituals: una capa semitransparent fosca sobre la imatge, una caixa de color sòlid darrere del text o una ombra ben marcada (que compta com a fons si envolta les lletres).

Text en enllaços i estats

El contrast s'exigeix en tots els estats: enllaç normal, visitat, en hover i amb focus. Un enllaç blau que passa a gris clar en passar-hi el ratolí incompleix en aquest estat.

Marcadors de posició (placeholder)

El text de placeholder és text visible i ha de complir 4,5:1. Els grisos clars que se solen triar per a aquest text (i, segons el navegador i la versió, el gris per defecte) no el compleixen, i és una de les errades més comunes en formularis.

Text deshabilitat

N'està exempt, però si el text deshabilitat és l'única manera de llegir una informació important (un preu que no es pot canviar, per exemple), replanteja el disseny: l'exempció és per a controls inactius, no per a contingut.

Eines per mesurar

• Eines de desenvolupament del navegador: a Chrome i Edge, en inspeccionar un text, el selector de color mostra la ràtio i si compleix AA i AAA. Firefox inclou un «comprovador de contrast» a l'inspector d'accessibilitat.
• Colour Contrast Analyser (TPGi): aplicació gratuïta per a Windows i macOS amb comptagotes; permet mesurar qualsevol cosa a la pantalla, incloses imatges i PDF.
• WebAIM Contrast Checker: web on introdueixes dos colors hexadecimals i obtens la ràtio.
• axe DevTools i WAVE: detecten automàticament textos amb contrast insuficient, tot i que no poden avaluar text sobre imatges o degradats (el marquen per a revisió manual).
• Connectors de Figma (Stark, Contrast, A11y - Color Contrast Checker): per comprovar-ho en la fase de disseny, abans que existeixi codi.

Resum

• 1.4.3 Contrast (mínim), AA: 4,5:1 text normal, 3:1 text gran (24 px o 18,66 px en negreta). Exempts: text incidental, deshabilitat i logotips.
• 1.4.6 Contrast (millorat), AAA: 7:1 i 4,5:1.
• La ràtio compara luminàncies relatives: (L1 + 0,05) / (L2 + 0,05), d'1:1 a 21:1.
• Mesura sobre el fons real (imatges, degradats), en tots els estats de l'enllaç i als placeholders.
• Eines: inspector del navegador, Colour Contrast Analyser, WebAIM, axe/WAVE i connectors de Figma.