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 {
--color-primary: #1A73E8;
--color-background: #FFFFFF;
--color-accessible: #1A73E8;
--color-complementary: #E88F1A;
--color-analogous-left: #1ADAE8;
--color-analogous-right: #281AE8;
--color-shade: #0F4A97;
--color-tint: #6DA6F0;
}Tailwind v4 @theme
@theme {
--color-primary: oklch(0.574 0.195 257.9);
--color-background: oklch(1.000 0.000 89.9);
--color-accessible: oklch(0.574 0.195 257.9);
--color-complementary: oklch(0.727 0.156 65.4);
--color-analogous-left: oklch(0.811 0.135 203.2);
--color-analogous-right: oklch(0.443 0.276 269.2);
--color-shade: oklch(0.421 0.139 257.6);
--color-tint: oklch(0.717 0.124 255.4);
}¿Qué es un verificador de contraste de color WCAG?
Un verificador de contraste de color WCAG evalúa si las combinaciones de colores de texto y fondo cumplen con los estándares de accesibilidad de las Pautas de Accesibilidad para el Contenido Web. WCAG define umbrales mínimos de relación de contraste: 4.5:1 para texto normal (Nivel AA), 3:1 para texto grande (Nivel AA), y 7:1 para conformidad de Nivel AAA mejorada. La herramienta calcula la relación de contraste exacta entre cualquier par de colores y muestra claramente si la combinación pasa o falla en cada nivel. Esto ayuda a diseñadores y desarrolladores a crear interfaces que sean legibles para todos los usuarios, incluyendo aquellos con baja visión.
Cómo usar el verificador de color WCAG
Ingresa tu color de texto y color de fondo usando selectores de color, códigos hexadecimales o valores RGB. La herramienta calcula instantáneamente la relación de contraste y muestra si la combinación pasa los niveles AA y AAA tanto para texto normal como para texto grande. Una vista previa muestra cómo se ve el texto con tus colores elegidos. Si la combinación no pasa, la herramienta sugiere los ajustes más cercanos que cumplirían con los requisitos — como oscurecer ligeramente el texto o aclarar ligeramente el fondo. También puedes verificar toda la paleta de colores a la vez para auditar la accesibilidad de un diseño completo.
Por qué importa el cumplimiento del contraste de color WCAG
Aproximadamente el 15 % de la población mundial tiene alguna forma de discapacidad visual, y un contraste de color insuficiente hace que el contenido web sea ilegible para millones. Más allá de la accesibilidad, un buen contraste mejora la legibilidad para todos los usuarios — especialmente en pantallas móviles bajo luz solar directa, en proyectores en salas iluminadas, o para cualquiera que experimente fatiga visual. Muchas jurisdicciones exigen por ley el cumplimiento de WCAG para sitios web del gobierno, y cada vez más se espera que las empresas privadas también cumplan. Para los desarrolladores, verificar el contraste de color es uno de los pasos de accesibilidad más simples — toma segundos y puede ser verificado automáticamente, pero tiene un impacto desproporcionado en la usabilidad.
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.
Explorar etiquetas relacionadas
Salta a otras herramientas que comparten el mismo flujo, formato o caso de uso.