🛠️ Eina de Navegador

Comprovador de Contrast de Color

Comprova les ràtios de contrast de color per a la conformitat amb l'accessibilitat web. Prova combinacions de colors de text i fons segons les directrius WCAG amb previsualització en temps real, avaluacions d'accessibilitat i suggeriments de millora.

Comprovador de contrast de color

Crea combinacions de colors accessibles amb confiança

#000000
#f0f4f8

Previsualització

Text normal

This is an example of normal body text that would appear on your website or application.

Text gran

This is an example of large text (18pt or 14pt bold).

"Good design is accessible design. Contrast is essential for readability."

Ràtio de contrast

19.00:1

0

PUNTUACIÓ

Text normal

AAA

Text gran

AAA

Directrius WCAG 2.1: AA requereix 4.5:1 per a text normal, 3:1 per a text gran. AAA requereix 7:1 per a text normal, 4.5:1 per a text gran.

Consells i suggeriments

  • Maintain a contrast ratio of at least 4.5:1 for normal text.
  • Use 3:1 or higher for large text (18pt or 14pt bold).
  • Consider using darker text on lighter backgrounds or vice versa.
  • For full WCAG AAA compliance, aim for a ratio of 7:1.
  • Adjust brightness or saturation slightly to improve contrast.

Eines Relacionades

COLOR Tools

View All →

Convertidor CMYK a Pantone Gratuït en Línia

Converteix colors CMYK als seus equivalents Pantone més propers utilitzant ciència del color avançada. Explora una col·lecció curada de colors Pantone populars amb comparació de color en temps real i funcionalitat de copiar.

Convertidor de colors Hex a Pantone gratuït

Converteix colors hexadecimals a les coincidències Pantone més properes amb la nostra eina en línia gratuïta. Inclou concordança de colors precisa amb Delta E, permet navegar per més de 40 colors Pantone populars i obtenir comparacions instantànies de colors. Perfecte per a dissenyadors, impressors i professionals del color.

Convertidor gratuït de color HSV a Pantone

Converteix colors HSV (To, Saturació, Valor) a les seves coincidències Pantone més properes a l'instant. Troba el color Pantone perfecte amb la nostra completa eina de concordança de colors amb comparacions visuals i ciència del color precisa.

Convertidor gratuït de color RGB a Pantone

Converteix colors RGB a les seves coincidències Pantone més properes amb el nostre algorisme avançat de concordança de colors. Explora colors Pantone seleccionats, compara diferències de color i obtén codis de color precisos per als teus projectes de disseny.

Creador de Collages de Paletes de Colors

Crea collages visuals impressionants combinant les teves imatges amb paletes de colors extretes. Puja qualsevol imatge per extreure'n automàticament els colors dominants i crear composicions belles amb dissenys, estils i proporcions personalitzables.

Creador Gratuït de Paletes de Colors Degradats

Crea degradats de colors impressionants i genera paletes de colors personalitzades en línia de forma gratuïta. Tria colors d'inici i final, ajusta la mida de la paleta i copia el codi CSS o els colors hexadecimals individuals. Perfecte per a disseny web, disseny gràfic i projectes creatius.

Com comprovar el contrast de color

1

Selecciona el color del text

Fes clic al primer selector de color per triar el color del teu text, o introdueix un codi hexadecimal directament.

2

Tria el color de fons

Utilitza el segon selector de color per seleccionar el color de fons per a la prova de contrast.

3

Revisa els resultats de contrast

Comprova la ràtio de contrast calculada i mira les avaluacions AA/AAA per a text normal i gran.

4

Previsualitza el teu disseny

Visualitza la previsualització en viu per veure com es veu la teva combinació de colors amb el contingut de text real.

Característiques Clau

Comprovació de contrast en temps real

Calcula instantàniament les ràtios de contrast a mesura que selecciones diferents combinacions de colors de text i fons.

Avaluacions de conformitat WCAG

Obtén avaluacions AA i AAA tant per a text normal com per a text gran segons les Directrius d'Accessibilitat al Contingut Web.

Panell de previsualització en viu

Mira exactament com es veuran les teves combinacions de colors amb text de mostra en mides normal i gran.

Indicador de puntuació visual

Visualitza el teu rendiment de contrast amb un gràfic circular intuïtiu que mostra puntuacions de 0 a 100.

Selectors de color interactius

Tria colors fàcilment amb les eines de selecció de color incorporades tant per als colors de text com per als de fons.

Consells d'accessibilitat

Obtén suggeriments pràctics per millorar el contrast i complir els estàndards d'accessibilitat.

Què és un Comprovador de Contrast de Color?

Un comprovador de contrast de color és una eina que mesura la diferència de lluminositat entre els colors del text i del fons. Calcula les ràtios de contrast segons els estàndards WCAG (Directrius d'Accessibilitat al Contingut Web) per assegurar que el contingut sigui llegible per a usuaris amb deficiències visuals, inclosa la ceguesa al color i la baixa visió.

Per què utilitzar el nostre Comprovador de Contrast de Color?

1

Conformitat WCAG

Assegura que els teus dissenys compleixen els estàndards internacionals d'accessibilitat amb avaluacions precises AA i AAA.

2

Retroalimentació en temps real

Consulta resultats instantanis a mesura que ajustis els colors, facilitant la cerca de combinacions conformes.

3

Sistema de puntuació visual

Comprèn el rendiment del contrast d'un cop d'ull amb el nostre sistema de puntuació intuïtiu de 0 a 100.

4

No es requereix instal·lació

Prova combinacions de colors instantàniament al teu navegador sense descarregar cap programari.

Preguntes Freqüents

Quina és una bona ràtio de contrast?

Per a text normal, apunta almenys a 4.5:1 per a la conformitat AA o 7:1 per a AAA. El text gran (18pt o 14pt en negreta) necessita 3:1 per a AA o 4.5:1 per a la conformitat AAA.

Què signifiquen les avaluacions AA i AAA?

AA és el nivell estàndard de conformitat amb l'accessibilitat requerit per la majoria de regulacions. AAA és el nivell més alt, proporcionant una accessibilitat millorada per a usuaris amb deficiències visuals més greus.

Com es calcula la ràtio de contrast?

La ràtio de contrast es calcula utilitzant la lluminositat relativa dels colors tal com es defineix a les directrius WCAG. Varia d'1:1 (sense contrast) a 21:1 (contrast màxim).

Què es considera text gran?

El text gran es defineix com 18 punts (24px) o més, o 14 punts (18.66px) o més si és en negreta. El text gran té requisits de contrast més permissius.

Per què és important el contrast de color?

Un bon contrast de color assegura que el contingut sigui llegible per a tothom, inclosos usuaris amb deficiències visuals, daltonisme, o aquells que visualitzen el contingut sota la llum solar intensa o en pantalles de baixa qualitat.

Puc utilitzar això per a qualsevol format de color?

L'eina accepta codis de color hexadecimals. Pots convertir d'altres formats (RGB, HSL, etc.) a hexadecimal utilitzant convertidors en línia o eines de disseny.