El color en pantalla son tres números: cuánta luz roja, verde y azul se mezcla, cada una de 0 a 255. Todo lo demás, los códigos hexadecimales, HSL y las relaciones de contraste, son otras formas de escribir o juzgar esos tres números.
Hex, RGB y HSL son el mismo color
#3366cc es el hexadecimal de rojo 0x33 = 51, verde 0x66 = 102 y azul 0xCC = 204, así que también es rgb(51, 102, 204). Cada canal tiene 256 niveles, lo que da 256³ = 16.777.216 colores. Un hexadecimal de tres dígitos como #36c duplica cada dígito (#3366cc). Convierta entre formas con el Convertidor de Color y el Convertidor de RGB a HEX.
HSL describe el mismo color como tono, saturación y luminosidad: #3366cc es hsl(220, 60%, 50%). El tono es la posición en la rueda cromática en grados (0 rojo, 120 verde, 240 azul), así que desplazarlo 180° da el complementario: aquí #cc9933, un naranja. HSL es más cómodo para crear variantes más claras, oscuras o menos saturadas.
Contraste: ¿se puede leer?
WCAG define el contraste como (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro, una suma ponderada de los canales linealizados (0,2126 R + 0,7152 G + 0,0722 B; el verde pesa más porque el ojo es más sensible a él). La relación va de 1:1 (idénticos) a 21:1 (negro sobre blanco).
| Nivel | Texto normal | Texto grande y partes de interfaz |
|---|---|---|
| AA | al menos 4,5:1 | al menos 3:1 |
| AAA | al menos 7:1 | al menos 4,5:1 |
El texto grande son unos 24px o 19px en negrita. Algunos valores reales: negro sobre blanco es 21:1; el gris #767676 sobre blanco es 4.54:1, el gris neutro más claro que pasa AA para texto de cuerpo, mientras que #777777 es 4.48:1 y no pasa; el azul de Bootstrap #0d6efd sobre blanco es 4.50:1, justo en el límite. Pruebe sus propios pares con el Verificador de Contraste de Color.
No dependa solo del color. Use una segunda señal (un icono, subrayado o etiqueta) para errores y enlaces, y elija pares que sigan siendo distinguibles para personas con daltonismo. Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen una deficiencia rojo-verde; el Simulador de Daltonismo muestra cómo ven una imagen.
Construir y encontrar paletas
- Complementario: tono + 180°. Análogo: tonos a menos de unos 30° entre sí. Triádico: tonos separados 120°.
- Elija un color base de una foto con el Selector de Color de Imagen o extraiga una paleta completa de una imagen con el Extractor de Paleta de Colores de Imágenes.
- Genere ideas con el Generador de Paletas de Colores Aleatorias y compruebe después el contraste de cada par de texto y fondo.
- Los degradados mezclan dos colores; cree uno con el Generador de Degradados CSS y mantenga el contraste del texto alto en ambos extremos.
Errores frecuentes
- Texto gris claro sobre blanco. Queda elegante y falla en legibilidad para mucha gente.
- Comprobar solo el fondo. El texto sobre una foto o degradado hay que comprobarlo en su peor punto.
- Depender de rojo frente a verde. Añada formas o etiquetas.
- Olvidar el modo oscuro. Pruebe la paleta en ambos temas.