Paleta de Colores + Verificador WCAG
Revisa relaciones de contraste, cumplimiento AA/AAA, genera variantes de paleta y exporta tokens de color CSS o Tailwind v4 localmente.
Color de primer plano
Color de fondo
Conversiones del color primario
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)Paleta generada
Variables CSS
:root {
}Tailwind v4 @theme
@theme {
}Acabas de probar Paleta de Colores + Verificador WCAG — Prueba Prueba de daltonismo a continuación →
¿Qué es un verificador de contraste de color WCAG?
El Color Palette + WCAG Checker calcula la razón de contraste de luminancia relativa entre dos colores sRGB y la evalúa según los estándares de accesibilidad web (WCAG). La fórmula es fija: linealizar cada canal de sRGB a luz lineal (L = R*0.2126 + G*0.7152 + B*0.0722 después de decodificar gamma), luego (L_lighter + 0.05) / (L_darker + 0.05). El resultado es la razón de contraste, que oscila entre 1,0 (colores idénticos) y 21,0 (negro puro sobre blanco). WCAG 2.1 establece tres umbrales: 4,5:1 para texto corporal normal (AA), 3:1 para texto grande ≥18pt o 14pt en negrita (AA), y 7:1 / 4,5:1 para los estándares AAA más estrictos. WCAG 2.2 (publicado en octubre de 2023) agrega un requisito de 3:1 para componentes UI y contornos de enfoque visible que no existían en 2.1. Más allá de la calificación, la herramienta genera una paleta coordinada —complementaria, analógica, sombreada, tintada— a partir de un único color semilla en espacio OKLCH (perceptualmente uniforme a diferencia de HSL), y exporta el resultado como propiedades CSS personalizadas o tokens @theme de Tailwind v4. Una hoja de muestras PNG se incluye para entrega de diseño.
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.
Preguntas frecuentes
¿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.
Usa esta herramienta dentro de un flujo más grande
Estas colecciones agrupan herramientas y guías que suelen formar parte del mismo trabajo.
Explorar etiquetas relacionadas
Salta a otras herramientas que comparten el mismo flujo, formato o caso de uso.