# Paleta de Colores + Verificador WCAG

> Generador de paleta de colores gratuito con verificación de contraste WCAG AA/AAA, sugerencias de color aprobado, variables CSS, exportación Tailwind v4 y muestras PNG.

- **Category:** Desarrollador
- **URL:** https://www.teafun.cyou/tools/color-palette-wcag/
- **Privacy:** Runs entirely in your browser — no uploads, no account, no tracking.
- **Also known as:** wcag contrast, color contrast, palette checker, color picker, colour picker, color palette, contrast checker, accessibility contrast
- **Related tools:** [Prueba de daltonismo](https://www.teafun.cyou/tools/colorblind/), [Frecuencia de actualización de la pantalla](https://www.teafun.cyou/tools/monitor/), [Herramienta de Planos](https://www.teafun.cyou/tools/floor-plan/)
- **Tags:** Color, Design, Display

## About

Revisa relaciones de contraste, cumplimiento AA/AAA, genera variantes de paleta y exporta tokens de color CSS o Tailwind v4 localmente.

## Cómo usar el verificador de color WCAG

Ingresa un color de primer plano y fondo como HEX (`#1A73E8` sobre `#FFFFFF`) — la razón de contraste y las insignias de aprobación/falla para AA normal (4,5:1), AAA normal (7:1), AA grande (3:1) y AA UI (3:1, WCAG 2.2) aparecen instantáneamente. Cuando un par falla, el sugeridor ajusta el color de primer plano más oscuro o más claro a lo largo del eje de luminancia OKLCH mientras se preserva el matiz y la saturación, para que la identidad de color de marca permanezca intacta. Haz clic en Usar color sugerido para aplicarlo. El clásico fallo de prueba: texto blanco sobre amarillo puro `#ffff00` (`#ffffff` primer plano) — la razón es 1,07:1, muy por debajo de 3:1, a pesar de parecer 'alto contraste' a simple vista. Negro sobre amarillo es 19,55:1, aprobando ampliamente. Debajo del comprobador, el panel de paleta muestra variantes complementarias y análogas generadas a partir de tu entrada. Copia variables CSS, copia tokens de tema Tailwind 4, o descarga la muestra PNG.

## Por qué importa el cumplimiento del contraste de color WCAG

El cumplimiento del contraste WCAG es ley exigible bajo la ADA en EE. UU., la Ley de Accesibilidad Europea (EAA) efectiva a partir de junio de 2025 para productos y servicios vendidos en la UE, y EN 301 549 para adquisiciones del sector público. Las multas bajo la EAA alcanzan de €30 000 a €500 000 según la jurisdicción. Más allá de la exposición legal, el umbral de 4,5:1 se aproxima al contraste que necesita una persona con visión 20/40 para leer texto corporal cómodamente — eso no es un impedimento de caso extremo, eso es la mayoría de lectores mayores de 40 después del amarillamiento natural del cristalino. Diseñar tokens conformes desde el inicio evita el costo de retrofit de ejecutar correcciones urgentes de color de marca a través de cada componente. Una trampa común es juzgar el contraste a simple vista: los rosas de marca y los teales pálidos 'se ven legibles' para diseñadores con visión 20/20 bajo iluminación de estudio y fallan por 2× bajo iluminación de oficina fluorescente. Ejecutar la razón temprano — en la etapa de definición de tokens, no en la construcción de componentes — resuelve la pregunta con aritmética en lugar de opinión.

_SEO title: Paleta WCAG – Herramienta de Color Accesible | TeaFun_

## FAQ

### ¿Cómo funciona la sugerencia que pasa el estándar?

TeaFun mantiene el tono y la saturación lo más cercanos posible al color de primer plano elegido, luego ajusta la luminosidad hasta que el par alcance al menos WCAG AA para texto normal.

### ¿La exportación de Tailwind usa el nuevo formato v4?

Sí. La exportación usa tokens `@theme` con valores `oklch()` para que puedas pegarlos directamente en un proyecto Tailwind v4.

### ¿Puedo usar esto para trabajo con clientes?

Sí. El verificador funciona solo en el navegador, así que puedes probar colores de marca, exportar tokens y generar muestras PNG sin enviar nada a un servicio externo.