1. Selecciona un nivel de accesibilidad
2. Genera colores con la regla 60-30-10
3. Observa cómo se aplican los cambios al diseño
Luciano Treachi
Desarrollador Frontend enfocado en optimización y accesibilidad web.
4. Información de colores
Relación de Contraste entre primario y secundario
12.73Relación de Contraste entre primario y acento
8.05Cumplimiento WCAG
Códigos de color
Color Primario (60%)
HEX: #E0E0E0
RGB: 224, 224, 224
HSL: 0, 0%, 88%
Color secundario (30%)
HEX: #26182C
RGB: 38, 24, 44
HSL: 282, 29%, 13%
Color acento (10%)
HEX: #0a3b85
RGB: 10, 59, 133
HSL: 216, 86%, 28%
5. Elimina cualquier duda aquí
¿Para qué sirve el generador de la regla 60-30-10?
Te permite crear paletas equilibradas y balanceadas mediante 3 colores: primario (60%), secundario (30%) y acento (10%). Es perfecto para lograr un diseño visualmente equilibrado.
¿Cómo uso este generador?
1. Selecciona un nivel de Accesibilidad. 2. Haz clic en cualquier botón 'Generar'. 3. Obtén colores de contraste accesible con la regla 60-30-10. 4. Restablece todos los valores con el botón 'Restablecer'.
¿Qué significa A, AA y AAA?
Son tres niveles establecidos por las Pautas de Accesibilidad para el Contenido Web (WCAG) que indican el grado de accesibilidad de un sitio web. • El nivel A es el mínimo. • El nivel AA es el estándar recomendado. • El nivel AAA es el máximo posible.
¿Qué es la relación de contraste?
Es una medida que muestra qué tan diferentes son dos colores, como el texto y el fondo, para asegurar que sean fáciles de leer.
¿Qué representan los valores 4.5 y 7?
Son los valores mínimos de contraste que aseguran una buena legibilidad en la web: • 4.5 significa que el texto debe ser 4.5 veces más oscuro o claro que el fondo para cumplir con el nivel AA. • 7 significa que el texto debe ser 7 veces más oscuro o claro que el fondo para cumplir con el nivel AAA.
¿Debo cumplir siempre con el nivel AAA?
El nivel AAA garantiza el máximo nivel de accesibilidad, pero en muchos casos cumplir con el nivel AA es suficiente y aceptable según las WCAG.
¿Puedo utilizar este generador solo con el teclado?
¡Sí, absolutamente! Este generador es totalmente accesible mediante el teclado. Aquí te explico cómo hacerlo: • Desplázate por toda la página con las flechas del teclado. • Navega entre los controles interactivos utilizando la tecla Tab para avanzar, y Shift + Tab para retroceder. • Activa los controles interactivos con Enter o Espacio.