Цвет и единицы измерения

У светло-серого текста #bbbbbb на белом коэффициент контраста 1.92 к 1. WCAG требует не меньше 4.5 к 1 для обычного текста.

Способы записать цвет

CSS принимает цвета в нескольких записях, и все они сводятся к одному: количеству красного, зелёного и синего света на экране. Именованные цвета, например red, navy или rebeccapurple, легко читать, но их немного. Шестнадцатеричная запись задаёт красный, зелёный и синий двумя шестнадцатеричными цифрами каждый, от 00 до ff (от 0 до 255): #1a5fb4 означает 26 красного, 95 зелёного и 180 синего, то есть средний синий. rgb(26 95 180) говорит то же в десятичной записи. hsl(210 80% 40%) описывает цвет через тон (угол на цветовом круге, где 0 соответствует красному, 120 зелёному, 240 синему), насыщенность и светлоту, поэтому светлый или тёмный оттенок того же тона легко получить, изменив одно число.

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

Четвёртое значение после косой черты задаёт альфа-канал: rgb(0 0 0 / 50%) означает чёрный с непрозрачностью наполовину, так что всё, что позади, просвечивает. color задаёт цвет текста, background-color заливку позади элемента, а border-color его рамку. Ключевое слово currentColor означает цвет текста элемента, это удобно для значков и рамок, которые должны совпадать с текстом.

Контраст обязателен

Текст, который по светлоте слишком близок к фону, многим трудно читать: людям со слабым зрением, пожилым читателям и всем, кто смотрит в телефон на солнце. WCAG 2.2, руководство W3C по доступности, измеряет это коэффициентом контраста от 1 к 1 (никакой разницы) до 21 к 1 (чёрное на белом). Критерий успеха 1.4.3 требует не меньше 4.5 к 1 для обычного текста и 3 к 1 для крупного, который WCAG определяет как не меньше 18 пунктов, или 14 пунктов жирным. Тёмно-серый #767676 на белом проходит впритык с 4.54 к 1; #777777 чуть не проходит с 4.48. Инструменты разработчика в браузере показывают коэффициент, когда ты изучаешь текстовый элемент, так что гадать не нужно.

Кроме того, цвет никогда не должен быть единственным способом показать информацию. Форма, которая отмечает ошибки только красной рамкой, бесполезна для тех, кто плохо различает красный; добавь ещё сообщение или значок.

Абсолютные и относительные единицы

Длинам нужна единица измерения, кроме нуля. px является CSS-пикселем, фиксированной единицей; на экранах высокой плотности один CSS-пиксель занимает несколько физических пикселей, поэтому на глаз он остаётся примерно одного размера. Относительные единицы зависят от чего-то другого. em зависит от размера шрифта самого элемента, поэтому padding: 0.5em у текста в 20 пикселей равен 10 пикселям. rem зависит от размера шрифта корня (html), который в браузерах равен 16 пикселям, если читатель его не менял, поэтому 1.25rem обычно равен 20 пикселям. % зависит от родителя, обычно от его ширины. vw и vh являются сотыми долями ширины и высоты области просмотра, а ch примерно равен ширине цифры ноль в текущем шрифте.

Что выбрать? Размер текста в rem уважает читателя: если человек включил в браузере крупный текст, всё, что задано в rem, увеличится вместе с ним, а текст с размером в px может и не увеличиться. Внутренний отступ в em растёт вместе с текстом, который он окружает. Пиксели хороши для того, что не должно масштабироваться, например для рамки в 1 пиксель.