Како да проверите контраст боја без инсталирања било чега

Провере контраста боја често се третирају као специјалистички задатак приступачности: отворити дизајн фајл, инсталирати додатак, извести снимке екрана, покренути извештај, расправљати о бојама бренда. То може бити корисно, али није место одакле већина тимова треба да почне.

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

Овај водич полази од тога да не инсталирате ништа. Нема проширења за прегледач. Нема дизајнерских додатака. Нема плаћеног пакета за проверу. Само страница, прегледач и једноставан метод.

Правила контраста која су вам заиста потребна

За већину веб послова, WCAG контраст се своди на неколико прагова:

• Обичан текст: најмање 4.5:1 контраста у односу на позадину.
• Велики текст: најмање 3:1. WCAG ово дефинише као приближно 24 CSS пиксела, или око 18.66 CSS пиксела ако је текст подебљан.
• UI компоненте и графички објекти: најмање 3:1 за значајне границе, иконе, стања и делове графикона који су потребни за разумевање интерфејса.
• Побољшан контраст: 7:1 за обичан текст и 4.5:1 за велики текст ако циљате изнад основног нивоа.

Постоје изузеци, као што су неактивне контроле, декоративни елементи и логотипи. Користите те изузетке штедљиво. „То је део бренда” није изузетак; то је дизајнерско ограничење.

Такође имајте на уму да је контраст само један део приступачне употребе боја. Ако црвено стање грешке има довољан контраст, али нема текст, ознаку иконе или програмску индикацију, и даље може да не успе код корисника који не могу да разликују црвену од оближњих боја.

Почните од приказане странице, не од дизајн фајла

Дизајн фајлови су корисни, али не укључују сваку стварну променљиву: CSS преписивања, провидност, стања при преласку мишем, рендеровање фонтова у прегледачу, корисничко увећање, тамни режим, наслеђене стилове, CMS садржај и маркетиншке уградње.

Проверавајте страницу онако како је корисници добијају.

Отворите страницу у актуелном desktop прегледачу. Chrome, Edge, Firefox и Safari имају корисне алате за инспекцију. Тачне ознаке се разликују, али је радни ток исти:

1. Кликните десним тастером на текст или UI елемент.
2. Изаберите Inspect.
3. Пронађите израчунате color и background-color.
4. Користите узорак боје у прегледачу или панел за приступачност да прочитате однос контраста.
5. Забележите пролаз, пад и несигурност.

У прегледачима заснованим на Chromium-у, color picker често приказује однос контраста и WCAG смернице за пролаз/пад за текст. Firefox DevTools такође излажу информације о приступачности и алате за боју. Safari Web Inspector може да прикаже израчунате стилове и информације о приступачности, мада је радни ток мало другачији.

Кључ није конкретан прегледач. Кључ је читање израчунатог резултата, а не вредности за коју неко мисли да је компонента користи.

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

Не прегледајте насумичан текст док се не уморите. Направите кратак инвентар образаца:

• Основни текст на главној позадини странице.
• Пригушен текст, натписи, метаподаци и placeholders.
• Линкови у нормалном, hover, visited и focus стању.
• Примарна, секундарна и деструктивна дугмад.
• Ознаке формулара, помоћни текст, грешке и поруке о успеху.
• Навигационе ставке, breadcrumbs и табови.
• Картице, беџеви, pills и ознаке.
• Иконе које преносе значење.
• Графикони, мапе, траке напретка и статусне боје.
• Текст преко слика, видеа, градијената или провидних преклапања.

Ово је довољно да се пронађе већина проблема на типичном сајту. Такође држи проверу везаном за компоненте, а не за једнократне пикселе.

Ако ваша провера укључује дугмад, упарите проверу контраста са основама из наше контролне листе за приступачну веб дугмад. Проблеми са контрастом дугмади често стоје поред недостајућих стања фокуса, нејасних ознака или поквареног понашања тастатуре.

Проверите контраст текста у DevTools

За обичан текст на једнобојној позадини, прегледач обично може да израчуна контраст за вас.

Инспектујте елемент и потражите својство color. Отворите color picker из узорка боје. Ако прегледач може да одреди позадину, приказаће однос контраста. Неки алати такође исцртавају линију у color picker-у која показује где би боја прошла 3:1, 4.5:1 или 7:1.

Када прегледач пријави пад, верујте му док не можете да докажете супротно. Када пријави пролаз, и даље користите процену. Ситан танак фонт, екрани слабијег квалитета, јако anti-aliasing обрађивање и заузете позадине могу учинити да текст који технички пролази делује слабo.

Практично правило: ако основни текст једва пролази са 4.55:1, немојте славити. Дајте му више простора. Захтеви за контраст су минимуми, не идеалне мете.

Типографија је такође важна. Већи, јаснији типографски систем смањује напор и пре него што посегнете за изменама боје. Ако је страницу тешко читати упркос пролазном контрасту, поново размотрите дужину реда, величину, тежину и размаке кроз ширу призму читљивости, као у овом практичном водичу за читљив типографски приказ.

Проверите стварну позадину, укључујући провидност

Многе грешке у контрасту настају зато што видљива позадина није декларисана позадина.

Честе замке укључују:

• Текст унутар полупровидне картице.
• Текст на родитељском елементу на који је примењен opacity.
• Преклапања која користе rgba() или color-mix().
• Градијенте иза наслова.
• Позадинске слике које се мењају преко области текста.
• Променљиве теме које се мењају у тамном режиму.

Ако DevTools не могу поуздано да израчунају контраст, ручно идентификујте рендероване боје предњег плана и позадине. Користите панел са израчунатим стиловима, привремено искључите слојеве или узоркујте видљиву боју уграђеним color picker-ом ако га ваш прегледач подржава.

За текст преко слика, немојте узорковати најлепши део слике. Узоркујте најгору вероватну област иза текста. Ако се слика мења кроз CMS отпремања, каруселе или responsive исечке, то није стабилан систем контраста. Додајте поуздано преклапање, сенку текста, чврст контејнер или градијентни третман који штити текст без обзира на слику.

Добар систем преклапања преко слике је досадан: иста јачина преклапања, предвидљива област исечка, довољан контраст чак и са светлим фотографијама. Досадно је у реду. Корисници покушавају да читају.

Не заборавите стања

Статични снимци екрана пропуштају многе проблеме са контрастом. Проверите интерактивна стања директно у прегледачу.

У DevTools, форсирајте псеудо-класе као што су:

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

Затим поново инспектујте израчунате боје.

Индикатори фокуса заслужују посебну пажњу. WCAG 2.2 је пооштрио очекивања око изгледа фокуса, а бледоплава контура на светлосивој картици и даље је чест проблем. Индикатор фокуса мора имати довољан контраст у односу на суседне боје и довољну површину да буде приметан.

За онемогућене контроле, WCAG правила контраста имају изузетак за неактивне компоненте. То не значи да онемогућене контроле треба подразумевано да буду нечитљиве. Ако онемогућено стање носи корисну информацију, учините га читљивим. Ако не носи, размислите да ли уопште треба да буде присутно.

Користите Lighthouse, али не препуштајте му процену

Провере у прегледачу као што је Lighthouse могу брзо да ухвате неке проблеме са контрастом. Покрените уграђену проверу ако је ваш прегледач нуди, а затим резултате третирајте као полазну тачку.

Аутоматизоване провере су добре у проналажењу текстуалних чворова са очигледним проблемима израчунатог контраста. Слабије су код:

• Текста уграђеног у слике.
• Ознака рендерованих у canvas-у.
• SVG граничних случајева.
• Проблема који постоје само на hover.
• Квалитета индикатора фокуса.
• Графикона где односи боја носе значење.
• Компоненти скривених иза аутентификације, менија или корака формулара.

Ако се извештај врати зелен, и даље треба да прегледате репрезентативне компоненте. Ако се извештај врати црвен, избегните панику и тријажирајте проблеме по утицају на кориснике. Исти принцип важи за извештаје о перформансама и приступачности уопште: читајте излаз алата као доказ, не као пресуду. Такав приступ користимо у нашем водичу за читање Lighthouse извештаја без панике, и он се овде чисто примењује.

Проверите и контраст нетекстуалних елемената

Текст добија највише пажње, али WCAG покрива и нетекстуални садржај потребан за разумевање или коришћење интерфејса.

Проверите бар ове случајеве:

• Ивице input поља у односу на позадину странице.
• Контуре checkbox и radio контрола.
• Стања toggle контрола.
• Дугмад само са иконом.
• Иконе грешке и симболи упозорења.
• Линије, стубићи и ознаке на графиконима.
• Индикатори напретка.
• Индикатори изабраног таба или активне навигације.

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

За графиконе, контраст сам по себи није довољан. Користите ознаке, шаре, стилове линија, директне напомене или размаке тако да информација не зависи само од боје. Ово помаже корисницима који не разликују боје, слабовидим корисницима, људима који гледају екран под одсјајем и свакоме ко чита снимак екрана у документу.

Забележите налазе у формату који програмери могу да користе

Корисна провера контраста не каже „неке сиве не пролазе”. Она идентификује компоненту, стање, тренутне вредности, очекивани праг и предложено решење.

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

| Компонента | Стање | Предњи план | Позадина | Однос | Циљ | Резултат | Предложено решење | |---|---:|---:|---:|---:|---:|---|---| | Метаподаци картице | Подразумевано | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Пад | Користити --color-text-muted-strong | | Примарно дугме | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Пролаз | Задржати | | Ивица input поља | Подразумевано | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Пад | Потамнити token за ивицу |

Вежите исправке за design tokens ако их сајт има. Не крпите двадесет појединачних компоненти ако је један слаб token стварни проблем.

Направите исправке мало јачим од минимума

Проблеме са контрастом често је лако поправити лоше. Тимови помере боју док checker не каже 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. Исправљајте са маргином, не тако што једва прелазите праг.

То је довољно да ухватите већину проблема са контрастом без додавања још једног алата у свој stack. Напредније провере и даље имају своје место, посебно за велике design systems, регулисане производе или сложену визуелизацију података. Али за многе веб-сајтове, прегледач вам већ даје доказе који су вам потребни. Тежи део је бити довољно систематичан да их искористите.