En resum
Què es mesura
la ràtio de contrast entre el color del text i el del seu fons, element a element.
Valors bons
4,5:1 o més en text normal; 3:1 o més en text gran (18 punts, o 14 punts en negreta).
Per què importa
el 4,5:1 està calculat perquè pugui llegir una persona amb una agudesa visual de 20/40, segons la WCAG.
Severitat a Wakaris
Crític. Falla al 76,6 % de les pàgines analitzades.
Què és i què mesura aquesta troballa
Aquesta troballa salta quan algun text de la teva pàgina no té prou contrast amb el fons sobre el qual es mostra. Contrast, aquí, no és una impressió sinó un número que es calcula comparant la lluminositat relativa del text i del fons amb una fórmula fixa definida per la WCAG. El resultat és una ràtio que va d’1:1, quan tots dos colors són idèntics, a 21:1, que és negre pur sobre blanc pur.
La WCAG fixa dos llistons al seu criteri 1.4.3, de nivell AA. El text normal necessita almenys 4,5:1. El text gran, definit com a 18 punts o 14 punts en negreta, necessita almenys 3:1, perquè les lletres grans es llegeixen millor amb menys diferència de color. Un gris clar sobre blanc, tan habitual en textos secundaris, sovint no arriba a 4,5:1 i suspèn com a text normal.
La norma no exigeix contrast al text d’un logotip, al purament decoratiu ni al d’un control desactivat; tota la resta compta, inclosos els textos petits del peu de pàgina i els enllaços.
Com es mesura
Wakaris carrega la URL que li indiquis, pren el color final de cada text i el color que hi ha darrere, calcula la ràtio i compara el resultat amb el llistó que correspon a aquella mida de lletra. Et retorna la llista d’elements que no hi arriben, amb el seu fragment de codi, i la troballa salta des del primer element que falla, amb talls addicionals a 10 i 30 elements que donen idea de la magnitud.
El mesurament fa servir la fórmula de la WCAG: es divideix la lluminositat relativa del color més clar, més 0,05, entre la del color més fosc, més 0,05. Les ràtios resultants són les mateixes que veuràs a qualsevol documentació d’accessibilitat.
Una limitació honesta: quan el text va sobre una imatge o un degradat, el fons no és un únic color i la comprovació automàtica no et pot donar una ràtio fiable, així que Wakaris t’assenyala l’element perquè el revisis a mà. El mesurament mira la pàgina tal com es carrega; si un tema fosc canvia els colors, convé analitzar també aquesta variant.
Per què importa
Un contrast baix no és una qüestió d’estil, sinó de qui pot llegir la teva web. La WCAG explica que el 4,5:1 està calculat per compensar la pèrdua de contrast que pateix una persona amb una agudesa visual moderadament baixa, al voltant de 20/40. El llistó AAA, de 7:1, cobreix la visió de 20/80.
La documentació d’MDN hi afegeix un altre grup: els qui tenen alguna forma de daltonisme perceben pitjor les zones clares i fosques i tenen dificultat per distingir vores i detalls. I un mòbil en ple sol o una pantalla amb la brillantor baixa redueixen el contrast real per a qualsevol, sense cap condició visual.
Per al negoci, la conseqüència és directa: el text que no es llegeix és un botó que no es prem, un preu que no es veu i un formulari que s’abandona. A més, en molts països l’accessibilitat web és una obligació legal amb la WCAG AA com a referència habitual, i el contrast és un dels criteris que es revisen primer.
Causes comunes
La causa més habitual és un gris massa clar per a textos secundaris: dates, peus de foto, ajudes de formulari, text de placeholder. Es tria perquè queda lleuger i ningú no mesura la ràtio; un gris com #999999 sobre blanc es queda en 2,85:1 i suspèn a qualsevol mida.
La segona és el color de marca fet servir com a color de text. Molts taronges, verds clars i blaus cel funcionen bé en un logotip, que n’està exempt, però no arriben a 4,5:1 quan es fan servir en enllaços o titulars petits sobre fons blanc, igual que el text blanc sobre un botó de color clar.
La tercera és el text sobre imatges o degradats sense una capa d’enfosquiment al darrere: la llegibilitat depèn de la foto que toqui a cada zona. La quarta són els estats: un enllaç visitat, un element en hover o un avís d’error amb un vermell suau que ningú no va comprovar. La cinquena és heretar els colors per defecte d’una plantilla sense revisar els tons que fa servir per als textos atenuats.
Com es resol
Comença per l’informe de Wakaris, que et dona la llista d’elements que no hi arriben amb el seu fragment de codi, i agrupa’ls per classe de CSS: el normal és que uns quants estils compartits expliquin la majoria dels errors.
Després, enfosqueix el text o aclareix el fons fins a superar la ràtio amb marge. Per al text normal apunta a 4,5:1 com a mínim i millor una mica més: un gris #595959 sobre blanc dona 7:1 i continua semblant gris. Per al text gran n’hi ha prou amb 3:1, però la norma parla de 18 punts, uns 24 píxels, o 14 punts en negreta.
Si el color de marca no hi arriba, fes-lo servir en fons, icones o línies i tria’n una variant més fosca per al text. Sobre imatges, afegeix una capa semitransparent fosca darrere del text. Revisa també els estats d’enllaç i d’error i, quan acabis, torna a passar la pàgina per Wakaris per confirmar que la llista ha quedat buida.
Taula amb les ràtios mínimes de contrast de la WCAG per a text normal, text gran i components d’interfície als nivells AA i AAA
Brief per generar la imatge
Il·lustració editorial per a una guia tècnica de Wakaris. Tema: Taula amb les ràtios mínimes de contrast de la WCAG per a text normal, text gran i components d’interfície als nivells AA i AAA. Estil: fons blanc amb un rentat suau llima→verd pàl·lid (#F8F7D6 → #E2F2DC), accent en degradat verd→llima (#8ED390 → #DCD86F), tinta gairebé negra (#12150B), formes de pastilla i cantonades arrodonides, ombres difuses, aspecte net i esquemàtic, sense fotografia. Format: 16:9, 1440 píxels d’amplada. Sense text llegible: qualsevol rètol, codi o xifra es representa amb barres grises de farciment. El significat el porta el peu de foto, no la imatge. Sense logotips reals ni marques de tercers. Sense persones reconeixibles. Etiquetes: taula, ràtios, mínimes, contrast, normal, components, interfície, nivells
Pregunta-li a la teva IA
Si vols aprofundir en el teu cas concret, copia un d’aquests dos prompts i enganxa’l a la IA que facis servir. Tria segons la teva situació.
Ja tinc la troballa mesurada amb Wakaris i la vull resoldre
Actua com un auditor tècnic web professional i prudent. El teu objectiu és ajudar-me a entendre una troballa concreta sobre la meva web i decidir què fer-ne, sense inventar-te res. Context: he obtingut aquesta troballa amb Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. La troballa és: Contrast visual. Mesura la diferència de lluminositat entre cada text de la meva pàgina i el seu fons, com una ràtio. Referència: la WCAG exigeix almenys 4,5:1 en text normal i 3:1 en text gran (18 punts, o 14 punts en negreta). Enganxa aquí el resultat de Wakaris: quins elements t’ha assenyalat, en quina pàgina i, si ho indica, el fragment de codi de cadascun. Si no el tens, digues-m’ho i et diré com obtenir-lo abans de continuar. Regles que has de seguir en tot moment: 1. No donis res per fet sobre la meva web. Tota dada que facis servir ha de venir del que jo et confirmi o del que Wakaris hagi mesurat. Si no ho saps, pregunta-m’ho abans d’afirmar-ho. 2. Abans de donar-me conclusions, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per saber si aquesta troballa m’afecta de debò i per on: a) En quina plataforma està la teva web? (WordPress, Shopify, web a mida, una altra) b) Quants elements t’ha assenyalat Wakaris: un o dos de solts, o desenes repartits per tota la pàgina? c) Els elements assenyalats són textos petits (dates, peus, ajudes de formulari), enllaços, botons o titulars? d) Algun dels colors que fallen és un color de la teva marca, definit en una guia d’estil que no pots canviar sense permís? e) Hi ha text sobre fotos o degradats entre els elements assenyalats? f) Pots editar el CSS de la web directament, o depens de les opcions de color d’un tema o d’un constructor visual? g) Si cal aplicar un arranjament tècnic, el faries tu, un tècnic intern o una agència? 3. Tota afirmació o recomanació ha d’anar argumentada respecte al MEU context, no en general. Si em recomanes un color concret, digues-me la ràtio que dona i per què s’aplica al meu cas. 4. Marca sempre el teu nivell de certesa. Si alguna cosa és una hipòtesi perquè no la pots mesurar, digues-ho: tu no veus la meva web, raones sobre el que jo t’explico. 5. No em proposis canvis tècnics irreversibles o de risc (tocar el full d’estil global, canvis directes en producció) sense avisar-me abans del risc i que convé una còpia de seguretat o un entorn de prova. 6. Si necessites una dada que només s’obté mesurant la web (confirmar la ràtio real d’un element, o si l’arranjament ha funcionat), digues-m’ho i recomana’m tornar a passar la pàgina per Wakaris: això es mesura, no s’endevina. 7. La decisió final és meva, no teva. El teu paper és ajudar-me a entendre i a preparar l’acció, no decidir per mi. 8. Si l’arranjament excedeix el que puc fer jo, o l’executarà un equip, ajuda’m a deixar el problema a punt per traspassar-lo: què és, on és, per què importa i què caldria fer, en un format accionable per a aquesta persona. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/accesibilidad/contraste-visual Per mesurar-ho o tornar-ho a mesurar: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol i fent-me el primer bloc de preguntes.
Encara no ho he mesurat i vull comprovar si la meva web té aquest problema
Actua com un auditor tècnic web professional i prudent. Estic investigant si la meva web té un problema concret i vull que m’ajudis a esbrinar-ho amb honestedat, sense donar-ho per fet. Context: hi he arribat a través de Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. El problema que vull investigar és: Contrast visual. Mesura si cada text de la meva pàgina té prou diferència de lluminositat amb el seu fons (referència: la WCAG exigeix almenys 4,5:1 en text normal i 3:1 en text gran). Encara NO sé si la meva web el té: ho vull esbrinar. Regles que has de seguir en tot moment: 1. El primer i més important: el contrast es MESURA amb una fórmula, i tu no pots mesurar la meva web des d’aquesta conversa. Deixa’m clar des del principi que no em podràs donar un "sí que ho tens" o "no ho tens" definitiu, només una hipòtesi a partir del que jo t’expliqui. 2. No donis res per fet. Abans de donar-me cap valoració, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per estimar si és probable que tingui el problema: a) Fas servir gris clar per als textos secundaris: dates, peus de foto, ajudes de formulari, text d’exemple dins dels camps? b) Els enllaços o els botons fan servir un color de marca clar (taronja, verd, blau cel, groc) sobre fons blanc, o text blanc sobre un color clar? c) Tens text col·locat directament sobre fotos o degradats? d) Algú t’ha comentat que li costa llegir alguna cosa de la teva web, o ho has notat tu al mòbil amb sol? e) La web fa servir una plantilla o un tema tal com venia, sense revisar-ne els colors de text? f) En quina plataforma està? (WordPress, Shopify, web a mida, una altra; o no ho sé) 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui, i en quins elements hi hauria el risc, argumentada segons el que t’he dit i marcada explícitament com a hipòtesi, no com a diagnòstic. 4. Digues-me de manera directa que l’única manera de saber-ho de debò és mesurar-ho, i que ho puc fer gratis i sense crear compte passant la meva web per Wakaris, que em donarà la llista d’elements que no arriben a la ràtio, amb el seu fragment de codi, i de passada l’estat de les altres àrees. 5. Si et pregunto com comprovar-ho a mà, no m’ho amaguis, però recorda’m que Wakaris ho fa més ràpid, sobre la pàgina real i element a element, amb informació addicional que a mà no obtinc. 6. Si en mesurar-ho resulta que sí que el tinc, digues-me que el pas següent és entendre com m’afecta i com resoldre’l en el meu cas concret. 7. La conclusió i la decisió són meves, no teves. Tu m’ajudes a orientar-me. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/accesibilidad/contraste-visual Per mesurar-ho: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol, deixant clar el punt 1, i fent-me el bloc de preguntes.
Preguntes freqüents
Quina ràtio de contrast necessita el meu text? +
Per complir el nivell AA de la WCAG, el text normal necessita almenys 4,5:1 i el text gran almenys 3:1. Text gran és el de 18 punts o més, o 14 punts en negreta. El nivell AAA, més exigent, demana 7:1 i 4,5:1 respectivament.
El contrast també s’aplica a botons i icones? +
Sí, tot i que amb un altre criteri. L’1.4.11 de la WCAG exigeix una ràtio d’almenys 3:1 per als components d’interfície i els objectes gràfics que calen per entendre la pàgina: la vora d’un camp, l’estat d’un botó, una icona amb significat. Els components desactivats n’estan exempts.
El meu logotip ha de complir la ràtio? +
No. La WCAG eximeix el text que forma part d’un logotip o nom de marca, igual que el text purament decoratiu i el dels controls desactivats. Però aquesta excepció no s’estén al color de marca quan el fas servir en enllaços, botons o titulars: aquí sí que ha de complir la ràtio que li correspongui.
Per què el llistó és 4,5:1 i no un altre número? +
Perquè la WCAG el va calcular per a una persona amb una agudesa visual de 20/40, que és una pèrdua moderada i freqüent. Aquesta visió necessita al voltant d’1,5 vegades més contrast que el mínim de 3:1, i 3 per 1,5 fa 4,5. El nivell AAA puja a 7:1 per cobrir la visió de 20/80.
Fonts citades
- w3.orgUnderstanding SC 1.4.3: Contrast (Minimum), W3C WAI: ràtios 4,5:1 i 3:1, definició de text gran, excepcions, fórmula de lluminositat i el raonament sobre la visió 20/40.
- w3.orgUnderstanding SC 1.4.6: Contrast (Enhanced), W3C WAI: ràtios 7:1 i 4,5:1 del nivell AAA i la referència a la visió 20/80.
- w3.orgUnderstanding SC 1.4.11: Non-text Contrast, W3C WAI: ràtio 3:1 per a components d’interfície i objectes gràfics, i exempció dels components inactius.
- developer.mozilla.orgColor contrast, MDN Web Docs: taula de ràtios AA i AAA i per què el contrast afecta persones amb daltonisme i condicions similars.
Actualitzat: 7 de setembre de 2026.
Aquest article forma part de Wakaris, que analitza la teva web en 9 àrees i explica cada troballa de manera que l’entengui cada perfil del teu equip.