1. Selecciona un nivel de accesibilidad
2. Genera colores de contraste para el fondo y el texto
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
12.73Cumplimiento WCAG
Códigos de color
Color de fondo
HEX: #E0E0E0
RGB: 224, 224, 224
HSL: 0, 0%, 88%
Color de contraste
HEX: #26182C
RGB: 38, 24, 24
HSL: 282, 29%, 13%
5. Elimina cualquier duda aquí
¿Para qué sirve el generador de dos colores?
Te permite crear combinaciones aleatorias de colores para fondo y texto. Es perfecto para explorar nuevas combinaciones de colores y encontrar la más adecuada para tus diseños.
¿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 accesibles para el fondo y el texto. 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.