EspañolES

Verificador de contraste de colores WCAG

Elige un color de texto y uno de fondo para ver al instante la relación de contraste y los resultados de accesibilidad.

Tus textos y archivos no salen de tu navegador: no se envía nada a ningún servidor.

Relación de contraste-
  • Texto normal AA (4,5:1)-
  • Texto normal AAA (7:1)-
  • Texto grande AA (3:1)-
  • Texto grande AAA (4,5:1)-
  • Elementos de interfaz y gráficos AA (3:1)-

Texto grande significa al menos 24 px, o unos 18,7 px en negrita.

Vista previa

Así se ve un título grande

El texto del cuerpo necesita al menos 4,5:1 para leerse con comodidad. Pruébalo también en una pantalla pequeña o con mucha luz.

Texto de ayuda pequeño · 13 px

BotónCampo de texto
Colores sugeridos que cumplen
Cambiar el color del texto a -
Cambiar el fondo a -

Cómo se usa

  1. Elige un color de texto y uno de fondo con los selectores, o escribe códigos como #fff o rgb(…). Los colores semitransparentes se mezclan primero con el fondo.
  2. Verás la relación de contraste y si cumple o no el nivel AA para texto normal (4,5:1), texto grande (3:1) y elementos de interfaz (3:1), además de los niveles AAA, más estrictos.
  3. Si alguna prueba no se cumple, “Colores sugeridos que cumplen” muestra el color más cercano con el mismo tono y solo la luminosidad cambiada. Haz clic en “Aplicar” para usarlo.
  4. Los dos colores se guardan en la dirección de la página, así que puedes copiar el enlace para compartirlo con tu equipo.

Preguntas frecuentes

¿Qué significan AA y AAA?

Son niveles de conformidad de las Pautas de Accesibilidad para el Contenido Web (WCAG). El texto normal necesita 4,5:1 para AA y 7:1 para AAA. AA es el nivel que suelen exigir las leyes y normas de accesibilidad, como la norma europea EN 301 549.

¿Cómo se calcula la relación de contraste?

La herramienta calcula la luminancia relativa de los dos colores y divide (la más clara + 0,05) entre (la más oscura + 0,05). Dos colores iguales dan 1:1 y el negro sobre blanco da 21:1. La relación se trunca, no se redondea, para que un valor justo por debajo de un umbral nunca parezca aprobado.

¿Cuándo se aplica la regla de los elementos de interfaz?

Los elementos que no son texto, como los bordes de los botones, los contornos de los campos y los iconos, necesitan al menos 3:1 frente a los colores que los rodean (WCAG 1.4.11).

Herramientas relacionadas

Selector de colorHEX, RGB, HSL y CMYK en un solo lugarPaleta para Tailwind CSSDe un color a una escala de 50 a 950Cuentagotas de imagenToma colores y una paleta de tu fotoArte ASCIITexto y fotos hechos con caracteres

Todas las herramientas