This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Достъпност
Какъв контраст се нуждаят бутоните и входните полета на уебсайтовете?
Бутоните, входните полета и смислените графики се нуждаят от контрастно съотношение от поне 3:1 към тяхната среда. Този праг идва от стандартния WCAG. Той гарантира, че визуално увреден посетител разпознава къде да кликнете и къде да напишете бяло входно поле с светло сива граница на бял фон е практически невидим.
Контролите трябва да бъдат видими
Докато познатото правило за контраста се отнася до текста, става въпрос за всичко останало видимо, което има функция: рамката на входното поле, площта на бутона, лупата стъклена икона на търсенето, кърлежа в кутията. Модерният, много намален дизайн е най-често срещаният капан тук - светлосиво поле на бял фон изглежда елегантно, но често е доста под 3:1. Посетител с намаляваща визия вижда форма без разпознаваеми полета: той не знае къде да отиде с курсора. Дори символите без надпис на текста, като менюто за хамбургери, трябва да се открояват от заден план с поне 3:1, иначе навигацията не съществува за него.
Така нашето ядро измерва контраста на оперативните елементи
Нашето нефрит избира проба от контролите на вашата страница - полета за вход, бутони, проектирани бутони за линк и снимки на всяка среда в браузъра. От пикселите той изчислява яркостта на ръба, пълнежа и заобикалящата среда и от това действителното контрастно съотношение на границата на елементите. Ако измерените пределни стойности са по-малки от 3:1, докладът отчита това умишлено като доказан случай на изпитване, а не веднага като нарушение: Изглежда твърде слабо поле може да се носи визуално от околния контейнер, който се оценява от човек въз основа на предоставената снимка на екрана. Счита се, че критерият е бил приет само ако пробата е достатъчно голяма и напълно ненатрапчива; чисто графични обекти като диаграми остават тест за хора.
Beispiele
Входящо поле с бледа рамка
input { border: 1px solid #dddddd; background: #fff; } /* 1,3:1 */input { border: 1px solid #767676; background: #fff; } /* 4,5:1 */Рамки, символи и фокусни рамки трябва 3:1 на фона, в противен случай полето не се разпознава като поле.
- Проверете формулярите си: Всяко входно поле се нуждае от рамка или попълнете, която се откроява от фона.
- Помолете вашата агенция да проверите цветовете на рамката на полетата срещу прага 3:1 и да ги затъмни, когато е необходимо.
- Проверете икони без текст това е търсене, меню, количка за пазаруване за достатъчно контраст на фона.
- Обърнете внимание на държавите: Маркировката на избрания подпрозорец или активната кутия също се нуждае от 3:1.
- Погледнете вашите форми от два метра разстояние голи полета изчезват визуално, контрастът е твърде слаб.
