Introdueix colors HEX o selecciona colors Pantone per al primer pla i el fons.
Revisa la relació de contrast i els resultats WCAG AA o AAA per a text normal, text gran i components UI.
Fes servir la vista prèvia, intercanvia colors, copia el CSS o prova suggeriments Pantone accessibles.

Usos del comprovador de contrast

Valida parelles de colors de marca abans d'utilitzar-les en dissenys digitals.
Comprova botons, formularis, navegació i altres components UI perquè tinguin un contrast llegible.
Compara paletes inspirades en Pantone abans d'adaptar colors d'impressió a pantalles.
Documenta resultats WCAG per a revisions d'accessibilitat i lliuraments de disseny.

Comprovador de contrast de color per a fluxos WCAG, UI i Pantone

Fes servir aquest comprovador quan hagis de confirmar que un color de text, fons, estat de botó o paleta de marca és llegible abans d'entrar en un web, app, presentació o sistema de disseny.

Llegeix correctament el resultat WCAG

L'eina calcula la luminància relativa dels dos colors i retorna la relació de contrast utilitzada per WCAG. El text de cos sol necessitar 4.5:1 per a AA i 7:1 per a AAA, mentre que el text gran i els components UI essencials tenen llindars més baixos.

Connecta colors Pantone i accessibilitat digital

Els colors Pantone sovint s'escullen per a marca i impressió, però els seus equivalents en pantalla també necessiten comprovació d'accessibilitat. Cerca noms Pantone o valors HEX, previsualitza la parella i compara alternatives accessibles abans de lliurar colors a disseny o desenvolupament.

Un flux pràctic per a dissenyadors i desenvolupadors

Comença amb els valors HEX exactes del fitxer de disseny, prova primer pla i fons en tots dos sentits, copia el CSS o l'informe i desa la parella aprovada amb la documentació de la paleta Pantone.

Preguntes freqüents sobre el comprovador de contrast

Què mesura aquest comprovador de contrast?

Mesura la relació de contrast de luminància entre un color de primer pla i un color de fons, i compara el resultat amb els llindars WCAG.

Quins són els requisits de contrast WCAG AA i AAA?

WCAG AA requereix com a mínim 4.5:1 per a text normal i 3:1 per a text gran o components UI. WCAG AAA requereix 7:1 per a text normal i 4.5:1 per a text gran.

Es poden comprovar colors Pantone per a accessibilitat web?

Sí. Les referències Pantone es poden convertir a valors de color de pantalla i comprovar-ne el contrast digital. Verifica sempre els colors finals en el mitjà on apareixeran.

Avís sobre el contrast

Els resultats es calculen a partir de valors digitals i serveixen per planificar accessibilitat. La impressió física, els materials, la il·luminació i la calibració de pantalla poden canviar el contrast percebut.