Veb layihələr üçün əlçatan rəng palitrasının dizaynı hər bir ziyarətçi üçün yüksək oxunurluğu və məntiqi vizual fərqliliyi təmin edən çalarların seçilməsini əhatə edir. Kontrast və aydınlığa üstünlük verməklə dizaynerlər görmə qüsuru olan və ya çətin işıqlandırma şəraitində ekrana baxan istifadəçiləri qəbul edən interfeyslər yaradırlar. Bu yanaşma fon səthlərinə qarşı mətnin oxunaqlı qalmasını təmin etmək üçün müəyyən edilmiş qaydalara əməl edir və nəticədə rəqəmsal平台的 bütün istifadəçi bazası üçün təcrübəni yaxşılaşdırır.
Veb əlçatanlığı üçün rəng kontrastı nə üçün vacibdir?
Rəng kontrastı rəqəmsal oxunurluğun təməli rolunu oynayır. Mətn rəngi fondan kifayət qədər fərqlənmədikdə, xüsusən də zəif görən və ya rəng korluğu olan şəxslər üçün məzmunu oxumaq çətinləşir. Adekvat kontrastın təmin edilməsi sadəcə dizayn üstünlüyü deyil; bu, istifadəçilərin səhifədə təqdim olunan məlumatları şərh etməkdə çətinlik çəkməsinin qarşısını alan funksional tələbatdır. Əlçatanlığı nəzərə alaraq dizayn etdikdə, istifadəçinin sayta baxmaq üçün qüsursuz görmə qabiliyyətinə ehtiyac duymamasını təmin edirik.
WCAG 2.1 bu göstəricilər üçün sənaye standartını təmin edir. Qaydalar bildirir ki, normal mətn ən azı 4.5:1 kontrast nisbəti tələb edir, böyük mətn isə 3:1 nisbəti tələb edir. Bu rəqəmlər ilkin rəng seçimi prosesində dizaynerlər üçün hədəf rolunu oynayır. Bu nisbətləri erkən yoxlamaqla, sayt qurulduqdan sonra bahalı dizayn dəyişikliklərinə ehtiyac duymayacaqsınız. Bu standartların tətbiqi veb mətninizin mümkün olan ən geniş auditoriya üçün açıq və aydın qalmasını təmin edir.
Əlçatan palitra üçün əsas rəngləri necə seçirsiniz?
Əsas rənglərin seçilməsi hər bir çalarların funksional məqsədini başa düşməklə başlayır. Brendinq üçün əsas rəng, fonlar üçün neytral rəng və hərəkətə çağırışlar üçün aydın vurğu rəngi müəyyənləşdirməlisiniz. İlkin seçimə sahib olduqdan sonra standart ağ və ya tünd boz fonlara qarşı kontrastı yoxlamalısınız. Ümumi model əsas rəngin 4.5:1 tələbini qarşılayıb-qarşılamadığını görmək üçün ağ mətnə qarşı sınaqdan keçirilməsidir. Əgər uğursuz olarsa, kölgəni keçənə qədər tündlüyünü və ya doymasını artırmaqla tənzimləyirsiniz.
Ardıcıllıq palitra strategiyanızın əsas hissəsi olaraq qalır. Uyğun rənglər dəstini qurduqdan sonra onları komandanız üçün üslub bələdçisində sənədləşdirin. Bu, dizaynerlərin oxşar görünən, lakin kontrast yoxlamasından keçməyən rəngləri seçməsinin qarşısını alır. Məsələn, marketinq komandasının beş brend rəngi ola bilər. Bunların hər biri onlarla uyğunlaşmaq üçün hansı mətn rənginin (qara və ya ağ) uyğun olduğunu müəyyən etmək üçün həm açıq, həm də tünd fonlara qarşı sınaqdan keçirilməlidir. Bu, bir çox səhifələrdə miqyaslanan proqnozlaşdırıla bilən sistem yaradır.
Əlçatan rəng kombinasiyalarının müqayisəsi
| Rəng Cütlüyü | Kontrast Nisbəti | WCAG Uyğunluğu |
|---|---|---|
| Ağ üzərində Tünd Mavi | 8.5:1 | Keçdi |
| Ağ üzərində Açıq Boz | 2.1:1 | Uğursuz |
| Ağ üzərində Tünd Qırmızı | 5.2:1 | Keçdi |
Hansı alətlər rəng seçimlərinizi yoxlamağa kömək edə bilər?
Kontrast nisbətlərini əl ilə hesab etməyinizə ehtiyac yoxdur. Bir neçə alət 4.5:1 tələbini qarşılamayan sahələri müəyyən etmək üçün dizayn fayllarınızı və ya canlı veb-saytlarınızı yoxlaya bilər. Bu alətlərdən inkişaf dövrünün əvvəlində istifadə etmək kod yazılmamışdan əvvəl düzəlişlər etməyə imkan verir. İş axınınınıza inteqrasiya sadədir; bir çox dizayn platformalarının aşağı kontrastlı elementləri dərhal vurğulayan plaginləri var ki, bu da baxış mərhələsində vaxtınıza qənaət edir.
- Canlı səhifə elementlərini sınamaq üçün brauzer əsaslı rəng kontrastı yoxlayıcılarından istifadə edin.
- Qat rənglərini müəyyən fonlara qarşı yoxlayan dizayn proqram təminatı plaginlərindən istifadə edin.
- Böyük mətni (18pt+ və ya 14pt qalın) 3:1 nisbət standartına qarşı yoxlayın.
- İnkişaf məqsədilə təsdiqlənmiş rəng palitranızı CSS dəyişən faylına ixrac edin.
- Əsas mətn sahələri ilə ziddiyyət təşkil etmədiklərini təmin etmək üçün ikincil rənglərinizi nəzərdən keçirin.
Alien Road əlçatan rəng prinsiplərini necə tətbiq edir
Alien Road-da əlçatan dizayn prosesimiz proaktiv yoxlamaya diqqət yetirir. Mövcud palitranın WCAG 2.1 tələblərinə cavab verib-vermədiyini görmək üçün müştərinin brend identikliyini yoxlamaqla başlayırıq. Əgər brend rəngləri 4.5:1 nisbətinə cavab vermirsə, saytın tam əlçatan qalmasını təmin etməklə yanaşı, brend identikliyini qoruyub saxlayan incə variasiyalar təklif edirik. Bu, müştərilərə inklüziv dizayn standartlarından ödün vermədən vizual şəxsiyyətlərini qorumağa kömək edir.
Dizayn-quruluş mərhələsində hər bir rəngi xüsusi UI komponentlərinə uyğunlaşdırırıq. Başlıqlar, əsas mətn və düymələr kimi interaktiv elementlər üçün hansı rənglərin istifadə olunduğunu müəyyənləşdiririk. Bunları layihə idarəetmə alətlərimizdə qlobal üslublar kimi təyin etməklə, sayta əlavə edilən hər yeni səhifənin avtomatik olaraq əlçatan rəngləri miras almasını təmin edirik. Bu sistem-ilk yanaşma o deməkdir ki, dizaynerlərimiz komponentləri yenidən sınaqdan keçirməyə daha az vaxt sərf edir və son istifadəçi üçün mərtəbə və məzmun keyfiyyətinə diqqət yetirməyə daha çox vaxt sərf edirlər.
Əlçatan rəng dizaynında ümumi səhvlər
Dizaynerlər çox vaxt üst-üstə düşən elementlər arasındakı qarşılıqlı əlaqəni nəzərdən qaçırırlar. Ümumi səhv möhkəm fon örtüyü olmadan mətnin şəkillər və ya naxışlar üzərinə yerləşdirilməsidir. Mətn rəngi tünd olsa belə, şəklin mətni oxumağı çətinləşdirən açıq bölmələri ola bilər. Mətninizlə hər hansı altda yatan görüntü arasında həmişə aydın, yüksək kontrastlı maneənin olmasını təmin edin. Bu, fon şəklinin vizual mürəkkəbliyindən asılı olmayaraq işləyən möhkəm oxu səthi yaradır.
Digər ümumi səhv məna çatdırmaq üçün yalnız rəngə güvənməkdir. Məsələn, xəta vəziyyətini göstərmək üçün yalnız qırmızı rətdən istifadə etmək rəng koru olan istifadəçilər üçün qarışıq ola bilər. Rəngi ikonlar və ya mətn etiketləri ilə birləşdirmək ən yaxşı təcrübədir. Bu, rəngi necə qavramalarından asılı olmayaraq mesajın bütün istifadəçilərə çatdırılmasını təmin edir. Xəta mesajına təsviri etiket əlavə etdiyiniz zaman, inklüziv dizaynın əsas komponenti olan başa düşmək üçün ikincil yol təqdim edirsiniz.
Növbəti dizayn baxışınız üçün yoxlama siyahısı
- Bütün əsas mətnin 4.5:1 kontrast nisbətinə cavab verdiyini yoxlayın.
- Böyük başlıqların 3:1 kontrast nisbətinə cavab verdiyini təsdiqləyin.
- İnteraktiv vəziyyətlərin (hover/focus) səhifə fonuna qarşı kontrastı qoruyub saxlamasını təmin edin.
- Heç bir kritik məlumatın yalnız rəng variasiyalarına əsaslanmadığını yoxlayın.
- Mümkünsə, palitranızı həm işıqlı, həm də qaranlıq rejim versiyalarında sınayın.
- Əlçatan rəng dəyişənlərinizi mərkəzi dizayn sistemi bələdçisində sənədləşdirin.
Bu həftə haradan başlamaq lazımdır
Cari veb-saytınızın ana səhifəsini yoxlamaqla başlayın. Üç əsas mətn elementini seçin və standart əlçatanlıq alətindən istifadə edərək onların fon rənglərinə qarşı kontrast nisbətlərini yoxlayın. Hər hansı nasazlıq tapsanız, bu elementlərin siyahısını yaradın və rəng dəyərlərini 4.5:1 və ya 3:1 həddinə cavab vermək üçün yeniləyin. Bu kiçik, tədricən dəyişikliklər etmək istifadəçiləriniz üçün təcrübəni dərhal yaxşılaşdıracaq. Ana səhifə düzəldildikdən sonra prosesi təkrarlamaq üçün ən çox ziyarət edilən enmə səhifələrinizə keçin.
Tez-tez Verilən Suallar
Əlçatanlıq məndən brend identikliyinə qurban verməyi tələb edirmi?
Xeyr, əlçatanlığa nail olmaq üçün brend identikliyinizi qurban verməli deyilsiniz. Mövcud brend rənglərinizin doymasını və ya parlaqlığını bir qədər tənzimləməklə, adətən brendinizin əsas görünüşünü dəyişdirmədən tələb olunan kontrast nisbətlərinə nail ola bilərsiniz. Əksər brendlər aşkar edirlər ki, bu kiçik tənzimləmələr orta istifadəçi üçün demək olar ki, nəzərəçarpmazdır, eyni zamanda görmə qüsuru olanlar üçün oxunarlığı əhəmiyyətli dərəcədə yaxşılaşdırır.
Qaçınmalı olduğum xüsusi rənglər varmı?
Təbiətən qadağan olunmuş rənglər yoxdur, lakin ağ üzərində açıq sarı və ya ağ üzərində açıq boz kimi ənənəvi olaraq aşağı kontrastlı kombinasiyalardan qaçınmalısınız. Problem heç vaxt rəngin özü deyil, ön plan mətn ilə fon rəngi arasındakı əlaqədir. Tələb olunan kontrast nisbətini qorumaq üçün kifayət qədər tünd və ya açıq fonla birləşdirildiyi təqdirdə istənilən rəng işləyə bilər.
Veb saytımın əlçatanlığını nə qədər tez-tez yenidən yoxlamalıyam?
Əhəmiyyətli dizayn yeniləmələri edərkən və ya yeni məzmun üslubları əlavə edərkən veb saytınızın əlçatanlığını yoxlamalısınız. Sayt şablonunuzu dəyişdirirsinizsə və ya yeni promosyon bannerləri təqdim edirsinizsə, yeni elementlər üzrə sürətli kontrast yoxlaması həyata keçirin. Məzmunun yaradılması mərhələsində əlçatanlığın yoxlanılması vərdişinin qurulması biznesiniz zamanla böyüdükcə saytınızın uyğun və istifadəçi dostu olmasını təmin edir.
Kontrast qaydalarından yan keçmək üçün mətnsə şəkillərdən istifadə edə bilərəm?
Mətn üçün şəkillərdən istifadə əlçatanlıq üçün tövsiyə olunan həll yolu deyil. Şəkil kimi göstərilən mətni ekran oxuyucularının şərh etməsi daha çətindir və daha böyük şriftlərə ehtiyacı olan istifadəçilər tərəfindən asanlıqla miqyaslana bilməz. CSS ilə tərtib edilmiş canlı, axtarıla bilən mətndən istifadə etmək həmişə yaxşıdır. Bu yanaşma daha çevikdir, SEO-dostudur və kontrast uyğunluğu üçün tənzimləmək daha asandır, bu da saytınızın hər bir ziyarətçisi üçün daha yaxşı təcrübə təmin edir.
Oxumağa davam et: Veb Dizayn və İnkişaf · Veb Dizayn