Я малюю кнопку вибору кольору і шукаю гарну і просту формулу, щоб отримати хороший колір тексту (переднього плану) для даного кольору фону в RGB.
Простою спробою було б просто взяти колір доповнення, але це дасть дивну кнопку для кольорів, таких як чисто блакитний або чисто червоний.
Чи є щось добре відоме, що цим займається?
Якщо це взагалі важливо, я використовую QT.
Відповіді:
Для максимальної розбірливості вам потрібен максимальний контраст яскравості, не потрапляючи в відтінки, які не працюють разом. Найбільш послідовний спосіб зробити це - дотримуватися чорного або білого кольорів тексту. Можливо, ви зможете запропонувати більш естетичні схеми, але жодна з них не буде більш розбірливою.
Щоб вибрати чорний чи білий, потрібно знати яскравість фону. Це стає дещо складнішим через два фактори:
Сприймається яскравість окремих первинних кольорів червоного, зеленого та синього не є однаковими. Найшвидша порада, яку я можу дати, - це використовувати традиційну формулу для перетворення RGB у сірий - R * 0,299 + G * 0,587 + B * 0,114. Існує маса інших формул.
Крива гами, застосована до дисплеїв, робить середнє значення сірого вищим, ніж ви очікували. Це легко вирішити, використовуючи 186 як середнє значення, а не 128. Що завгодно менше 186, має використовувати білий текст, а все, що перевищує 186, має використовувати чорний текст.
Я не фахівець з програмування речей, пов’язаних з RGB, але з точки зору дизайнера, найчитабельнішим кольором буде просто набагато світліша (якщо колір фону темний) або темніша (якщо колір фону світлий) версія того ж відтінку.
В основному ви б взяли свої значення RGB, і якщо вони ближчі до 0 (темні), ви б підняли їх на одну рівну величину для вашого кольору переднього плану, або навпаки, якщо це світлий BG.
Додаткові кольори насправді можуть бути дуже болючими для очей для читабельності.
Використовуйте схему для читабельності
Якщо під "хорошим кольором тексту (переднього плану)" ви передбачаєте це з метою розбірливості, коли користувач вибирає any background colour, ви завжди можете створити білий текст із чорним контуром. Це буде розбірливо на будь-якому твердому, візерунковому або градієнтному тлі, від чорного до білого та будь-чого іншого.
Навіть якщо це не відповідає вашим намірам, я думаю, що це варто опублікувати тут, тому що я прийшов шукати подібні рішення.
Спираючись на відповідь Марка, ось якийсь Ruby-код, який зробить цю роботу
rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"
Вам краще з великою різницею у світності. Загалом, кольорові фони з кольоровим текстом смокчуть для читабельності, болячи очі з часом. Злегка тоновані кольори (наприклад, у HSB, S ~ 10%, B> 90%) з чорним текстом працюють добре, або злегка тонований текст на чорному тлі. Я б тримався подалі від забарвлення обох. Темний текст (b ~ 30%, s> 50%) з тонким забарвленням на білому фоні також може бути чудовим. Жовтий (бурштиновий) текст на темно-синьому фоні має чудову читабельність, як і жовтий або зелений на чорному. Ось чому старі фігури (vt100, vt52 тощо) використовували ці кольори.
Якщо вам дійсно потрібно зробити кольоровий колір для "зовнішнього вигляду", ви можете змінити як H, так і B, одночасно закріплюючи насиченість на помірному та низькому рівні.
І остання примітка: якщо у вас 50% сірого фону, перегляньте свій інтерфейс. Ви позбавляєте себе половини динамічного діапазону! Ви відчужуєте користувачів із низькою видимістю, включаючи тих, хто старше 35 років ...
Комбінації кольорів часто виглядають жахливо, якщо їх не ретельно підібрати. Чому б не використовувати для тексту білий чи чорний, залежно від яскравості кольору. (Спочатку потрібно перетворити на HSB.)
Або дозвольте користувачеві вибрати чорний або білий текст.
Або використовуйте заздалегідь визначені комбінації. Це те, що Google робить у своєму календарному продукті.
Я шукав simailr відповідь і натрапив на цю публікацію та деякі інші, якими я думав поділитися. Відповідно до http://juicystudio.com/services/luminositycontrastratio.php#specify "Критерій успіху 1.4.3 WCAG 2.0 вимагає візуального подання тексту, а зображення тексту мають коефіцієнт контрастності не менше 4,5: 1", а деякі винятки. Цей сайт дозволяє вводити кольори переднього та заднього планів для обчислення їх контрастності, хоча було б корисно, якщо б пропонував альтернативи або діапазони.
Одним з найкращих сайтів, я знайшов для візуалізації кольорового контрасту, є http://colorizer.org/. Він дозволяє одночасно регулювати майже всі кольорові шкали (RGB, CMYK тощо), а потім показує результат на екрані, наприклад білий текст на жовтому фоні.
Я зазвичай розглядаю кольорові доповнення, вони також мають колісні допоміжні колеса, щоб допомогти
http://www.makart.com/resources/artclass/cwheel.html
Якщо ваш колір HSL, переверніть відтінок на 180 градусів для гідного розрахунку