Saltar al contenido
ToolFarmToolFarm
Diseño

Verificar Contraste de Color (WCAG)

Comprueba el contraste de color WCAG entre texto y fondo, con vistas previas en vivo, resultado aprobado o suspenso y sugerencias accesibles.

2 min de lectura
Relación de contraste9.99:1
Contraste excelente

Resultados WCAG

  • AA Texto grandePasa
  • AAA Texto grandePasa
  • AA Texto normalPasa
  • AAA Texto normalPasa
  • Componentes de UIPasa

AA pide 4.5:1 para texto normal y 3:1 para texto grande. AAA pide 7:1.

Vista previa en vivo

Diseño
Estilo de vista previa
Visión
AcmeLeer las pautas
Accesible

Diseño que todo el mundo puede leer

Un buen contraste mantiene tu contenido legible para personas con baja visión, a pleno sol o en pantallas baratas.

EmpezarSaber más

Sin registro. Funciona en tu navegador.

Ejemplos accesibles

Ejemplos que fallan

Exportar

:root {
  --tf-contrast-fg: #4c1d95;
  --tf-contrast-bg: #f5f3ff;
  --tf-contrast-ratio: 9.99:1;
}

Qué hace esta herramienta

Verificador de contraste de color que evalúa cualquier par de texto y fondo según las pautas de accesibilidad WCAG. Elige dos colores y verás al instante la relación de contraste, si supera AA y AAA para texto grande y normal, y cómo queda sobre texto y botones reales. Todo se ejecuta en tu navegador.

¿Necesitas preparar los colores primero? Convierte cualquier valor con conversor de colores o crea un conjunto con generador de paletas.

Para qué te sirve

  • Comprobar que el texto del cuerpo se lee bien sobre su fondo antes de publicar un diseño.
  • Encontrar un color de texto accesible cuando un color de marca no supera AA sobre blanco.
  • Comparar el texto y el relleno de un botón para cumplir la regla de contraste no textual.
  • Compartir un par de colores con tu equipo mediante la URL y guardar un historial local de lo que comprobaste.

Cómo se usa

  1. Introduce un color de texto y uno de fondo en HEX, RGB, HSL o por nombre.
  2. Lee la relación de contraste y el resultado de aprobado o suspenso para cada nivel WCAG.
  3. Usa una sugerencia para ajustar el color hasta que pase, o invierte el par.
  4. Copia los valores, las variables CSS o el informe completo con un clic.

Todo el trabajo ocurre dentro de tu navegador, sin subir archivos a ningún servidor. Ver más herramientas del mismo campo.

Otras herramientas que la gente suele usar en el mismo flujo.

Diseño
Popular
Diseño

Conversor de Color: HEX, RGB, HSL

Convierte colores entre HEX, RGB y HSL online. Pega cualquier formato y obtén los demás al instante. Gratis, sin subidas y en tu navegador.

Diseño

Generador de Paletas de Color

Genera paletas de color armónicas a partir de cualquier color base: análogas, complementarias y más. Gratis, en tu navegador, listas para copiar.

Diseño

Generador de Gradientes CSS

Crea gradientes CSS online con vista previa en vivo: lineal, radial y cónico. Copia el código para tu fondo, gratis y en tu navegador.

Preguntas frecuentes

¿Qué relación de contraste necesito?

WCAG pide al menos 4,5:1 para texto normal y 3:1 para texto grande (18pt o 24px, o 14pt en negrita) para cumplir AA. AAA sube esas cifras a 7:1 y 4,5:1. Los iconos, los bordes de los formularios y otros elementos no textuales necesitan 3:1.

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

Sale de la luminancia relativa de cada color, siguiendo la fórmula de WCAG 2.1. El color más claro va arriba, así que el resultado va de 1:1 para dos colores idénticos a 21:1 para negro sobre blanco. Invertir los dos colores nunca cambia el resultado.

¿Cómo funcionan las sugerencias accesibles?

Cuando un par se queda corto, la herramienta mantiene el tono y la saturación de tu color y solo cambia su luminosidad hasta llegar al objetivo, eligiendo el resultado más cercano. Si el texto no puede llegar por sí solo, sugiere ajustar el fondo.

¿Se envían mis datos a algún sitio?

No. Todos los cálculos ocurren en tu navegador. Los colores que compruebas, el historial y el enlace para compartir se quedan en tu dispositivo.

Verificar Contraste de Color (WCAG) · ToolFarm