El Comprovador de Contrast calcula la ràtio de contrast WCAG 2.1 entre dos colors i els qualifica segons els llindars AA/AAA per a text normal i gran. Una vista prèvia en directe mostra text renderitzat amb els colors triats, i un botó "tria el fons de la pàgina" mostra el color de la pàgina actual.
L'accessibilitat és cada cop més obligatòria — la conformitat WCAG és un requisit legal en moltes jurisdiccions, i fins i tot on no ho és, un contrast deficient allunya els usuaris. El Comprovador de Contrast et diu a l'instant si dos colors compleixen els estàndards WCAG. Tria un color de primer pla i de fons amb el selector de color o enganxa valors hexadecimals; l'eina calcula la ràtio de contrast utilitzant la fórmula oficial de luminància WCAG i la qualifica segons quatre llindars: AA normal (≥4,5:1), AA gran (≥3:1), AAA normal (≥7:1) i AAA gran (≥4,5:1). Cada llindar mostra una insígnia clara d'Aprovat/Suspès. Una vista prèvia en directe renderitza text gran i normal amb els colors triats perquè vegis l'impacte visual real. Un botó de conveniència mostra el color de fons calculat del cos de la pàgina actual — útil quan comproves si una combinació de colors en un lloc real compleix. Tot s'executa localment al teu navegador, sense pujades.
Utilitza la fórmula oficial de luminància WCAG per calcular la ràtio de contrast. El resultat és exacte i coincideix amb qualsevol comprovador d'accessibilitat conforme.
Aprovat/suspès per a AA normal (≥4,5:1), AA gran (≥3:1), AAA normal (≥7:1), AAA gran (≥4,5:1) — tot mostrat en una graella.
Renderitza text gran i normal real amb els colors triats perquè vegis l'impacte visual juntament amb la ràtio numèrica.
Amb un clic mostra el color de fons calculat del cos de la pàgina actual — útil per provar combinacions del món real.
Escriu un valor hexadecimal o utilitza el selector de color natiu. Els valors se sincronitzen bidireccionalment mentre edites qualsevol dels dos.
Un clic intercanvia el primer pla i el fons — útil quan comproves temes invertits o estats de hover.
Abans de finalitzar una paleta de colors, comprova cada color de text amb el seu fons per assegurar la conformitat WCAG AA — evita retocs posteriors.
Utilitza "tria el fons de la pàgina" en un lloc actiu, després enganxa el color de text real — troba violacions d'accessibilitat en minuts sense obrir Lighthouse.
Quan una marca tria un color que podria fallar l'accessibilitat, utilitza el comprovador per trobar la variant conforme més propera (to més fosc/clar).
Verifica que els colors dels estats hover/actiu/desactivat encara compleixen els requisits de contrast, no només el color per defecte.
Els temes foscos sovint fallen el contrast en text gris sobre gris. Comprova els teus grisos més foscos contra els fons més foscos per detectar-ho.
Fes clic a la icona de Contrast al dock de DevSuite Pro. S'obre un panell amb camps de color de primer pla i de fons.
Utilitza el selector de color o enganxa un valor hexadecimal per a cadascun. La vista prèvia en directe s'actualitza mentre canvies els colors.
El número gran (p. ex. 4,8:1) és la ràtio de contrast. Com més alt, millor. 3 és el mínim absolut; 4,5 és l'objectiu per a text normal.
Les insígnies d'aprovat/suspès per a AA i AAA, en mides de text normal i gran, mostren d'un cop d'ull per a què és apta la teva combinació.
Si no aprova, retoca els colors. Enfosqueix el primer pla o aclareix el fons (o viceversa) fins que el nivell objectiu mostri Aprovat.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 64 eines de desenvolupador per al teu navegador.
