Veb əlçatanlıq kontrast nisbəti, görmə qabiliyyəti zəif olan və ya rəng korluğu daxil olmaqla, görmə qüsurları olan istifadəçilər üçün mətnin oxunaqlı qalmasını təmin etmək üçün istifadə olunan fundamental bir ölçüdür. WCAG 2.1 AA səviyyəli təlimatlarına əməl etməklə, dizaynerlər və tərtibatçılar mətn ilə onun fonu arasında aydın bir fərq təmin edirlər. Bu standart normal mətn üçün ən azı 4.5:1, böyük mətn üçün isə 3:1 kontrast nisbətini tələb edir. Bu xüsusi nisbətlərin tətbiqi, geniş qəbul edilmiş dizayn təcrübələrinə riayət etməklə yanaşı, rəqəmsal məzmununuzun daha geniş auditoriya üçün istifadəyə yararlı olmasını təmin edir.
Normal mətn üçün WCAG kontrast tələbi nədir?
Standart əsas mətn üçün WCAG 2.1 AA səviyyəsi 4.5:1 minimum kontrast nisbətini tələb edir. Bu hesablamada mətn rənginin parlaqlığı fon rənginin parlaqlığı ilə müqayisə edilir. Dizayn bu həddən aşağı düşdükdə, mətn fonla qarışa bilər və bu da bir çox istifadəçinin hərfləri fondan ayırmasını çətinləşdirir. Tipik bir hesab və ya layihədə, ağ fonda açıq boz mətnin tez-tez bu yoxlamadan keçə bilmədiyini görə bilərsiniz, bu da tələbi qarşılamaq üçün daha tünd bir çalar və ya fon rəngində dəyişiklik tələb edir.
4.5:1 nisbətini tətbiq etmək sadəcə estetik üstünlük deyil, funksional aydınlıq məsələsidir. Dizaynerlər Figma və ya Adobe XD kimi platformalarda prototip mərhələsində bu nisbətləri yoxlamaq üçün tez-tez rəng seçici alətlərdən istifadə edirlər. Quruluş mərhələsi başlamazdan əvvəl kontrastı yoxlamaqla, sonradan bahalı düzəlişlərin qarşısını alırsınız. Əgər brend kimliyi üzərində işləyirsinizsə, veb istifadəsi üçün seçilən əsas brend rənglərinin mətn üçün istifadə edilə biləcəyini təsdiqləmək üçün ağ və tünd fonlarda sınaqdan keçirildiyinə və lazımi 4.5:1 nisbətini qoruduğuna əmin olun.
Böyük mətn üçün niyə fərqli bir nisbət var?
WCAG 2.1 AA standartı, xüsusilə böyük miqyaslı mətn üçün 3:1 nisbətində daha aşağı kontrast nisbətinə icazə verir. Böyük mətn ümumiyyətlə ən azı 18pt və ya 14pt qalın (bold) mətn kimi müəyyən edilir. Hərf xətləri daha qalın və hərflər daha böyük olduğu üçün, mətn ilə fon arasındakı kontrast fərqi daha az olsa belə, onları qavramaq daha asandır. Bu istisna, dizaynerlərə ekranı idarə edən qalın başlıqlar, qəhrəman (hero) mətni və ya hərəkətə çağırış düymələrindən istifadə edərkən daha çox çeviklik verir.
Tipoqrafiya iyerarxiyanızı planlaşdırarkən, şrift ölçülərinizi iki qrupa ayırmaq faydalıdır: 4.5:1 nisbətinə cavab verməli olanlar və 3:1 nisbətinə uyğun olanlar. Bu fərqləndirmə, əsas mətni yüksək oxunaqlı saxlamaqla yanaşı, başlıqlar üçün daha geniş rəng çeşidindən istifadə etməyə imkan verir. Əgər dizayn komandası müştəri üçün açılış səhifəsi (landing page) hazırlayırsa, onlar brend palitrasına uyğunlaşmaq üçün daha yumşaq, rəngli başlıqdan istifadə edə bilərlər (3:1 limitindən yuxarı qalmaq şərti ilə), eyni zamanda bütün paraqraf mətnini yüksək kontrastlı tünd rəngdə saxlaya bilərlər.
Kontrast nisbətini necə hesablayırsınız?
Kontrast nisbətinin hesablanması iki rəngin nisbi parlaqlığını müqayisə edən riyazi düsturdan istifadəni əhatə edir. Düstur, heç bir kontrastı təmsil etməyən (məsələn, ağ üzərində ağ) 1:1 ilə maksimum kontrastı təmsil edən (ağ üzərində qara) 21:1 arasında bir rəqəm çıxarır. Bu hesablamaları əllə yerinə yetirmək əvəzinə, əksər mütəxəssislər rəqəmsal əlçatanlıq test alətlərindən istifadə edirlər. Bu alətlər ön plan və fon rənglərinizin onaltılıq (hex) və ya RGB dəyərlərini qəbul edir və avtomatik olaraq nisbəti qaytarır.
Bu alətlərdən istifadə edərkən saytınızda görünən hər bir rəng kombinasiyasını sınaqdan keçirdiyinizə əmin olun. Ümumi bir səhv, yalnız əsas mətn rəngini ağ fonda yoxlamaqdır. Siz həmçinin keçid rənglərini, düymə etiketlərini və şəkillərin və ya rəngli fiqurların üzərində görünən hər hansı mətni yoxlamalısınız. Məsələn, mavi fonlu ağ düyməniz varsa, ağ mətnin həmin mavi rəngə qarşı 4.5:1 nisbətini təmin etdiyini yoxlamalısınız. Əgər mavi rəng çox açıqdırsa, kontrast uğursuz olacaq və tələbi qarşılamaq üçün mavi çaları daha tünd bir dəyərə uyğunlaşdırmalı olacaqsınız.
Əlçatan rəng sxemlərinin tətbiqi üçün yoxlama siyahısı
- Bütün əsas mətnlər üçün mövcud brend rənglərini 4.5:1 həddinə qarşı yoxlayın.
- 18pt və ya 14pt qalın və daha böyük olaraq müəyyən edilmiş bütün böyük başlıqların 3:1 həddinə cavab verdiyini təsdiqləyin.
- Ardıcıl kontrastı təmin etmək üçün bərk rəngli örtükdən istifadə edərək şəkillərin üzərinə qoyulmuş mətni sınaqdan keçirin.
- Görünürlüyü təsdiqləmək üçün daxiletmə sahələri, haşiyələr və düymə vəziyyətləri kimi interaktiv elementləri nəzərdən keçirin.
- Gələcək inkişaf üçün istinad kimi əlçatan rəng palitranızı üslub bələdçisində sənədləşdirin.
- İşıqlandırma şəraiti kontrastın necə qəbul edildiyini dəyişdirdiyi üçün saytın mobil versiyalarında əl ilə yoxlamalar aparın.
Alien Road veb əlçatanlıq kontrast nisbətini necə tətbiq edir
Alien Road-da biz hər bir layihənin erkən kəşf və dizayn mərhələlərinə əlçatanlıq yoxlamalarını inteqrasiya edirik. Müştəri veb-saytın yenidən dizaynı üçün bizə müraciət etdikdə, ilk addımımız onların cari brend aktivlərini təhlil etməkdir. Biz onların brend rənglərindən hansının mətn üçün əlçatan olduğunu və hansının mətn olmayan dekorativ elementlər üçün daha uyğun olduğunu müəyyən etmək üçün sənaye standartı olan kontrast yoxlayıcılarından istifadə edirik. Bu proaktiv yanaşma, son dizaynın həm vizual olaraq brendə uyğun, həm də WCAG 2.1 AA standartlarına uyğun olmasını təmin edir.
İnkişaf prosesində biz təsdiqlənmiş rəng kombinasiyalarından istifadəni məcbur edən dizayn tokenləri sistemini tətbiq edirik. Məsələn, əgər tərtibatçı paraqrafa uyğun olmayan açıq boz rəng tətbiq etməyə çalışarsa, linting alətlərimiz və ya dizayn sistemi sənədlərimiz bu səhvi qeyd edəcək. Bu, sayt miqyaslandıqca belə onun əlçatanlığını qorumağa kömək edir. Biz inanırıq ki, əlçatanlıq fundamental tələbdir və bu kontrast yoxlamalarını standart əməliyyat prosedurlarımıza daxil etməklə, müştərilərə uzunmüddətli, inklüziv rəqəmsal həllər təqdim edirik.
Kontrast nişanlara və UI komponentlərinə aiddirmi?
4.5:1 və 3:1 tələbləri xüsusilə mətni hədəf alsa da, əlçatanlıq standartları mətn olmayan kontrastı da əhatə edir. Forma daxiletmələri, nişanlar və fokus göstəriciləri kimi UI komponentləri ətraf mühitdən fərqlənə bilməlidir. WCAG, istifadəçilərin səhifənin interaktiv hissələrini müəyyən edə bilməsini təmin etmək üçün bu komponentlər üçün 3:1 minimum kontrast nisbətini təklif edir. Əgər istifadəçi mətn qutusunun haşiyəsini və ya menyu nişanını görə bilmirsə, saytınızda tapşırıqları yerinə yetirməkdə çətinlik çəkə bilər.
İnterfeysinizi dizayn edərkən istifadəçi səyahətinə diqqət yetirin. Axtarış çubuğunuz varsa, haşiyənin fonla 3:1 kontrast nisbəti olmalıdır. Eynilə, məlumatı təmsil etmək üçün nişanlardan istifadə edirsinizsə, onların yalnız rəngə güvənmədən başa düşüləcək qədər aydın olduğundan əmin olun. Forma, etiket və yüksək kontrastlı rəngin birləşməsindən istifadə, interfeysinizin görmə qabiliyyətindən və ya saytınıza baxdıqları mühitdən asılı olmayaraq hər kəs üçün intuitiv qalmasını təmin edir.
Rəng dizaynında qaçınılması lazım olan ümumi səhvlər
- Səhv mesajları və ya xəbərdarlıqlar kimi vacib məlumatlar üçün aşağı kontrastlı rənglərdən istifadə etməyin.
- Diaqram və qrafiklərdə statusu və ya mənanı çatdırmaq üçün yalnız rəngə güvənməyin.
- Məşğul şəkil fonlarının üzərinə qoyulmuş mətnin yüksək kontrastlı konteynerə və ya kölgəyə malik olduğundan əmin olun.
- Kiçik ölçülərdə nazik şrift çəkilərindən istifadə etməkdən çəkinin, çünki onlar gözə daha da açıq görünə bilər.
- Klaviatura naviqasiyası üçün fokus vəziyyətlərinizin aydın görünən olduğundan və 3:1 nisbətinə cavab verdiyindən əmin olun.
Bu həftə haradan başlamaq lazımdır
Əlçatanlıq işinizə cari veb-saytınızdakı ən çox trafik olan səhifələri müəyyən etməklə başlayın. Kontrast uyğunluğunuz haqqında baza hesabatı almaq üçün bu səhifələri avtomatlaşdırılmış əlçatanlıq yoxlayıcısından keçirin. Saytınızın 4.5:1 və ya 3:1 nisbətlərinə cavab vermədiyi ilk beş halı müəyyən edin. Bu problemləri müəyyən etdikdən sonra, saytınızdakı əsas mətn rənglərini 4.5:1 tələbinə cavab verəcək şəkildə tənzimləməyə başlayın. Bu kiçik dəyişiklik çox vaxt saytın ümumi oxunaqlılığına ən böyük təsir göstərir.
Əsas mətni həll etdikdən sonra naviqasiya və altbilgi (footer) bölmələrinizə keçin. Bu sahələr çox vaxt gözdən qaçırıla bilən unikal rəng kombinasiyalarından istifadə edir. Yeni bir dizayn layihəsinə hazırlaşırsınızsa, ekranları çəkməyə başlamazdan əvvəl əlçatanlığa əsaslanan rəng palitrası yaradın. Bu, vaxtınıza qənaət edəcək və yaradıcı prosesin əvvəldən funksional məhdudiyyətlərlə idarə olunmasını təmin edəcək. Əlçatanlığı iş axınınızın müntəzəm bir hissəsinə çevirməklə, hər bir ziyarətçi üçün daha yaxşı təcrübələr yaradırsınız.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn