ImageColorPicker.com

Verificador de contrast de color

Prova la relació de contrast entre els colors de primer pla i de fons per assegurar l'accessibilitat.

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.

18.88 a 1
Contrast
AAA
Resultat del text
Excel·lent

Comparat: #000000 sobre #F5F2F4

Text

16px, Regular (400)

Es compta com a text normal.

  • AA (WCAG 1.4.3): com a mínim 4.5:1

    Aprovat

  • AAA (WCAG 1.4.6): com a mínim 7:1

    Aprovat

Components i gràfics d'interfície

Icones, bordes d'entrada, indicadors de focus i altres parts que necessites veure per fer servir la interfície.

  • AA (WCAG 1.4.11): com a mínim 3:1

    Aprovat
18.88 a 1. Text: compleix AA, compleix AAA. Components de la interfície d'usuari: compleix.
Com es comprova això
Colors comparats (després de barrejar)
Text #000000 sobre el fons #F5F2F4
Luminància relativa
Text 0.0000, fons 0.8944
Fórmula
(L1 + 0.05) / (L2 + 0.05) on L1 és la luminància del color més clar i L2 del més fosc.
Ràtio exacta
18.8896 a 1, mostrat com 18.88 a 1. El valor mostrat està tallat, no arrodonit, així que mai sembla millor del que és. El valor exacte és el que es compara amb el requisit.

Mida del text: 16px, Regular (400)

Es compta com a text normal. Text gran: com a mínim 24px (18pt), o almenys 18.67px (14pt) quan és bold (pes 700 o més). Les mides es mostren truncades, no arrodonides.

Es compta com a text normal. Text gran: com a mínim 24px (18pt), o almenys 18.67px (14pt) quan és bold (pes 700 o més). Les mides es mostren truncades, no arrodonides.

Aa
Títol de previsualització

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

Exemple de text petit (12px)

Text
#000000
Fons
#f5f2f4

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.

Verificador de contrast de color

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.