Verificador de contrast
Comprova el contrast de color per a WCAG
Com usar Verificador de contrast
Comprova el contrast de color per a WCAG Eina gratuïta en línia, sense registre, sense anuncis intrusius. Utilitza-la ara.
Per qué és important el contrast de colors?
Aproximadament el 8% dels homes i el 0,5% de les dones tenen alguna forma de deficiència en la visió dels colors. A més, les persones llegeixen en condicions difícils — llum solar intensa, pantalles de mala qualitat, cansament o ulls que envelleixen. Un contrast de color suficient garanteix que el vostre contingut és llegible per a tots els usuaris, independentment de les seves condicions visuals.
- Compliment de l'accessibilitat web: Les WCAG 2.1 (Directrius per a l'Accessibilitat del Contingut Web) defineixen ràtios mínims de contrast. A Espanya, el Reial Decret 1112/2018 fa obligatòria l'accessibilitat digital per als sectors públics — és una obligació legal, no una simple recomanació.
- Revisió de disseny: Comproveu les combinacions de colors text/fons durant la fase de disseny, antes del desenvolupament. És molt menys costós corregir els problemes de contrast a Figma que després del llançament del lloc.
- Biblioteques de components: Assegureu-vos que cada combinació de colors en el vostre sistema de disseny compleixi els requisits d'accessibilitat en tots els contextos d'ús.
- Mode fosc: En implementar el mode fosc, els colors que funcionaven en fons clars sovint fallen en fons foscos. Cada mode necessita una comprovació de contrast independent i exhaustiva.
- Visualització de dades: Assegureu-vos que els colors dels gràfics siguin distingibles pels usuaris daltònics i llegibles en diferents colors de fons — important per als taulers de control i els informes empresarials.
Nivells de les WCAG: Nivell A és el mínim absolut. Nivell AA (ràtio ≥ 4,5:1 per al text normal, ≥ 3:1 per al text gran) és l'estàndard legal a la majoria de jurisdiccions i el nivell objectiu per a la majoria dels llocs web. Nivell AAA (ràtio ≥ 7:1) és per a la màxima accessibilitat.
Frequently Asked Questions
Quina ràtio de contrast requereix WCAG AA?
WCAG AA requereix una ràtio mínima de contrast de 4,5:1 per al text normal (per sota de 18pt o 14pt en negreta) i 3:1 per al text gran (18pt o més, o 14pt en negreta o més). Els components d'interfície d'usuari i els elements gràfics (icones, vores de formulari) requereixen 3:1. Aquests són mínims — un contrast superior sempre és millor per a la llegibilitat general.
Com es calcula la ràtio de contrast?
Ràtio de contrast = (L1 + 0,05) / (L2 + 0,05), on L1 és la luminància relativa del color més clar i L2 la del més fosc. La luminància es calcula a partir dels valors RGB lineals segons una fórmula específica. El contrast màxim és 21:1 (negre sobre blanc). Una ràtio d'1:1 significa cap contrast — colors idèntics.
La ràtio de contrast s'aplica al text de color sobre fons de color?
Sí — la fórmula WCAG compara la luminància relativa, no únicament la brillantor percebuda. El text vermell sobre fons verd pot tenir un contrast baix fins i tot si tots dos colors son vibradors. Proveu sempre les combinacions de colors reals — no us fieu de la intuïció visual perquè la luminància percebuda pot enganyar.
Quina diferència hi ha entre contrast de colors i daltonisme?
La ràtio de contrast mesura les diferències de luminància — afecta tots els usuaris, inclosos els que tenen una visió normal dels colors (especialment amb molta llum o en pantalles de mala qualitat). El daltonisme afecta com es distingeixen els colors, no necessàriament la seva luminància. Un disseny d'alt contrast que utilitza únicament vermell i verd supera la prova de luminància però pot ser indistingible per als usuaris daltònics.
El gruix de la lletra afecta els requisits de contrast?
Sí. El text en negreta i el text gran tenen requisits mínims més baixos perquè inherentment són més fàcils de llegir. WCAG AA requereix 3:1 per al text de 18pt (24px) o més, o 14pt (uns 18,67px) en negreta. Per al text més petit o sense negreta, el requisit és 4,5:1.
Verificador de contrast vs simulador de daltonisme vs auditoria d'accessibilitat
Un verificador de contrast comprova la ràtio de luminància entre dos colors específics. Un simulador de daltonisme (Coblis, DevTools de Chrome) mostra com apareix un disseny amb els diversos tipus de deficiència visual dels colors. Una auditoria d'accessibilitat completa (axe, Lighthouse, WAVE) escaneja tota una pàgina per a totes les violacions de les WCAG. Per a una accessibilitat completa: comproveu el contrast durant la fase de disseny, simuleu el daltonisme antes del llançament i executeu auditories automatitzades al lloc de producció.