Verificador de contrast de color

Comprova els teus colors

Prova combinacions de colors per assegurar-te que compleixen els estàndards d'accessibilitat WCAG per a la llegibilitat del text.

1.00:1

Contrast

No superat

Molt pobre

Text normal

AA (4.5:1)

AAA (7:1)

Text gran

AA (3:1)

AAA (4.5:1)

Color del text

Color de fons

Correccions ràpides

Títol de previsualització

El ràpid guineu marró salta sobre el gos mandrós

Exemple de text petit (12px)

Text

#2596be

Fons

#ffffff

Estàndards WCAG

Nivell AA

Proporció mínima de contrast de 4.5:1 per a text normal i 3:1 per a text gran. Necessari per a la majoria de llocs web.

Nivell AAA

Proporció millorada de contrast de 7:1 per a text normal i 4.5:1 per a text gran. Recomanat per a una accessibilitat òptima.

Contrast insuficient per a totes les mides de text - no compleix els estàndards WCAG.

Calcula la relació de contrast entre els colors del text i el fons.

Trieu un color amb el selector de colors per al text i el color de fons o introduïu un color en format hexadecimal RGB (per exemple, #259 o #2596BE). Podeu ajustar el control lliscant per seleccionar el color. Les Directrius d'Accessibilitat del Contingut Web (WCAG) tenen una directriu específica per ajudar a determinar si el text és llegible per a usuaris amb visió. Aquest criteri utilitza un algoritme concret per combinar combinacions de colors en ràtios comparables. Utilitzant aquesta fórmula, la WCAG especifica que una proporció de contrast de color de 4.5:1 entre text i fons és adequada per al text normal, i el text gran (18+ pt regular, o 14+ pt negreta) hauria de tenir almenys una proporció de contrast de 3:1.

Característiques clau

Càlcul de la relació de contrast en temps real
Verificació de compliment WCAG AA i AAA
Controls HSL per a ajustos precisos
Formats de previsualització múltiples

Eines avançades

Correcció automàtica de colors
Mostres de text i fons
Detecció de noms de color
Exportar resultats

Preguntes freqüents

Per al compliment de WCAG AA, el text normal necessita una relació de contrast mínima de 4,5:1, mentre que el text gran (18 pt o 14 pt en negreta) necessita 3:1.

WCAG AAA exigeix relacions de contrast més altes: 7:1 per al text normal i 4,5:1 per al text gran, mentre que AA exigeix 4,5:1 i 3:1 respectivament.

Fes servir la funció de correcció automàtica per ajustar el color del text o del fons sense perdre la intenció del disseny, o ajusta els colors a mà amb els controls HSL i els indicadors visuals que mostren les zones òptimes per al compliment AA/AAA.

Les zones verdes i els marcadors AA/AAA mostren els intervals òptims per complir WCAG. Les indicacions de direcció (Més clar/Més fosc) t'ajuden a obtenir més contrast segons la combinació de colors actual.

Sí, pots introduir qualsevol codi de color hexadecimal o fer servir el selector de color per triar colors personalitzats. L'URL s'actualitza automàticament perquè puguis compartir combinacions de colors concretes.