Color y diseño
El diseño empieza aquí por el color: cómo el ojo convierte la luz en color, cómo una pantalla lo escribe con tres números y cómo comprobar que un texto se puede leer bien.
Siete unidades sobre un sólido de color
Por ahora la materia tiene un solo curso, Teoría del color, con siete unidades. La primera explica cómo vemos el color. Las dos siguientes tratan el RGB con los códigos hex y después el tono, la saturación y la luminosidad. La cuarta construye armonías de color, la quinta compara la mezcla de luz con la mezcla de tinta, y las dos últimas se dedican al contraste y al uso del color en un diseño real. Casi todas las unidades comparten un modelo que puedes girar con el ratón: un cubo RGB de 512 bloques pequeños, o los mismos colores reordenados en un cilindro HSL. Haz clic en un punto y el panel de abajo te muestra su código hex, sus valores HSL, sus colores en armonía y su relación de contraste con el fondo que elijas.
Conos, prismas y el cubo RGB
Una manzana roja no contiene nada de rojo. Absorbe las longitudes de onda cortas y medias de la luz del sol y devuelve las largas. La retina tiene unos 6 millones de conos de tres tipos, y el color aparece cuando el cerebro los compara. Por eso una luz amarilla pura y una mezcla de luz roja y verde pueden verse idénticas. Newton descompuso la luz del sol con prismas en la década de 1660 y dibujó uno de los primeros círculos cromáticos en Opticks, en 1704. En la web cada canal va de 0 a 255, así que rgb(0 0 0) es el negro y rgb(255 255 255) es el blanco. Un código hex son tres pares de dígitos en base 16: en #2273c3, el par c3 vale 12 × 16 + 3 = 195.
Ángulos en el círculo de tonos
HSL coloca el tono como un ángulo: 0deg es rojo, 120deg verde y 240deg azul. Con un 0% de saturación el tono no cambia nada, y un 50% de luminosidad da la versión más viva de cada tono. Este modelo tiene un límite, y se dice con claridad: el amarillo y el azul con la misma luminosidad del 50% tienen luminancias de 0.9278 y 0.0722. Cuando los colores están en el círculo, una armonía es un conjunto de ángulos. Los tonos complementarios están a 180 grados, una tríada son tres tonos separados 120 grados y un esquema complementario dividido usa 150 y 210 grados. Hay que tener cuidado con una diferencia: el círculo de la luz pone el azul frente al amarillo, mientras que el del pintor lo pone frente al naranja. Las tintas funcionan al revés que la luz: el cian quita el rojo, el magenta quita el verde y el amarillo quita el azul. Las imprentas agregan negro porque las tintas reales dan un marrón turbio.
La relación que decide si se lee
Que un texto se lea bien se mide, no se decide a ojo. La luminancia relativa de las WCAG pondera los canales linealizados con 0.2126 para el rojo, 0.7152 para el verde y 0.0722 para el azul, y la relación de contraste es (L1 + 0.05) / (L2 + 0.05), que va de 1:1 a 21:1. El nivel AA pide 4.5:1 para el texto normal y 3:1 para el texto grande y los elementos de la interfaz; el AAA pide 7:1. El gris #767676 sobre blanco llega a 4.54:1 y aprueba, mientras que el rojo #ff0000 llega a 4.00:1 y no aprueba para el texto normal. La última unidad agrega el criterio 1.4.1 de las WCAG: el color nunca debe ser la única forma de transmitir información, porque el daltonismo rojo-verde afecta a cerca del 8% de los hombres. Planifica primero los pasos de luminosidad y después los tonos; en el modelo, el naranja de la marca y su azul complementario solo llegan a 1.06:1.
Preguntas sobre esta materia
¿Qué significan los números de un color RGB?
Fijan los canales rojo, verde y azul, normalmente de cero a 255 en código web. Cero apaga un canal y 255 lo enciende por completo: todos a cero dan negro y todos a 255, blanco. Un color hexadecimal registra esos mismos tres canales como tres pares de dígitos de base dieciséis, no usa otros colores. Teoría del color
¿Por qué dos colores HSL con igual luminosidad parecen tener distinto brillo?
La luminosidad HSL es una coordenada de un modelo, no una medida directa del brillo percibido. Amarillo y azul totalmente saturados tienen ambos luminosidad del cincuenta por ciento, pero el amarillo parece mucho más claro. Sus luminancias relativas WCAG son 0.9278 y 0.0722: igualar solo HSL no demuestra contraste suficiente entre texto y fondo. Teoría del color
¿Por qué cambiar el tono no hace nada con saturación cero?
Con saturación cero, el color está en el eje gris del modelo HSL. El tono deja de afectarlo: los ángulos de rojo y cian con luminosidad del cincuenta por ciento dan el mismo gris. La luminosidad sí importa: cero por ciento da negro y cien por ciento blanco, sea cual sea el ángulo elegido en el círculo cromático. Teoría del color
¿Por qué las impresoras agregan tinta negra en vez de mezclar solo tres colores?
Las tintas reales cian, magenta y amarilla son filtros imperfectos: juntas pueden dar marrón oscuro sucio en vez de negro limpio. Imprimir tres capas solo para texto negro también es lento y deja la impresión muy húmeda. CMYK agrega por eso una tinta negra separada; la pintura real es aún más compleja porque los pigmentos dispersan y absorben luz. Teoría del color
¿Qué relación de contraste exige WCAG AA para texto normal?
El texto normal necesita al menos 4.5:1 y el texto grande que cumple los requisitos, 3:1. La relación compara luminancias relativas de texto y fondo, no solo diferencias de tono. Rojo #ff0000 sobre blanco da 4.00:1: cumple el umbral de texto grande, pero no el normal, aunque parezca una elección intensa y viva. Teoría del color