L'eina aplica la fórmula oficial de lluminància relativa de WCAG, de manera que els resultats coincideixen amb el verificador de WebAIM i la majoria d'auditories d'accessibilitat. Tot s'executa al navegador: els colors no s'envien a cap servidor i no hi ha límits.
Verificador de contrast de colors
Funciona del tot al navegador: sense pujar res ni registrar-te.
Ràtio de contrast
Superanecessita 4.5:1
Superanecessita 3:1
No superanecessita 7:1
Superanecessita 4.5:1
Gran = 18 pt (24 px), o 14 pt (18,66 px) en negreta.
Què és un verificador de contrast de colors?
Un verificador de contrast de colors mesura la ràtio de contrast entre el color d'un text i el seu fons, i indica si compleix els estàndards d'accessibilitat WCAG. Retorna una ràtio d'1:1 a 21:1 i mostra si supera o no els nivells AA i AAA per a text normal i gran.
Com s'utilitza
- 1Introdueix els colors. Escriu un codi hex, un valor rgb() o un nom de color CSS per al text i el fons, o selecciona'ls amb els selectors de color.
- 2Consulta la ràtio. La ràtio de contrast s'actualitza en directe amb una previsualització del text sobre el fons triat.
- 3Comprova les etiquetes. Cada etiqueta indica si supera o no els nivells WCAG AA i AAA per a text normal i gran.
Per a qui és
- Dissenyadors que comproven els colors de marca abans que arribin al desenvolupament.
- Desenvolupadors front-end que verifiquen els colors de botons, enllaços i etiquetes respecte al nivell AA de WCAG.
- Auditors d'accessibilitat que documenten fallades de contrast amb ràtios exactes.
- Equips de contingut i correu electrònic que confirmen que el text es llegeix bé sobre fons de colors.
Preguntes freqüents
El verificador de contrast de colors és gratuït?
Sí, és 100 % gratuït, sense registre i sense límits. Funciona del tot al navegador.
Quina ràtio de contrast necessito per al nivell AA de WCAG?
WCAG 2.1 nivell AA exigeix una ràtio de contrast mínima de 4,5:1 per a text normal i de 3:1 per a text gran. El nivell AAA l'eleva a 7:1 per a text normal i 4,5:1 per a text gran.
Què es considera text gran?
Text gran és el que té almenys 18 pt (uns 24 px) a pes normal, o 14 pt (uns 18,66 px) en negreta. El text gran admet una ràtio de contrast inferior perquè els glifs més grans es llegeixen amb més facilitat.
Com es calcula la ràtio de contrast?
La fórmula és (L1 + 0,05) / (L2 + 0,05), on L1 i L2 són la lluminància relativa del color més clar i el més fosc. La lluminança es calcula a partir dels canals vermell, verd i blau de l'sRGB segons la definició de WCAG 2.x.
Admet hex, RGB i noms de colors?
Sí. Pots introduir hex de 3, 4, 6 o 8 dígits, valors rgb() i rgba(), o qualsevol nom de color CSS com ara «teal». També pots triar colors amb el selector de color natiu.
Per què la mateixa ràtio de vegades supera i de vegades no supera el nivell?
La ràtio requerida depèn de la mida del text i del nivell que vols assolir. Una ràtio de 3,5:1 no supera el nivell AA per a text normal, però sí per a text gran; comprova sempre la mida i el nivell que fas servir realment.