HEX, RGB, HSL, CMYK і перевірка контрастності тексту

Код кольору – це один і той самий колір, записаний в іншій системі. HEX, RGB і HSL описують те саме світло на екрані, тож їх можна точно перетворити одне на одне, з урахуванням округлення. CMYK описує фарбу на папері, тому перетворення з екранних значень у CMYK є лише оцінкою. Коефіцієнт контрастності WCAG – окреме число, яке порівнює, наскільки два кольори відрізняються за світлістю, і яке показує, чи текст добре читається. Вставте колір у конвертер кольорів, щоб побачити всі формати одразу.

Конвертер кольорівПотрібен колір в іншому форматіБезкоштовно

Якщо потрібний колір є на фото, логотипі чи скриншоті, спершу візьміть його з пікселя за допомогою піпетки кольору із зображення, а потім вставте HEX сюди. Як вибрати точний колір із зображення пояснює кроки.

HEX і RGB – це ті самі числа

Код HEX складається з трьох пар шістнадцяткових цифр. #34D6A0 містить значення червоного, зеленого і синього. Кожна пара – це число від 00 до FF, тобто від 0 до 255 у десятковій системі. Отже, 34 – це 52, D6 – 214, а A0 – 160, і запис RGB має вигляд rgb(52, 214, 160).

Запис числа у шістнадцятковій системі змінює лише його вигляд. Скорочений запис #abc означає #aabbcc, тобто кожна цифра повторюється двічі. Восьмицифровий код додає в кінці пару альфа-каналу: від 00 (повністю прозорий) до FF (повністю непрозорий), тож #34D6A080 приблизно наполовину прозорий. RGBA задає ту саму прозорість числом від 0 до 1.

CSS також приймає назви кольорів. rebeccapurple – це #663399. Конвертер читає назви через сам браузер, тож працюватиме будь-яка назва, яку знає браузер.

HSL описує колір так, як його описують люди

HSL означає відтінок (hue), насиченість (saturation) і світлість (lightness). Відтінок – це кут на колі кольорів: червоний – 0 градусів, зелений – 120, синій – 240. Насиченість показує, наскільки колір відрізняється від сірого, а світлість – наскільки він далекий від чорного чи білого.

Той самий #34D6A0 має вигляд hsl(160, 66%, 52%). Його відтінок лежить між зеленим і синім, насиченість висока, а світлість трохи вища за середину. HSL найзручніше редагувати вручну: можна зберегти відтінок і змінювати лише світлість, щоб отримати світліший або темніший варіант.

HSV схожий на HSL, але замість світлості використовує яскравість (value) – яскравість найсильнішого каналу. Деякі палітри кольорів працюють саме з HSV, тож ви можете зустріти його в інших інструментах. Конвертер показує його поруч із HSL, щоб ви могли їх порівняти.

CMYK призначений для фарби, тому це оцінка

Екрани додають світло: червоний, зелений і синій разом дають білий. Друк, навпаки, віднімає світло фарбою: блакитна, пурпурна, жовта і чорна фарби на білому папері. Ці дві системи не можуть збігтися точно, тому значення CMYK завжди є перекладом.

Конвертер використовує просту формулу. Чорний канал K дорівнює одиниці мінус найбільше з значень червоного, зеленого і синього в шкалі від 0 до 1. Блакитний, пурпурний і жовтий канали потім обчислюються з того, що залишилося після K. Формула не враховує фарбу, папір і колірний профіль, який використовує друкарня. Тому надрукований результат відрізнятиметься, а дуже яскраві кольори можуть взагалі не відтворюватися фарбами CMYK. Використовуйте значення CMYK як відправну точку для розмови з друкарнею і замовте пробний друк перед великим тиражем.

Контрастність залежить від світлості, а не від відтінку

Коефіцієнт контрастності WCAG порівнює два кольори за їхньою відносною яскравістю (relative luminance). Яскравість обчислюється з значень червоного, зеленого і синього після гамма-корекції, причому зелений враховується найбільше, бо людське око найсильніше реагує саме на нього. Спочатку кожен канал переводиться зі шкали 0–255, а яскравість дорівнює 0,2126 × червоний плюс 0,7152 × зелений плюс 0,0722 × синій.

Коефіцієнт дорівнює: (більша яскравість + 0,05) поділити на (менша яскравість + 0,05). Чорний на білому дає 21 до 1 – найбільше можливе значення. Два кольори можуть відрізнятися відтінком, але мати низький коефіцієнт, якщо їхня світлість однакова, і саме такий випадок має виявляти перевірка. Через ту саму низьку контрастність QR-коди не сканують.

Пороги

WCAG 2.x визначає два рівні, а потрібний коефіцієнт залежить від розміру тексту.

• Рівень AA: 4,5 до 1 для звичайного тексту і 3 до 1 для великого тексту.
• Рівень AAA: 7 до 1 для звичайного тексту і 4,5 до 1 для великого тексту.

Великим вважається текст від 24 пікселів або від 18,66 пікселя жирним накресленням. Менший текст – звичайний. Типова помилка – сірий текст на білому. Середньо-сірий колір #777777 на білому дає приблизно 4,48 до 1. Він не проходить AA для звичайного тексту з невеликим відривом, але проходить AA для великих заголовків.

Конвертер показує коефіцієнт, округлений до двох знаків після коми, але кожна перевірка проходження використовує точне значення. Тому число, що відображається як 4,50, може все одно не пройти перевірку, якщо воно трохи менше. Перевірка вимірює лише одне: вона не враховує товщину шрифту, міжрядковий інтервал чи те, як людина з порушенням кольорового зору сприймає дизайн. Тому перевіряйте й реальну сторінку у фактичних розмірах.

Відтінки і тони

Смужка під конвертером показує дев'ять кроків навколо кольору: чотири світліші відтінки, змішані з білим, сам колір і чотири темніші тони, змішані з чорним. Клацнувши на один із них, ви скопіюєте його HEX-код. Це допомагає, коли потрібен набір пов'язаних кольорів, наприклад світлий фон, стан при наведенні і темний колір тексту, усі взяті з одного фірмового значення. Перевіряйте кожну пару, яку обираєте, у розділі контрастності перед використанням.

Як це зробити у fixmint

1. Вставте колір у поле Color у форматі HEX, RGB, HSL або як назву CSS, наприклад rebeccapurple.
2. Перегляньте рядки HEX, RGB, HSL, HSV і CMYK. Натисніть Copy біля потрібного. CMYK позначено як приблизний.
3. Введіть колір фону в Background або оберіть його зразок, а потім перегляньте коефіцієнт під On white, On black і On your background.
4. Перевірте чотири позначки під кожним коефіцієнтом: AA і AAA, окремо для звичайного і великого тексту.
5. У розділі Tints and shades натисніть на зразок, щоб його скопіювати.

Швидкі відповіді

Чи точне значення CMYK?

Ні. Це просте арифметичне перетворення, яке не враховує друкарню, папір і колірний профіль. Сприймайте його як відправну точку і замовте пробний друк.

Чи робить дизайн доступним те, що коефіцієнт контрастності проходить перевірку?

Це означає лише, що колір тексту відповідає одному вимірюваному порогу. Доступність також залежить від розміру, інтервалів, анімації та побудови сторінки, тож коефіцієнт є орієнтиром, а не повним аудитом.

Який формат краще зберігати в таблиці стилів?

Той, з яким вам найзручніше читати і редагувати. HEX компактний і поширений. HSL легше коригувати вручну, бо ви змінюєте світлість, не змінюючи відтінку.