Цветови контраст за текст, бутони и икони

Защо контрастът е важен

Бледият текст струва читатели. Хората със слабо зрение, по-възрастните читатели и всеки, който гледа телефон на ярка светлина, се нуждаят от ясна разлика между текста и фона. Затова Указанията за достъпност на уеб съдържанието (WCAG) на W3C определят минимални стойности за текст, за елементи за управление като бутони и полета за въвеждане и за икони и графики. Те могат да се измерят и проверят преди пускането.

Как работи съотношението на контраста

Съотношението на контраста сравнява колко светли са два цвята. WCAG не гледа нюанса, а относителната яркост: стойност между 0 за най-тъмното черно и 1 за най-светлото бяло. Трите канала червено, зелено и синьо се преобразуват и претеглят: зеленото тежи най-много, червеното по-малко, а синьото най-малко. Съотношението е (L1 + 0.05) / (L2 + 0.05), където L1 е яркостта на по-светлия цвят. Резултатът е между 1:1 за два еднакви цвята и 21:1 за черно върху бяло.

На практика са важни две правила на W3C. Първо, стойностите не се закръглят: съотношение 4,499:1 не достига границата от 4,5:1. Второ, контрастът се измерва спрямо фона, зададен за текста. Ако една страница задава само цвят на текста без цвят на фона, W3C го смята за неизпълнение, защото фонът по подразбиране на посетителя е неизвестен. Винаги задавай двата цвята заедно.

Трите критерия за успех

• 1.4.3 Контраст (минимален), ниво AA: текстът и изображенията на текст се нуждаят от поне 4,5:1, а големият текст – от поне 3:1.
• 1.4.6 Контраст (подобрен), ниво AAA: текстът се нуждае от поне 7:1, а големият текст – от поне 4,5:1. Това е по-строгото ниво и помага най-много при дълги текстове.
• 1.4.11 Контраст на нетекстови елементи, ниво AA: поне 3:1 спрямо съседните цветове за всичко, което трябва да видиш, за да разпознаеш един елемент за управление и неговото състояние (например рамката на поле за въвеждане или индикатор за фокус), и за частите на графиките, нужни, за да разбереш съдържанието, например икони или линии в диаграма.

Какво се смята за голям текст

Голям текст е текст от поне 18 пункта или поне 14 пункта в удебелен шрифт. W3C превръща това в около 24 пиксела и около 18,5 пиксела в удебелен шрифт. Големият текст може да има по-малък контраст, защото буквите са по-големи, а щрихите им – по-широки. Внимавай с тънките шрифтове: според W3C изглаждането може да направи тънки или необичайни шрифтове да изглеждат по-бледи от зададения им цвят. W3C препоръчва по-плътни шрифтове или цветова двойка ясно над минимума.

Какво не трябва да отговаря на изискванията

• Неактивни компоненти, например деактивиран бутон.
• Чиста декорация и текст, който никой не може да види.
• Текст, който е част от лого или име на марка.
• Случаен текст в картина със значимо друго съдържание, например табела с име на улица на снимка.

Чести грешки

• Светлосиво върху бяло. Сивото за дати, надписи или второстепенен текст често е твърде бледо: #999999 върху бяло достига само 2,84:1. Най-светлото чисто сиво, което минава AA за нормален текст върху бяло, е #767676 с 4,54:1.
• Текст върху изображения. Контрастът се променя с всяка част от снимката. W3C посочва фоновите изображения без достатъчен контраст като неизпълнение (F83). Сложи текста върху плътна площ, затъмни изображението зад него или постави текста до изображението. Провери най-светлото място зад текста.
• Текст в placeholder. Сивата подсказка в празно поле за въвеждане е текст и за нея се прилага 1.4.3. Светлосиво като #9ca3af върху бяло достига само 2,53:1. Освен това placeholder не заменя видимия етикет.
• Състояния при посочване и фокус. Текстът, който се появява или се променя при посочване с мишката или фокус от клавиатурата, трябва да отговаря на същите стойности. Ефектът при посочване не бива да намалява контраста на елемента за управление или да отслабва индикатора за фокус. Индикатор за фокус, който проектираш сам, се нуждае от 3:1 спрямо фона до него.
• Бял текст върху ярки цветове на марката. Оранжеви, жълти, светлозелени или тюркоазени бутони с бял текст често не минават: бяло върху #ff6600 достига 2,93:1.
• Бледи рамки и икони. Ако рамката е единственото, което показва къде е полето за въвеждане, тя се нуждае от 3:1: #cccccc върху бяло има 1,60:1. Иконите, които носят смисъл без текст, например стрелка на падащо меню или икона за затваряне, също се нуждаят от 3:1.
• Проверка само на една тема. Ако сайтът ти има тъмен режим, провери цветовите му двойки отделно. Цвят, който работи върху бяло, може да не мине върху тъмен фон.

Поправи палитрата на марката, без да загубиш марката

1. 1Запиши всеки цвят с неговата роля: текст, фон, акцент или бутон, рамка. Много проблеми започват, когато един цвят върши всяка работа.
2. 2Запази цвета на марката там, където правилата се изпълняват по-лесно или не се прилагат: в логото, върху големи площи, за декорация и за големи заглавия.
3. 3За текст и малки елементи използвай по-тъмен или по-светъл оттенък на същия нюанс. Ако се променя само светлината, цветът остава разпознаваем: бял текст върху #c74f00, по-тъмно оранжево, достига 4,61:1.
4. 4Или вместо това смени цвета на текста. Тъмен текст върху ярък цвят на марката често работи по-добре от бял: #1a1a1a върху #ff6600 достига 5,92:1.
5. 5Определи едно сиво за второстепенен текст, което минава, например #767676 върху бяло, и го използвай навсякъде вместо няколко бледи сиви.
6. 6Провери всяко състояние: нормално, при посочване, при фокус, при грешка и в тъмен режим. Запази крайните цветове като променливи в стиловия си файл, за да не избира никой отново ръчно блед цвят.

Провери цветовете си с Do4U

Инструментът Проверка на цветовия контраст изчислява тези стойности за твоите цветове. Въвеждаш цветовете си, по един на ред, и даваш на всеки роля: текст, фон, акцент (например бутон) или рамка. Кодът проверява всяка смислена двойка спрямо AA и AAA за нормален и голям текст и спрямо 3:1 за рамки, икони и площи на бутони, без да закръгля нагоре. За всяка двойка, която не минава, получаваш най-близкия цвят, който минава, веднъж по-тъмен и веднъж по-светъл, в същия нюанс. Do4U създава и нагодена палитра, проверява я отново като цяло и я експортира като CSS custom properties, SCSS или JSON. Всичко работи в код, без ИИ, а проверката е безплатна.

Проверката знае само цветовите двойки, които въвеждаш. Тя не може да види размери на шрифта, изображения зад текста, прозрачност или състояния при посочване и фокус, затова тествай и готовите страници. Do4U създава черновата, а ти проверяваш и решаваш.