Generador de paletas accesibles WCAG (AA, AAA y Tailwind)

Cree paletas de colores accesibles para design systems conformes a WCAG 2.2 con ratios de contraste en tiempo real y código Tailwind CSS.

Paleta de colores accesible: contrastes WCAG y ejemplo

A partir de un color base, la herramienta crea una paleta de 5 funciones (fondo, primario, acento, neutro oscuro, tinte suave) y mide el contraste de cada color sobre blanco y sobre el fondo oscuro #0f172a. La insignia sigue los umbrales WCAG: 7:1 para AAA, 4,5:1 para AA y 3:1 para texto grande (insignia «AA texto grande»).

El método

  • El color base se convierte a HSL (tono, saturación y luminosidad conservan sus decimales; solo se redondea el resultado RGB). Cada armonía fija 5 colores: en modo complementario, fondo (mismo tono, luminosidad 95 %), primario (luminosidad entre 35 y 65 %), acento (tono + 180°, luminosidad 50 %), neutro oscuro (saturación 15 %, luminosidad 20 %) y tinte suave del acento (92 %).
  • Luminancia relativa WCAG: cada canal sRGB c = valor ÷ 255 se linealiza (c ÷ 12,92 si c ≤ 0,04045; si no, ((c + 0,055) ÷ 1,055)2,4) y L = 0,2126 R + 0,7152 G + 0,0722 B.
  • Contraste = (L clara + 0,05) ÷ (L oscura + 0,05).

Ejemplo recalculado

Base #3b82f6, modo complementario (HSL 217,2°, 91,2 %, 59,8 %). El primario sigue siendo #3b82f6, ya que su luminosidad está entre 35 y 65 %: 3,68:1 sobre blanco, por tanto solo AA texto grande, y 4,85:1 sobre #0f172a (AA). El acento naranja #f29b0d solo funciona sobre fondo oscuro (8,05:1, AAA; 2,22:1 sobre blanco). El neutro #2b313b alcanza 13,08:1 sobre blanco.

Límites

  • Solo se prueban dos fondos; no se mide el contraste entre dos colores de la paleta. Para convertir un solo color entre HEX, RGB, HSL y CMYK y ver su contraste sobre blanco y negro, use mejor el conversor de colores.
  • El umbral 3:1 vale para texto grande (18 pt, o 14 pt en negrita) y para componentes de interfaz (criterio 1.4.11), no para el texto normal.
  • La exportación Tailwind recoge los 5 colores como surface, primary, accent, dark y support.

Fuentes y fechas: W3C, WCAG 2.2 (criterios 1.4.3, 1.4.6 y 1.4.11, glosario «relative luminance»), Recomendación del 12/12/2024; umbral de linealización 0,04045 (0,03928 antes de mayo de 2021, sin efecto en valores de 8 bits) (verificado el 14/10/2026).

Preguntas frecuentes

¿Qué contraste exigen las WCAG para el texto?

El nivel AA exige al menos 4,5:1 para el texto normal y 3:1 para el texto grande (18 pt, o 14 pt en negrita). El nivel AAA lo eleva a 7:1 y 4,5:1.

¿Por qué el azul #3b82f6 no pasa AA sobre blanco?

Su contraste sobre blanco es de unos 3,7:1, por debajo del umbral de 4,5:1 del texto normal. Sirve para un botón o un título grande (3:1), no para un párrafo.

¿El texto blanco sobre un color vivo siempre se lee bien?

No. El blanco tiene una luminancia relativa de 1: un naranja como #f29b0d solo ofrece 2,2:1 con él. Sobre el fondo oscuro #0f172a, el mismo naranja alcanza 8:1.

¿Qué versión de WCAG aplica la herramienta?

Los umbrales de contraste y la fórmula de luminancia de WCAG 2.2, recomendación del W3C del 12 de diciembre de 2024, iguales en este punto a WCAG 2.1. La linealización usa el umbral 0,04045.

¿La herramienta es realmente gratuita?

Sí, todas las herramientas en Kristools son 100% gratuitas y accesibles sin registro.

¿Están protegidos mis datos?

Sí. Todo el procesamiento se realiza de forma segura y directa en tu navegador. No se envían datos personales a nuestros servidores.