Как да одитирате цветовия контраст, без да инсталирате нищо

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

За продукционен уебсайт най-бързият надежден одит обикновено се прави в браузъра, който вече сте отворили. Съвременните browser DevTools могат да инспектират изчислените цветове, да показват съотношения на контраст, да разкриват стилове за състояния и да ви помогнат да тествате неудобните случаи, които автоматизираните отчети пропускат.

Това ръководство приема, че не инсталирате нищо. Без browser extensions. Без дизайнерски плъгини. Без платен пакет за одит. Само страницата, браузърът и прост метод.

Правилата за контраст, които реално ви трябват

За повечето уеб работа контрастът според WCAG се свежда до няколко прага:

• Обикновен текст: поне 4.5:1 контраст спрямо фона.
• Едър текст: поне 3:1. WCAG го определя приблизително като 24 CSS пиксела или около 18.66 CSS пиксела, ако е получер.
• Компоненти на потребителския интерфейс и графични обекти: поне 3:1 за значими граници, икони, състояния и части от диаграми, необходими за разбиране на интерфейса.
• Повишен контраст: 7:1 за обикновен текст и 4.5:1 за едър текст, ако целите повече от базовото ниво.

Има изключения, като неактивни контроли, декоративни елементи и лога. Използвайте тези изключения пестеливо. „Това е част от бранда“ не е изключение; това е дизайнерско ограничение.

Също така помнете, че контрастът е само една част от достъпното използване на цвят. Ако червено състояние за грешка има достатъчен контраст, но няма текст, етикет на икона или програмно указание, то пак може да е неуспешно за потребители, които не могат да различат червеното от близки цветове.

Започнете с рендерираната страница, не с дизайнерския файл

Дизайнерските файлове са полезни, но не включват всяка реална променлива: CSS презаписвания, прозрачност, hover състояния, рендериране на шрифтове от браузъра, потребителско увеличение, dark mode, наследени стилове, CMS съдържание и маркетингови вграждания.

Одитирайте страницата така, както потребителите я получават.

Отворете страницата в актуален desktop браузър. Chrome, Edge, Firefox и Safari имат полезни инструменти за инспекция. Точните етикети се различават, но работният процес е същият:

1. Щракнете с десен бутон върху текста или UI елемента.
2. Изберете Inspect.
3. Намерете изчислените color и background-color.
4. Използвайте цветовия образец на браузъра или панела за достъпност, за да прочетете съотношението на контраст.
5. Запишете успешно, неуспешно и неясно.

В браузъри, базирани на Chromium, color picker често показва съотношение на контраст и насоки за pass/fail по WCAG за текст. Firefox DevTools също показва информация за достъпност и цветови инструменти. Safari Web Inspector може да показва изчислени стилове и информация за достъпност, макар че работният процес е малко по-различен.

Ключът не е конкретният браузър. Ключът е да четете изчисления резултат, а не стойността, която някой смята, че компонентът използва.

Първо изградете кратък списък за одит

Не инспектирайте произволен текст, докато се изморите. Направете кратка инвентаризация на шаблони:

• Основен текст върху главния фон на страницата.
• Приглушен текст, надписи, метаданни и placeholder-и.
• Връзки в normal, hover, visited и focus състояния.
• Основни, вторични и destructive бутони.
• Етикети на формуляри, помощен текст, грешки и съобщения за успех.
• Навигационни елементи, breadcrumbs и tabs.
• Cards, badges, pills и tags.
• Икони, които предават значение.
• Диаграми, карти, progress bars и статусни цветове.
• Текст върху изображения, видео, градиенти или полупрозрачни наслагвания.

Това е достатъчно, за да откриете повечето проблеми в типичен сайт. Освен това държи одита свързан с компоненти, а не с единични пиксели.

Ако одитът ви включва бутони, съчетайте проверката на контраста с основните неща в нашия контролен списък за достъпни уеб бутони. Проблемите с контраста на бутоните често стоят до липсващи състояния на фокус, неясни етикети или нарушено поведение с клавиатура.

Инспектирайте контраста на текста в DevTools

За обикновен текст върху плътен фон браузърът обикновено може да изчисли контраста вместо вас.

Инспектирайте елемента и потърсете свойството color. Отворете color picker от цветовия образец. Ако браузърът може да определи фона, ще покаже съотношение на контраст. Някои инструменти също чертаят линия в color picker, която показва къде цветът би преминал 3:1, 4.5:1 или 7:1.

Когато браузърът отчете неуспех, вярвайте му, докато не можете да докажете обратното. Когато отчете успех, пак използвайте преценка. Малък тънък шрифт, дисплеи с ниско качество, силен anti-aliasing и натоварени фонове могат да направят технически преминаващ текст да изглежда слаб.

Практично правило: ако основният текст едва преминава при 4.55:1, не празнувайте. Дайте му повече пространство. Изискванията за контраст са минимуми, не идеални цели.

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

Проверете реалния фон, включително прозрачността

Много грешки в контраста се случват, защото видимият фон не е декларираният фон.

Чести капани включват:

• Текст в полупрозрачна card.
• Текст върху родител с приложено opacity.
• Наслагвания, използващи rgba() или color-mix().
• Градиенти зад заглавия.
• Фонови изображения, които се променят в зоната на текста.
• Theme variables, които се променят в dark mode.

Ако DevTools не може уверено да изчисли контраста, идентифицирайте рендерираните цветове на предния план и фона ръчно. Използвайте панела с изчислени стилове, временно изключвайте слоеве или вземете проба от видимия цвят с вградения color picker, ако браузърът ви го поддържа.

За текст върху изображения не вземайте проба от най-хубавата част на изображението. Вземете проба от най-лошата вероятна зона зад текста. Ако изображението се променя чрез CMS качвания, carousels или responsive crops, това не е стабилна система за контраст. Добавете надеждно наслагване, текстова сянка, плътен контейнер или градиентна обработка, която защитава текста независимо от изображението.

Добрата система за наслагване върху изображения е скучна: една и съща сила на наслагване, предвидима зона на изрязване, достатъчен контраст дори при ярки снимки. Скучното е приемливо. Потребителите се опитват да четат.

Не забравяйте състоянията

Статичните екранни снимки пропускат много проблеми с контраста. Одитирайте състоянията на взаимодействие директно в браузъра.

В DevTools принудително задайте pseudo-classes като:

• :hover
• :focus
• :focus-visible
• :active
• :visited
• :disabled
• :checked
• :invalid

След това инспектирайте изчислените цветове отново.

Индикаторите за фокус заслужават специално внимание. WCAG 2.2 засили очакванията около външния вид на фокуса, а бледосин контур върху светлосива card все още е често срещан проблем. Индикаторът за фокус се нуждае от достатъчен контраст спрямо съседните цветове и от достатъчна площ, за да бъде забележим.

За disabled контроли правилата за контраст на WCAG имат изключение за неактивни компоненти. Това не означава, че disabled контролите трябва по подразбиране да са нечетливи. Ако disabled състоянието носи полезна информация, направете го четимо. Ако не носи, помислете дали изобщо трябва да присъства.

Използвайте Lighthouse, но не му възлагайте преценката

Браузърни одити като Lighthouse могат бързо да уловят някои проблеми с контраста. Стартирайте вградения одит, ако браузърът ви го предлага, след което третирайте резултатите като отправна точка.

Автоматизираните проверки са добри в намирането на текстови възли с очевидни неуспехи в изчисления контраст. Те са по-слаби при:

• Текст, вграден в изображения.
• Етикети, рендерирани в canvas.
• Крайни случаи със SVG.
• Проблеми само при hover.
• Качество на индикатора за фокус.
• Диаграми, където цветовите връзки носят значение.
• Компоненти, скрити зад authentication, menus или стъпки на формуляр.

Ако отчетът се върне зелен, все още трябва да инспектирате представителни компоненти. Ако отчетът се върне червен, избягвайте паника и триажирайте проблемите по въздействие върху потребителите. Същият принцип важи за отчетите за производителност и достъпност като цяло: четете изхода на инструмента като доказателство, не като присъда. Използваме този начин на мислене в нашето ръководство за четене на Lighthouse отчет без паника, и той се прилага чисто и тук.

Одитирайте и нетекстовия контраст

Текстът получава най-много внимание, но WCAG обхваща и нетекстово съдържание, необходимо за разбиране или работа с интерфейса.

Проверете поне тези случаи:

• Граници на input полета спрямо фона на страницата.
• Контури на checkbox и radio.
• Toggle състояния.
• Бутони само с икона.
• Икони за грешка и предупредителни символи.
• Линии, стълбове и етикети в диаграми.
• Индикатори за напредък.
• Индикатори за избран tab или активна навигация.

Целта обикновено е 3:1 спрямо съседните цветове. Например светлосива граница на input върху бял фон може да е почти невидима. Диаграма с пет пастелни линии може да изглежда елегантно и все пак да е неизползваема.

За диаграми контрастът сам по себе си не е достатъчен. Използвайте етикети, шарки, стилове на линии, директни анотации или разстояние, така че информацията да не зависи само от цвят. Това помага на color-blind потребители, потребители със слабо зрение, хора, които гледат при отблясъци, и всеки, който чете екранна снимка в документ.

Записвайте констатациите във формат, който разработчиците могат да използват

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

Компактен формат работи добре:

| Компонент | Състояние | Преден план | Фон | Съотношение | Цел | Резултат | Предложена корекция | |---|---:|---:|---:|---:|---:|---|---| | Метаданни на card | Default | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Неуспех | Използвайте --color-text-muted-strong | | Основен бутон | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Успех | Запазете | | Граница на input | Default | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Неуспех | Потъмнете border token |

Свързвайте корекциите с design tokens, ако сайтът ги има. Не коригирайте двадесет отделни компонента, ако един слаб token е истинският проблем.

Правете корекциите малко по-силни от минимума

Проблемите с контраста често са лесни за лошо поправяне. Екипите побутват даден цвят, докато инструментът каже 4.51:1, и продължават нататък. Това не оставя резерв за рендериране на шрифтове, прозрачност, разлики между браузъри, темизиране, вариации в изображенията или бъдещи редакции на бранда.

Предпочитайте комфортни цели:

• Основен текст: по-близо до 7:1, когато е практично.
• Приглушен текст: все още над 4.5:1, ако е реално съдържание.
• UI граници и икони: комфортно над 3:1.
• Текст върху изображения: използвайте контролирано наслагване вместо предположения за всяко изображение.

Уебът се гледа на евтини лаптопи, затъмнени телефони, ярки тротоари, оцветени монитори и остаряващи дисплеи. Минималното съответствие не е същото като комфортното четене.

<!-- tool-cta:start -->

💡 Опитайте това: Когато проверявате контрастни двойки, които сте извлекли от DevTools, Color Converter помага да преобразувате между hex, RGB и HSL, така че стойностите да съвпадат с бележките ви от одита.

<!-- tool-cta:end -->

Контролен списък за одит на контраста без инсталация

Използвайте тази последователност, когато ви трябва бърз, но надежден одит:

1. Отворете продукционната страница в модерен браузър.
2. Избройте основните шаблони за текст, UI и състояния.
3. Инспектирайте изчислените цветове на предния план и фона в DevTools.
4. Използвайте вградения color picker или панела за достъпност, за да прочетете контраста.
5. Принудително задайте hover, focus, active, visited и invalid състояния.
6. Проверете текста върху изображения и градиенти спрямо най-лошия вероятен фон.
7. Проверете нетекстовите UI части спрямо изискването 3:1.
8. Стартирайте вграден автоматизиран одит като предпазна мрежа, не като целия одит.
9. Запишете проблемите по компонент и token.
10. Коригирайте с резерв, не чрез едва преминаване на прага.

Това е достатъчно, за да уловите повечето проблеми с контраста, без да добавяте още един инструмент към стека си. По-напредналите одити все още имат място, особено за големи design systems, регулирани продукти или сложна визуализация на данни. Но за много уебсайтове браузърът вече ви дава доказателствата, от които се нуждаете. Трудната част е да бъдете достатъчно систематични, за да ги използвате.