Статия
Извличане на достъпна цветова палитра от изображение
Снимка или брандов актив често съдържат зародиша на пълна цветова система. Извличането на този зародиш, оформянето му в използваема палитра, а след това проверката й спрямо стандарти за достъпност изисква три отделни стъпки. Тази статия обхваща всяка от тях по ред: как работи извличането на палитра под капака, как да изберете и настроите цветовете за практическа употреба, как да проверите контраста спрямо прагове WCAG и как да уловите двойките, които се сливат за потребители с цветна слепота.
Как се извлича палитра: вземане на проби от пиксели и квантизация на цвета
Всяко цифрово изображение е мрежа от пиксели, всеки носещ цветова стойност в пространство като RGB. Извличачът на палитра не инспектира всеки пиксел поотделно: снимка с 2 мегапиксела съдържа 2 милиона точки данни, обработването на които би било бавно и би върнало хиляди леко различаващи се нюанси, вместо полезен набор. Вместо това инструментът взема проби от мрежата от пиксели на редовни интервали, събирайки представителна подгрупа. Тази подгрупа след това се подава в алгоритъм за квантизация на цвета. Най-разпространеният подход групира подобни цветове заедно, използвайки метод за клъстеризиране, понякога наречен median-cut или разделяне в стил k-means. Алгоритъмът поставя всеки взет пиксел в едно от фиксиран брой контейнери въз основа на цветово сходство, след което изчислява средния цвят на всеки контейнер. Резултатът е кратък списък, обикновено от 4 до 16 цвята, които заедно отчитат доминиращите визуални тонове в изображението. Цветовете, появяващи се само в малки изолирани области, може да бъдат пропуснати, което е очаквано поведение, а не недостатък.
От необработени доминиращи цветове до използваема палитра
Необработеният изход на извличача на палитра е списък от цветове, наредени по честота, но честотата сама по себе си не прави палитра. Снимка на гора ще върне няколко зелени, които са твърде подобни, за да се използват в потребителски интерфейс като отделни акценти. Практическата работа е избор и настройка. Започнете, като идентифицирате един цвят като основен: този, който е най-отличителен и най-малко неутрален. От останалите цветове потърсете най-много два, които контрастират с основния и помежду си. Те стават вашите акценти. Всичко останало, включително ненаситените тонове, които извличачът често връща от сенките и средните тонове, може да служи като неутрален за фонове и рамки. След като имате тази груба структура, почти сигурно ще трябва да настроите отделни стойности. Инструментът color-converter ви позволява да разглеждате всеки цвят в hex, RGB и HSL. HSL е особено полезен тук: можете да запазите постоянен нюанса и да измествате яркостта или наситеността, за да създадете по-тясно или по-широко семейство, без да напускате същото цветово семейство.
Проверка на контраста: прагове WCAG за четим текст
След като имате кандидат-цветове за текст и фон, трябва да проверите дали комбинацията е четима. Насоките за достъпност на уеб съдържанието (WCAG) определят коефициент на контраст за тази цел. Коефициентът сравнява относителната яркост на два цвята: стойност 1:1 означава никакъв контраст (същият цвят върху същия цвят), а 21:1 е максимумът (черно върху бяло). WCAG 2.1 Ниво AA изисква коефициент от поне 4.5:1 за текст с нормален размер и 3:1 за голям текст (18 пункта или 14 пункта удебелен). Ниво AAA задава по-високи прагове от 7:1 и 4.5:1 съответно. Не е необходимо да изчислявате яркостта ръчно. Ключовото прозрение е, че цветова двойка, която изглежда добре за вас при добро осветление, може да падне под 4.5:1 на екрана, и насоката съществува именно за такъв случай. След извличане и настройка на цветовете, тествайте всяка двойка текст-върху-фон, която планирате да използвате. Средно сив, който се чете добре върху бяло, може да не успее напълно на светлобежов фон от извлечената ви палитра.
Цветна слепота: симулиране на това как двойките изглеждат за засегнатите потребители
Приблизително 1 от 12 мъже и 1 от 200 жени имат някаква форма на дефицит в цветното зрение. Най-разпространеният тип е дейтеранопия (намалена чувствителност към зелено), следвана от протанопия (намалена чувствителност към червено). Тританопия (намалена чувствителност към синьо-жълто) е по-рядка. За всеки тип зрителната система преобразува определени дължини на вълните към един и същи възприет цвят, който незасегнатите зрители виждат като отделни. Практическият проблем за палитрата е, че два цвята, изглеждащи ясно различими при нормално зрение, могат да се слеят в един и същи тон за потребител с цветна слепота, правейки ги безполезни за предаване на различие, например при използване само на червено и зелено за обозначаване на успех и грешка. Изпълнението на симулация на цветна слепота ви показва как изглежда палитрата, когато засегнатите канали са компресирани. Двойките, които се сливат в почти идентично сиво или кафяво, са тези, които трябва да преразгледате: или увеличете разликата в яркостта между тях, така че контрастът да остане дори без разлика в нюанса, или добавете вторичен сигнал (форма, етикет, шаблон), така че цветът да не е единственият сигнал.
Правете го локално: color-palette, color-blindness и color-converter
Всички три стъпки, описани в тази статия, могат да бъдат завършени, без да изпратите изображението или брандовите си цветове до сървър. Инструментът color-palette работи изцяло в браузъра: пускате изображение, той взема проби от пикселите локално и връща доминиращите цветове като hex стойности. Не се предава файл. Инструментът color-converter приема hex код и показва същия цвят в RGB и HSL, за да можете да правите целенасочени настройки на яркостта или наситеността, докато оставате в същото цветово семейство. И hex, и конвертираните стойности съществуват само на страницата. Инструментът color-blindness работи в обратна посока: пускате изображение и той изобразява симулации на дейтеранопия, протанопия и тританопия на това изображение, изчислени в браузъра. За да проверите палитра вместо снимка, първо експортирайте или направете екранна снимка на цветните си мостри като изображение, а после я пуснете в симулатора. Използването на трите инструмента в последователност, извличане от изображението, настройка в color-converter, после експортиране на изображение с мостри и проверка в color-blindness, обхваща целия работен процес, описан по-горе. Изображението ви остава на устройството ви по цялото време, което е важно, ако изходната снимка съдържа непубликуван бранд или неиздадена идентичност на клиент.
Инструменти от тази статия
- Извличане на цветова палитраИзвличайте доминиращите цветове от изображение като HEX образци. Копирайте всеки цвят. Без качване.
- Симулатор на цветна слепотаСимулирайте протанопия, дейтеранопия, тританопия и ахроматопсия върху изображение. Без качване.
- Конвертор на цветовеКонвертирайте цветове между HEX, RGB, HSL, HSV и CMYK. Включен WCAG проверяващ за контраст. Без качване.
- Генератор на цветови схемиГенерирайте комплементарни, аналогови, триадни, тетрадни и монохроматични палитри от основен цвят. Без качване.
Често задавани въпроси
Колко цвята обикновено връща извличачът на палитра?
Повечето инструменти връщат между 5 и 16 цвята по подразбиране, въпреки че много позволяват да зададете броя. Връщането на по-малко цветове означава, че алгоритъмът трябва да групира повече пиксели заедно, което може да слее отделни, но подобни тонове. Връщането на повече цветове може да произведе почти дублиращи се, които са трудни за използване по отделен начин. За палитра на потребителски интерфейс, 6 до 8 цвята обикновено е практическа отправна точка.
Може ли палитра, извлечена от изображение, автоматично да премине WCAG контраст?
Не автоматично. Доминиращите цветове в снимката често са средни тонове с умерена яркост, които са склонни да произведат коефициенти в диапазона 2:1 до 3:1 един спрямо друг. Достигането на прага 4.5:1 за основен текст обикновено изисква изсветляване на фоновите стойности или потъмняване на стойностите на текста отвъд необработения екстракт. Извличането ви дава начална точка; проверката на контраста ви казва колко корекция е необходима.
Отчита ли коефициентът на контраст WCAG цветната слепота?
Частично. Формулата за яркост на WCAG се основава на относителна яркост, а не на нюанс, така че двойка с висок контраст, отговаряща на 4.5:1, обикновено ще остане разграничима дори за потребители с цветна слепота, защото разликата в яркостта се запазва. Въпреки това два цвята с подобна яркост, но различни нюанси, като червено и зелено при еднаква яркост, могат да преминат проверка на контраст, базирана на яркост, докато все още са неразличими за хора с дейтеранопия. Изпълнението на симулация на цветна слепота е правилният начин за отделна проверка на диференциацията на ниво нюанс от коефициента на контраст.