WerklyTools
Esc
↑↓ navegar↵ abrir
ES
Invítame a un café

Comprobador de contraste de color WCAG

Elige el color del texto y el del fondo y obtén al instante la relación de contraste y si cumple los niveles AA y AAA de las pautas de accesibilidad WCAG. Si no cumple, la herramienta te propone un color parecido que sí pasa. Todo ocurre en tu navegador.

Procesado 100% en tu navegador

Acepta #hex, rgb(), hsl() y nombres de color. Si el texto es semitransparente, se mezcla con el fondo antes de calcular.
Relación de contraste

–

Texto normal · AA
Texto normal · AAA
Texto grande · AA
Texto grande · AAA
Interfaz y gráficos · AA

Grande: 24 px o más, o 18,66 px en negrita.

Vista previa

Título de ejemplo

Así se lee este texto con los colores elegidos. Un buen contraste ayuda a todos, también a quien lee al sol o con vista cansada.

Ctrl + Enter ejecutarCtrl + C copiar resultado

Cómo usar

  1. 1Escribe o elige el color del texto y el del fondo (hex, rgb, hsl o nombre).
  2. 2Mira la relación de contraste y los resultados AA y AAA.
  3. 3Revisa la vista previa con tus colores.
  4. 4Si no cumple, pulsa «Usar» en la alternativa sugerida.

Casos de uso

  • Comprobar que los textos de tu web son legibles para personas con baja visión.
  • Validar una paleta de marca antes de entregarla.
  • Cumplir los requisitos de accesibilidad exigidos a webs públicas y comerciales.
  • Elegir el color de un botón que destaque sobre su fondo.

Preguntas frecuentes

¿Qué contraste mínimo exige WCAG?

Nivel AA: 4,5:1 para texto normal y 3:1 para texto grande y componentes de interfaz. Nivel AAA: 7:1 para texto normal y 4,5:1 para texto grande.

¿Qué cuenta como texto grande?

El de 24 px o más, o el de 18,66 px o más en negrita (aproximadamente 18 y 14 puntos). Para él se admite un contraste menor.

¿Qué pasa si mi color tiene transparencia?

La herramienta lo mezcla antes con el fondo para calcular el color que realmente se ve, y luego mide el contraste.

¿Hay excepciones a la norma?

Sí: el texto decorativo, los logotipos y los elementos desactivados no están obligados a cumplirla, aunque conviene que se lean bien igualmente.

Herramientas relacionadas

Generador de border-radius CSSAjusta el redondeo de cada esquina con deslizadores y mira el resultado en directo. Puedes usar un único radio, uno por esquina o radios elípticos para formas orgánicas, en px, % o rem. Copia el CSS cuando te guste.
Generador de box-shadow CSSDiseña sombras realistas combinando varias capas, como hacen los mejores sistemas de diseño. Ajusta desplazamiento, desenfoque, expansión, color y opacidad de cada capa y copia el resultado en CSS o como clase de Tailwind.
Conversor de colores (HEX, RGB, HSL, CMYK, OKLCH)Escribe un color en cualquier formato —#hex, rgb(), hsl(), hwb(), oklch() o un nombre como «tomato»— y obtén al instante todas sus equivalencias, su contraste con blanco y negro según WCAG y una escala de tintes y sombras.
Generador de paletas de coloresParte de tu color de marca y obtén una escala completa de 50 a 950 perceptualmente uniforme, lista para tu sistema de diseño, junto con combinaciones armónicas. El color original se conserva exacto en el paso que le corresponde.
Generador de degradados CSSDiseña fondos con degradado arrastrando paradas de color sobre una barra, elige el tipo (lineal, radial o cónico) y copia un CSS listo para producción, con color de respaldo y versión moderna en OKLCH sin zonas grises.
Generador de CSS GridConfigura columnas, filas y espacios con controles deslizantes y ve el resultado en directo. Copia el CSS y el HTML listos para pegar en tu proyecto.