Selector de color y comprobador de contraste
Elige un color con el selector o escríbelo en cualquier formato. Míralo en HEX, RGB, HSL, HSV y CMYK, obtén tintes, sombras y colores a juego, y comprueba si un texto en dos colores cumple las pautas de contraste WCAG de accesibilidad.
Colores
Acerca de Selector de color y comprobador de contraste
Elige un color con el selector o escríbelo en cualquier formato. Míralo en HEX, RGB, HSL, HSV y CMYK, obtén tintes, sombras y colores a juego, y comprueba si un texto en dos colores cumple las pautas de contraste WCAG de accesibilidad.
Forma parte de la sección «Archivos, imágenes y diseño» de SmartCalcy. Se ejecuta en tu navegador sin cuenta, usa tu propia moneda y unidades (cámbialas en la parte superior de la página) y da estimaciones solo a título informativo, así que consulta la guía oficial antes de fiarte de un resultado.
Cómo usar la Selector de color y comprobador de contraste
Qué calcula y cuándo usarla
Elige y convierte colores entre HEX, RGB, HSL, HSV y CMYK, sugiere tintes, sombras y colores a juego, y comprueba el contraste del texto según las pautas de accesibilidad WCAG.
Cómo usarla, paso a paso
- Elige un color con el selector o escríbelo como HEX, RGB, HSL o nombre de color.
- Elige un color de fondo para comprobar el contraste.
- Copia cualquier formato con un clic.
- Usa los tintes, sombras y colores a juego para crear una paleta.
Qué significa cada dato
- Color – Empieza en #2443C8, el azul de SmartCalcy.
- Fondo – Empieza en blanco.
Cómo leer los resultados
- Relación de contraste – De 1:1 a 21:1, con resultados AA y AAA para texto normal y grande.
- Formatos – HEX, RGB, HSL, HSV y CMYK.
- Tintes y sombras – Versiones más claras y más oscuras.
- Colores a juego – Complementarios, análogos y en tríada.
La fórmula
Relación de contraste = (L1 + 0,05) ÷ (L2 + 0,05), donde L1 y L2 son las luminancias relativas del color más claro y del más oscuro. WCAG AA exige 4,5:1 para texto normal y 3:1 para texto grande; AAA exige 7:1 y 4,5:1.
Un ejemplo práctico
Con los colores iniciales, #2443C8 sobre blanco tiene una relación de contraste de 7,74:1, que cumple AAA para todos los tamaños de texto.
Supuestos y límites
- Los valores CMYK son una conversión simple, no un perfil de impresión con gestión del color.
- Los resultados de contraste siguen la fórmula de WCAG 2.
Errores comunes
- Comprobar el contraste solo con texto grande y luego usar el color para texto pequeño.
- Confiar solo en el color para transmitir significado.
Preguntas frecuentes
¿Qué relación de contraste necesito?
Al menos 4,5:1 para texto normal y 3:1 para texto grande para cumplir WCAG AA.
¿El texto grande tiene un tamaño especial?
Sí: al menos 24 px, o unos 18,7 px en negrita.
¿Puedo escribir el nombre de un color?
Sí, funciona cualquier nombre de color CSS, como teal o tomato.
Herramientas relacionadas
| Nivel | Texto normal | Texto grande |
|---|---|---|
| AA | Cumple | Cumple |
| AAA | Cumple | Cumple |
Formatos
- HEX
- RGB
- HSL
- HSV
- CMYK