Цвет и дизайн
Дизайн начинается здесь с цвета: как глаз превращает свет в цвет, как экран записывает его тремя числами и как проверить, что текст остаётся читаемым.
Семь уроков вокруг одного цветового тела
Пока в предмете один курс, Теория цвета, из семи уроков. Первый объясняет, как мы видим цвет. Следующие два посвящены RGB с шестнадцатеричными кодами, а затем тону, насыщенности и светлоте. В четвёртом ты строишь цветовые гармонии, пятый сравнивает смешение света со смешением красок, а последние два посвящены контрасту и цвету в настоящем дизайне. Почти во всех уроках есть одна и та же модель, которую можно вращать мышью: куб RGB из 512 маленьких блоков или те же цвета, переставленные в цилиндр HSL. Щёлкни по точке, и панель ниже покажет её шестнадцатеричный код, значения HSL, гармоничные цвета и коэффициент контраста с выбранным тобой фоном.
Колбочки, призмы и куб RGB
В красном яблоке нет ничего красного. Оно поглощает короткие и средние волны солнечного света и отражает длинные. В сетчатке около 6 миллионов колбочек трёх видов, и цвет возникает, когда мозг сравнивает их сигналы. Поэтому чистый жёлтый свет и смесь красного и зелёного света могут выглядеть одинаково. Ньютон разложил солнечный свет призмами в 1660-х годах и в 1704 году нарисовал в «Оптике» один из первых цветовых кругов. В вебе каждый канал принимает значения от 0 до 255, поэтому rgb(0 0 0) означает чёрный, а rgb(255 255 255) белый. Шестнадцатеричный код состоит из трёх пар цифр в системе счисления с основанием 16: в #2273c3 пара c3 означает 12 × 16 + 3 = 195.
Углы на круге тонов
В HSL тон задаётся углом: 0deg соответствует красному, 120deg зелёному, 240deg синему. При насыщенности 0% тон ни на что не влияет, а светлота 50% даёт самый яркий вариант тона. У модели есть ограничение, и о нём сказано прямо: у жёлтого и синего при одинаковой светлоте 50% относительная яркость равна 0.9278 и 0.0722. Когда цвета стоят на круге, гармония становится набором углов. Комплементарные тона отстоят друг от друга на 180 градусов, триада состоит из трёх тонов через 120 градусов, а расщеплённая комплементарная схема использует 150 и 210 градусов. Обрати внимание на одно различие: на круге света синий стоит напротив жёлтого, а на круге художника напротив оранжевого. Краски работают наоборот по сравнению со светом: голубая убирает красный, пурпурная убирает зелёный, жёлтая убирает синий, а в типографиях добавляют чёрную, потому что настоящие краски дают грязно-коричневый цвет.
Отношение, от которого зависит читаемость
Читаемость текста измеряют, а не оценивают на глаз. Относительная яркость по WCAG складывает линеаризованные каналы с весами 0.2126 для красного, 0.7152 для зелёного и 0.0722 для синего, а коэффициент контраста равен (L1 + 0.05) / (L2 + 0.05) и лежит в пределах от 1:1 до 21:1. Уровень AA требует 4.5:1 для основного текста и 3:1 для крупного текста и элементов интерфейса, уровень AAA требует 7:1. Серый #767676 на белом даёт 4.54:1 и проходит, а красный #ff0000 даёт 4.00:1 и для основного текста не проходит. Последний урок добавляет критерий WCAG 1.4.1: цвет никогда не должен быть единственным способом передать информацию, ведь нарушение красно-зелёного цветового зрения есть примерно у 8% мужчин. Сначала спланируй ступени светлоты, а потом тона: фирменный оранжевый и дополнительный к нему синий в модели дают всего 1.06:1.
Вопросы по предмету
Что означают числа цвета RGB?
Они задают каналы красного, зелёного и синего, обычно от нуля до 255 в веб-коде. Ноль выключает канал, 255 включает полностью. Все нулевые каналы дают чёрный, все по 255 белый. Шестнадцатеричная запись кодирует те же три канала тремя парами цифр с основанием шестнадцать, а не использует иной набор цветов. Теория цвета
Почему цвета HSL с одинаковой светлотой выглядят по-разному по яркости?
Светлота HSL является координатой модели, а не прямой мерой воспринимаемой яркости. Полностью насыщенные жёлтый и синий имеют светлоту пятьдесят процентов, но жёлтый выглядит гораздо светлее. Относительная яркость WCAG равна соответственно 0.9278 и 0.0722. Совпадение числа HSL само по себе не доказывает достаточный контраст текста и фона. Теория цвета
Почему смена тона ничего не меняет при нулевой насыщенности?
При нулевой насыщенности цвет находится на серой оси HSL. Тон больше не влияет: углы красного и голубого при светлоте пятьдесят процентов дают один и тот же серый. Светлота всё ещё важна: ноль процентов даёт чёрный, а сто процентов белый независимо от выбранного угла цветового круга. Теория цвета
Почему в печати добавляют чёрную краску, а не смешивают только три цвета?
Настоящие голубая, пурпурная и жёлтая краски — несовершенные фильтры, поэтому смесь может дать грязный тёмно-коричневый вместо чистого чёрного. Печатать три слоя ради чёрного текста к тому же долго, и бумага остаётся влажной. Поэтому CMYK добавляет отдельную чёрную краску. Поведение настоящих красок ещё сложнее: пигменты не только поглощают, но и рассеивают свет. Теория цвета
Какой контраст нужен обычному тексту для WCAG AA?
Обычному тексту требуется минимум 4.5:1, крупному, соответствующему критериям, 3:1. Это отношение сравнивает относительные яркости переднего плана и фона, а не просто различие тонов. Красный #ff0000 на белом даёт 4.00:1: проходит порог крупного текста, но не обычного, хотя сочетание кажется сильным и ярким. Теория цвета