Какво представлява съотношението WCAG? Защо трябва да го внедрите във вашите проекти

Насоките за достъпност на уеб съдържанието (WCAG) са насоки за достъпност за дигитален и уеб дизайн. Следването на тези насоки гарантира, че цветовете са достатъчно контрастни, за да помогнат на хората с увредено зрение да видят и прочетат вашите дизайни правилно. Това също върви ръка за ръка с типографския размер, за да се гарантира неговата четливост заедно с цветовете.

В свят, който трябва да бъде по-приобщаващ, добавянето на достъпни елементи към вашите дизайни само ще издигне работата ви и ще ви позволи да я споделяте с повече хора.

Какво представлява съотношението WCAG?

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

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

The World Wide Web Consortium разработва стандарти за уеб разработка. Въпреки че няма определени правила за уеб достъпност, WCAG определя стандарт, който трябва да се следва, към който всеки уеб дизайнер трябва да се придържа.

При тестване на контрастни съотношения, WCAG предлага оценка от A до AAA. Оценка A показва най-ниските нива на контраст. AA са средни нива на контраст със съотношение 4,5:1—считано за минимално съотношение. И накрая, AAA е най-високото ниво на контраст. Ако проектирате за всички, вашите нива на контраст са най-добри, когато са между диапазона AA и AAA.

Защо съотношението WCAG е важно в графичния и уеб дизайн?

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

Уеб и дигиталния дизайн, както и програмирането, вече имат въведени функции за достъпност. Например, Windows предоставя полезни инструменти за достъпност за потребителитеи вече е нещо обичайно за повечето видеоклипове в YouTube субтитри или надписи. Но винаги можем да подобрим достъпността.

Глобалният дизайн създава по-добър дизайн. Колкото повече хора могат да се ангажират с вашия дизайн, толкова по-успешен е той и толкова по-голям обхват има. Не само е добре за вас като дизайнер да достигнете до повече хора, но е по-добре за света по-малко хора да бъдат изключени.

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

Внедряване на съотношението WCAG във вашите проекти

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

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

Цветове с висок контраст

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

Някога опитвали ли сте да прочетете светлорозов текст на светлозелен фон? Това е почти невъзможно. Но тъмносин текст на светло жълт фон се вижда и чете много по-лесно.

Цветовете с висок контраст работят най-добре, когато поставяте текст върху цветен фон или ако използвате малки пътеки във вашите илюстрации. Khroma е генератор на цветова палитра с изкуствен интелект, който се предлага с вграден контролер за контраст - един от многото страхотни AI инструменти за подпомагане на работния процес на вашия графичен дизайн.

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

Размер на текста

Заедно с цветовете на текста, които са достатъчно контрастиращи спрямо цветовете на фона, самият текст трябва да е достатъчно голям, за да се чете лесно. Съотношението WCAG за голям размер на текста е 3:1.

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

Четливост на шрифта

Разбира се, но шрифтовете, които избирате във вашите дизайни, трябва да са лесни за четене. Декоративните шрифтове, курсивните шрифтове или ръчно рисуваните шрифтове често имат проблеми с четливостта. Хеви метъл групите са известни с това, че използват по своята същност трудни за четене шрифтове за логото на своите групи, например.

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

Включващи фактори за достъпност

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

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

Не трябва да се спирате само на минималните изисквания за WCAG съотношенията; ако имате контрол върху добавянето на алтернативен текст към изображения, надписи към аудио или видео файлове или дори полезна формулировка на текст за хипервръзки - които се четат на глас от екранни четци - трябва да отидете по-горе и отвъд. Включването на функции за достъпност не изключва никоя аудитория – то само кани повече хора.

Проектирането със съотношението WCAG подобрява дизайна за всички

Стандартите за уеб дизайн идват от World Wide Web Consortium, общност, която подпомага най-добрите практики в мрежата. Консорциумът разработи Насоки за достъпност на уеб съдържанието, които уеб дизайнерите трябва да следват. Това осигурява стандарт за съотношение за проверки на видимостта при проектиране за уеб.

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