Rəng kontrastı və əlçatanlıq: WCAG nisbətləri və həllər

Ağ fonda açıq boz mətn dizayn faylında səliqəli görünür. Parlaq günəş altında telefonda və ya zəif görən insan üçün isə onu oxumaq əziyyətdir. Bu, həm də ən çox rast gəlinən əlçatanlıq xətasıdır: WebAIM Million 2026 (yeni vərəqdə açılır) ən populyar bir milyon ana səhifənin 83,9%-ində aşağı kontrastlı mətn tapıb (hər səhifədə orta hesabla 34 ayrı hal).

Yaxşı xəbər budur ki, kontrast ölçülə bilir, hədlər aydındır və düzəlişlər əsasən ucuzdur. Bu bələdçi sizə rəqəmləri, pulsuz alətləri və brend rənglərini sıfırdan başlamadan düzəltməyin yolunu verir.

Rəng kontrastı nisbəti nədir?

Kontrast nisbəti iki rəngin, adətən mətnin və onun fonunun nisbi parlaqlığını (luminansını) müqayisə edən rəqəmdir. WCAG onu sabit düsturla hesablayır, nəticə isə 1:1-dən (fərq yoxdur, ağ üzərində ağ) 21:1-ə (ağ üzərində qara) qədər olur. Rəqəm nə qədər böyükdürsə, iki rəngi ayırmaq bir o qədər asandır.

Düstur belədir: (L1 + 0,05) / (L2 + 0,05); burada L1 açıq rəngin, L2 isə tünd rəngin nisbi parlaqlığıdır. Onu heç vaxt əl ilə hesablamalı olmayacaqsınız, amma bir məqam vacibdir: yalnız parlaqlıq nəzərə alınır, rəng çaları yox. Yaşıl fonda qırmızı mətnin canlı görünüb yenə də aşağı bal almasının səbəbi budur.

Diqqətdən qaçan digər məqam yuvarlaqlaşdırmadır. W3C-nin 1.4.3 üzrə izah sənədi (yeni vərəqdə açılır) bildirir ki, hesablanmış dəyərlər “yuvarlaqlaşdırılmamalıdır (məsələn, 4,499:1 4,5:1 həddinə cavab vermir)”. Yəni ağ fonda #767676 boz (4,54:1) keçir, #777777 (4,48:1) isə keçmir, halbuki onları gözlə heç kim fərqləndirə bilməz.

WCAG hansı kontrast nisbətini tələb edir?

Qanunların və müqavilələrin əksəriyyətinin istinad etdiyi AA səviyyəsində adi mətnə fona nisbətən ən azı 4,5:1, böyük mətnə isə 3:1 kontrast lazımdır (1.4.3 uğur kriteriyası). İnterfeys komponentləri və məna daşıyan qrafika qonşu rənglərə nisbətən 3:1 kontrast tələb edir (1.4.11). Daha sərt AAA səviyyəsi adi mətn üçün 7:1, böyük mətn üçün 4,5:1 tələb edir (1.4.6).

Niyə məhz 4,5:1? W3C izah edir ki, bu nisbət “təxminən 20/40 görməyə ekvivalent görmə itkisi olan istifadəçilərdə adətən müşahidə olunan kontrast həssaslığı itkisini kompensasiya edir”. Başqa sözlə, hədd görməsi orta dərəcədə zəifləmiş insanlar üçün qoyulub, bunlara isə özünü heç vaxt əlilliyi olan insan adlandırmayacaq bir çox yaşlı müştəri də daxildir.

Bəzi mətnlər istisnadır: loqolar və brend adları, sırf dekorativ mətn, heç kimə görünməyən mətn, başqa əhəmiyyətli vizual məzmunu olan şəkildəki mətn və qeyri-aktiv idarəetmə elementlərindəki mətn. Loqonuz olduğu kimi qala bilər. Loqonuzun solğun rəngində yazılmış abzas isə qala bilməz.

Hansı mətn böyük sayılır?

WCAG-də böyük mətn ən azı 18 pt, qalın şriftdə isə ən azı 14 pt deməkdir. W3C bunları təxminən 24 CSS pikselə və qalın şrift üçün 18,5 pikselə çevirir. Bundan kiçik hər şeyə tam 4,5:1 lazımdır. Əsas mətn, şəkilaltı yazılar, forma etiketləri, qiymətlər və saytın aşağı hissəsindəki linklər demək olar ki, heç vaxt böyük mətn sayılmır, ona görə onlara daha yüksək nisbət lazımdır.

Praktikada bu belə görünür. Ağ fonda #949494 bozun kontrast nisbəti 3,03:1-dir. Bu, 28 piksellik başlıq üçün yaxşıdır, eyni rəngdə 16 piksellik abzas üçün isə xətadır. Bir çox sayt başlıqlarda keçir, onların altındakı hər şeydə isə kəsilir.

İncə və dekorativ şriftlər əlavə diqqət tələb edir. W3C qeyd edir ki, hamarlaşdırma (anti-aliasing) səbəbindən “xüsusilə incə və ya qeyri-adi şriftlər istifadəçi agentləri tərəfindən” seçdiyiniz rəngdən “xeyli solğun rəngdə göstərilə bilər”. Brend şriftiniz incə qalınlıqdadırsa, 4,51-i hədəfləmək əvəzinə 4,5:1-dən yuxarı ehtiyat saxlayın.

Kontrast tələbi düymələrə, ikonlara, fokus göstəricilərinə və diaqramlara da aiddirmi?

Bəli. 1.4.11 uğur kriteriyasına (AA) görə idarəetmə elementini, onun vəziyyətini və ya qrafikanı tanımaq üçün insanların görməli olduğu hər şeyin qonşu rənglərə nisbətən 3:1 kontrastı olmalıdır. Buraya forma sahələrinin çərçivələri, mətn etiketi olmayan ikonlar, fokus konturları, qeyd xanalarının və keçid düymələrinin (toggle) vəziyyətləri, diaqramların xətləri və seqmentləri daxildir. Düymənin içindəki mətnə isə yenə 4,5:1 lazımdır.

• Forma sahələri: ağ fonda açıq boz #CCCCCC çərçivənin nisbəti cəmi 1,61:1-dir. Harada yazmaq lazım olduğunu göstərən yeganə şey bu solğun xətdirsə, tələbə cavab vermir.
• Düymələr: WCAG hər düymənin ətrafında görünən çərçivə tələb etmir. W3C-nin 1.4.11 üzrə izah sənədi (yeni vərəqdə açılır) bildirir ki, sərhəd yalnız idarəetmə elementini tanımağın başqa vizual yolu olmadıqda lazımdır. Düymə yalnız rəngli formasına görə tanınırsa, həmin formanın səhifəyə nisbətən 3:1 kontrastı olmalıdır.
• İkonlar: yanında mətn olmayan axtarış böyüdücüsü, istək siyahısı ürəyi və ya səbət ikonu 3:1 tələb edir.
• Fokus göstəriciləri: klaviatura fokusunu göstərən kontur ətrafdakı fonla kontrast təşkil etməlidir. Daha yeni fokus kriteriyalarını WCAG 2.2 bələdçimiz əhatə edir.
• Diaqramlar: xətti diaqramdakı xətlərə və dairəvi diaqramın seqmentlərinə, eyni dəyərlər mətn kimi də göstərilmirsə, 3:1 lazımdır.
• Qeyri-aktiv idarəetmə elementləri istisnadır, amma insanlar düymənin basıla bilib-bilmədiyini yenə də anlamalıdırlar.

Əsas mətn daxilindəki linklər xüsusi haldır. Onlar alt xətt olmadan yalnız rənglə göstərilirsə, W3C-nin G183 (yeni vərəqdə açılır) texnikası link rəngi ilə ətrafdakı mətn arasında 3:1 tələb edir, hər ikisi isə fona nisbətən yenə 4,5:1 təmin etməlidir. Bütün bunlara cavab verən üç rəng tapmaq çətindir. Alt xətt isə qat-qat asandır.

Rəng kontrastını necə yoxlayım?

Konkret rəng cütləri üçün pulsuz kontrast yoxlama alətindən, canlı səhifələr üçün brauzerin developer alətlərindən, saytdakı problemli sahələri tapmaq üçün isə avtomatik skandan istifadə edin. Sonra alətlərin qaçırdığını gözlə yoxlayın: foto və qradiyent üzərindəki mətn, üzərinə gəlmə və fokus vəziyyətləri, yer tutucu mətn və xəta mesajları. Bunun çoxu hər səhifə şablonu üçün bir neçə dəqiqə çəkir.

• WebAIM Contrast Checker (yeni vərəqdə açılır): iki hex kodu daxil edin və adi mətn, böyük mətn və qrafik obyektlər üçün keçdi-keçmədi nəticəsi ilə birlikdə nisbəti görün. Onun parlaqlıq sürgüsü tələbə cavab verən ən yaxın çaları tapmaq üçün əlverişlidir.
• Colour Contrast Analyser (yeni vərəqdə açılır): Vispero-nun Windows və macOS üçün pulsuz masaüstü proqramı. Onun pipet aləti ekrandakı istənilən pikseldən nümunə götürür, bu da şəkil üzərindəki mətn, PDF-lər və tətbiqlər üçün faydalıdır; proqramda rəng korluğu simulyatoru da var.
• Chrome DevTools: mətnin üzərində sağ klikləyib “Inspect” seçin və rəng seçicisini açın. Onun kontrast nisbəti bölməsi (yeni vərəqdə açılır) AA və AAA üçün xətlər göstərir və tələbə cavab verən rəng təklif edə bilir. CSS Overview paneli isə səhifədəki bütün kontrast problemlərini sadalayır.
• Avtomatik yoxlama alətləri: brauzer əlavələri və Lighthouse bütün səhifədə aşağı kontrastlı mətni qeyd edir, amma şəkil və ya qradiyent üzərindəki mətni çox vaxt keçdi və ya keçmədi kimi yox, əl ilə yoxlanılmalı element kimi işarələyir.

Alətlərin gücü çatmayan yerdə nümunəni əl ilə götürün. Böyük banner şəklinin üzərindəki mətn üçün şəklin ən açıq hissəsini ən açıq hərflərin arxasında yoxlayın; W3C kifayət qədər kontrastı olmayan fon şəkillərini məlum xəta kimi göstərir (F83). Düymələrin üzərinə gəlin, onlara Tab ilə keçin, forma xətası yaradın, tünd rejim təklif edirsinizsə, ona keçin. Tünd mövzu da xətalı ola bilər: #121212 fonda #757575 bozun nisbəti 4,07:1-dir. Saytınızın əlçatanlığını necə test etməli bələdçimiz kontrastı digər sürətli əl ilə yoxlamalarla birlikdə izah edir.

Brendi dəyişmədən aşağı kontrastı necə düzəltmək olar?

Adətən mətn və kiçik elementlər üçün brend rənginizin daha tünd çalarını əlavə etməklə, orijinalı isə böyük başlıqlar, fonlar və illüstrasiyalar üçün saxlamaqla. Bir çox brend rəngi yalnız kiçik ölçülərdə tələbə cavab vermir. Açıq brend rəngi üzərində ağ mətni tünd mətnlə əvəz etmək çox vaxt kifayətdir və ziyarətçilərin əksəriyyəti yalnız səhifənin daha asan oxunduğunu hiss edəcək.

1. Hər brend rənginin əsas fonlarınıza nisbətən ən azı 4,5:1 verən, mətn üçün təhlükəsiz versiyasını hazırlayın və onu əsas mətn, linklər və kiçik ikonlar üçün işlədin.
2. Orijinal parlaq rəngi böyük başlıqlar (orada 3:1 kifayətdir), fonlar, illüstrasiyalar və bəzək üçün saxlayın.
3. Açıq brend rənglərində düymə mətnini ağdan tünd rəngə çevirin.
4. Fotoların üzərindəki mətnin arxasına bütöv və ya yarımşəffaf panel qoyun.
5. Hər vəziyyəti yoxlayın: üzərinə gəlmə, fokus, ziyarət edilmiş, seçilmiş, xəta və yer tutucu.
6. Tələbə cavab verən cütləri dizayn tokenləri və ya şablon ayarları kimi saxlayın ki, yeni səhifələr onları yenidən icad etmək əvəzinə hazır götürsün.

Rəng korluğu üçün dizayn: niyə təkcə rəng kifayət etmir?

Kontrast və rəng ayrı-ayrı problemlərdir. Colour Blind Awareness (yeni vərəqdə açılır) məlumatına görə təxminən hər 12 kişidən 1-ində və hər 200 qadından 1-ində, ən çox qırmızı-yaşıl tipli, rəng görmə pozuntusu var. WCAG 1.4.1 (yeni vərəqdə açılır) (A səviyyəsi) deyir ki, rəng məlumatı çatdırmağın yeganə vizual yolu olmamalıdır, ona görə onu mətn, ikon, naxış və ya alt xəttlə tamamlayın.

• Forma xətaları: təkcə qırmızı çərçivə kifayət deyil. Sahənin yanına, ideal halda ikonla birlikdə, “Poçt indeksini daxil edin” kimi mesaj əlavə edin.
• Stok və status: məhsulun yanındakı yaşıl və ya qırmızı nöqtə bir çox alıcıya heç nə demir. “Stokda var” və ya “Stokda yoxdur” yazın.
• Diaqramlar: rənglərin uyğunlaşdırılmasına əsaslanan legendanı oxumaq çətindir. Xətləri birbaşa etiketləyin və ya naxışlardan və müxtəlif xətt üslublarından istifadə edin.
• Linklər: əsas mətndə, yuxarıda göstərilən səbəblərə görə, onların altından xətt çəkin.

Problemi özünüz görmək üçün Chrome DevTools görmə pozuntularını imitasiya edə bilir, Colour Contrast Analyser-də də simulyator var. Kontrast burada da kömək edir: nisbət rəng çalarını yox, açıqlığı ölçür, ona görə nisbəti yüksək olan iki rəng, çalarları oxşar görünsə belə, fərqlənə bilən qalır. Zəif görən və başqa pozuntuları olan insanların cihazlarını necə tənzimlədiyi barədə ətraflı məlumat üçün əlilliyi olan insanların internetdən necə istifadə etdiyi yazısına baxın.

Yüksək kontrast rejimləri və kontrast düymələri kifayətdirmi?

Xeyr. Əməliyyat sisteminin kontrast mövzuları və səhifədəki kontrast düymələri daha çox kontrasta ehtiyacı olduğunu bilən və onu aktivləşdirən insanlara kömək edir. Amma WCAG səhifənizi standart vəziyyətində qiymətləndirir, yəni hər ziyarətçinin ilk gördüyü rənglər də tələbə cavab verməlidir. Düymə daha çoxunu istəyənlər üçün əlavə seçimdir, tələbə cavab verməyən rənglərin həlli deyil.

Əlilliyi olan bəzi insanlar sizin rənglərinizi öz rəngləri ilə əvəz edən Windows kontrast mövzularından istifadə edir. Saytınızı belə mövzu açıq halda test etməyə dəyər: fon şəkillərindən qurulmuş ikonlar yox ola, yalnız kölgə (box-shadow) ilə çəkilmiş fokus stilləri görünməz ola bilər. CSS prefers-contrast media sorğusu isə sistem ayarlarında bunu istəyən insanlara daha yüksək kontrastlı versiya təklif etməyə imkan verir.

Öz vidcetimizdə kontrast tənzimləməsi və rəng korluğu profili var, bəzi ziyarətçilər onları faydalı hesab edir. Biz yenə də sizə eyni şeyi deyərdik: əsas mətniniz ağ fonda #999999 rəngindədirsə, CSS-i dəyişin. Vidcet daha çox kontrast istəyən ziyarətçiyə buna nail olmaq imkanı verir. Tələbə cavab verməyən standart rəngləri düzəltmir, sənədlərimizdəki WCAG icmalı da bunu deyir.