WCAG 2.2 rəng kontrastı və əlçatanlıq: rəqəmsal şəkillərdə rəng korluğunun sınaqdan keçirilməsi

1. Rəng görmə çatışmazlıqlarını anlamaq: protanopiya, deyteranopiya və tritanopiya

İnsanın rəng qavrayışı torlu qişadakı uzun (qırmızı üçün L-kolbacıqlar), orta (yaşıl üçün M-kolbacıqlar) və qısa (mavi üçün S-kolbacıqlar) işıq dalğa uzunluqlarına həssas üç xüsusi fotoreseptor kolbacıq hüceyrəsinə əsaslanır. Rəng görmə çatışmazlığı bu kolbacıq növlərindən biri və ya bir neçəsi genetik olaraq olmadıqda, mutasiyaya uğradıqda və ya funksional olaraq zəiflədikdə baş verir.

Protanopiya və protanomaliya (qırmızıya zəiflik): olmayan və ya qüsurlu L-kolbacıqlar səbəbindən yaranır; protanopiyalı şəxslər qırmızını tünd boz və ya qəhvəyimtıl-qara kimi qavrayır. Qırmızı dalğa uzunluqları minimal torlu qişa reaksiyası yaratdığı üçün parlaq qırmızılar həddən artıq tutqun görünür. UI dizaynında canlı qırmızı 'Hesabı sil' düyməsi protanopiyalı istifadəçiyə demək olar ki, qara görünə bilər.

Deyteranopiya və deyteranomaliya (yaşıla zəiflik): bütün CVD hallarının 60%-dən çoxunu təşkil edən ən geniş yayılmış rəng korluğu forması. Qüsurlu M-kolbacıqlar səbəbindən deyteranoplar yaşıl, sarı, narıncı və qırmızını fərqləndirməkdə çətinlik çəkir. 'Mənfəət'i yaşıl, 'Zərər'i qırmızı ilə göstərən xətti qrafik eyni sarımtıl-xaki çalarlarında görünür.

Tritanopiya və tritanomaliya (mavi-sarı korluq): kişilər və qadınlar arasında bərabər şəkildə təxminən 10 000 nəfərdən 1-ni təsir edən, qüsurlu S-kolbacıqlar səbəbindən yaranan nadir vəziyyət. Tritanoplar mavini yaşılla, sarını isə bənövşəyi və ya çəhrayı ilə qarışdırır. Palitra balansınızı bütün şərtlər altında kliyent tərəfli Əsas rəngləri çıxar alətimizlə dərhal təhlil edə və yoxlaya bilərsiniz.

2. WCAG 2.2 kontrast riyaziyyatı: nisbi işıqlılıq və kontrast nisbətləri

Veb Məzmun Əlçatanlıq Təlimatları (WCAG 2.2) rəng kontrastını subyektiv insan rəng çarxı modelləri ilə qiymətləndirmir. Əvəzində standart optik əlçatanlığı nisbi işıqlılığa (L) əsaslanan ciddi riyazi düsturla qiymətləndirir; nisbi işıqlılıq rəng fəzasındakı istənilən nöqtənin nisbi parlaqlığı kimi müəyyən edilir və ən tünd qara üçün 0, ən açıq ağ üçün 1-ə normallaşdırılır.

Nisbi işıqlılıq düsturu: işıqlılığı hesablamaq üçün sRGB rəng kanalı dəyərləri (0–255 şkalasında R, G, B) əvvəlcə qamma korreksiyasını aradan qaldırmaq üçün xəttiləşdirilir. Hər kanal 255-ə bölünür: C <= 0.04045 olarsa, C_lin = C / 12.92; əks halda C_lin = ((C + 0.055) / 1.055) ^ 2.4. Sonra işıqlılıq insan fotometrik çəki düsturu ilə hesablanır: 'L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin'. Diqqət edin ki, yaşıl kanal insan torlu qişa biologiyasını əks etdirərək hiss olunan işıqlılığın 71%-dən çoxunu təşkil edir.

Kontrast nisbəti düsturu: daha açıq rəng (L1) ilə daha tünd rəng (L2) arasındakı kontrast nisbəti belə müəyyən edilir: '(L1 + 0.05) / (L2 + 0.05)'. Bu, 1:1 (eyni rənglər, sıfır kontrast) ilə 21:1 (təmiz ağ üzərində təmiz qara) arasında dəyişən nisbət verir.

3. Hədlər: WCAG AA (4.5:1) və AAA (7:1) uyğunluq hədəfləri

WCAG 2.2 uyğunluğu üç mütərəqqi pilləyə bölür: A səviyyəsi (minimum), AA səviyyəsi (korporativ vebsaytlar və dövlət portalları üçün qlobal hüquqi standart) və AAA səviyyəsi (tibbi proqram təminatı və köməkçi interfeyslər kimi yüksək əlçatanlıq mühitləri üçün qızıl standart).

AA səviyyəsinin tələbləri: standart əsas mətn üçün (18pt adi şriftdən və ya 14pt qalın şriftdən kiçik) ön plan mətni ilə onun fonu arasındakı kontrast nisbəti ən azı 4.5:1 olmalıdır. Böyük mətn (ən azı 18pt və ya 14pt qalın) və vacib qrafik UI komponentləri (daxiletmə haşiyələri, keçid açarları və qrafik ikonları kimi) üçün hədd 3:1-ə qədər yumşaldılır.

AAA səviyyəsinin tələbləri: parlaq günəş işığı, parıltı və ya ağır görmə qüsuru altında maksimum oxunaqlılıq üçün AAA səviyyəsi adi əsas mətn üçün ən azı 7:1, böyük mətn üçün isə 4.5:1 kontrast nisbəti tələb edir. Veb qrafikanız və ya banner şəkilləriniz bu riyazi hədlərdən aşağı düşürsə, kliyent tərəfli Kontrastı tənzimlə alətimizlə orta ton və kölgə kontrastını dinamik şəkildə artıra bilərsiniz.

4. Daltonizasiya: real vaxtda rəng korluğu korreksiyasının arxasındakı alqoritm

Müasir proqram alətləri rəqəmsal qrafikada rəng korluğunu necə simulyasiya edir və korreksiya edir? Proses ilk dəfə tədqiqatçılar Brettel, Viénot və Mollon (1997) tərəfindən tərtib edilmiş və Machado və həmmüəllifləri (2009) tərəfindən təkmilləşdirilmiş 'Daltonizasiya' adlı qabaqcıl riyazi təsvir transformasiyasına əsaslanır.

1-ci mərhələ: LMS kolbacıq reaksiyası transformasiyası: alqoritm əvvəlcə sRGB piksel dəyərlərini uzun, orta və qısa torlu qişa kolbacıqlarının fiziki foton udma sürətini modelləşdirən fizioloji LMS rəng fəzasına çevirir: '[L, M, S]^T = M_sRGB_to_LMS * [R, G, B]^T'. Protanoplar üçün çatışmayan L dəyəri neytral dixromatik qarışıqlıq xətti boyunca proyeksiya kimi interpolyasiya edilir.

2-ci mərhələ: xəta vektorunun sürüşdürülməsi və sintezi: şəkli rəng korluğu olan istifadəçi üçün korreksiya etmək üçün (Daltonizasiya korreksiyası) orijinal LMS şəkli ilə simulyasiya edilmiş dixromat şəkli arasındakı fərq itirilmiş vizual məlumatı təmsil edir. Daltonizasiya alqoritmi bu itirilmiş xəta vektorunu sağ qalan rəng kanallarına sürüşdürür — itirilmiş qırmızı kontrastı aşkar edilə bilən mavi və işıqlılıq kontrastına çevirir. Piksel işıqlılıq dəyərlərini Damcı ilə rəng seçici alətimizlə yoxlaya bilərsiniz.

5. Praktik UI/UX dizayn qaydaları: yalnız rəngə əsaslanan məlumatdan kənara

WCAG uğur meyarı 1.4.1 (rəngin istifadəsi) ciddi şəkildə müəyyən edir: rəng məlumatı çatdırmağın, əməliyyatı göstərməyin, cavab istəməyin və ya vizual elementi fərqləndirməyin yeganə vizual vasitəsi kimi istifadə edilməməlidir. İnklüziv dizayn nümunələrini qəbul etmək tətbiqinizin görmə qabiliyyətindən asılı olmayaraq intuitiv qalmasını təmin edir.

1-ci qayda: rəngi mənalı qliflər və mətn etiketləri ilə birləşdirin: xəta sahəsini heç vaxt yalnız qırmızı daxiletmə haşiyəsi ilə göstərməyin. Haşiyəni həmişə açıq xəbərdarlıq ikonu və təsviri mətn mesajı ilə müşayiət edin ('Parolda rəqəm olmalıdır'). Eynilə, form status nişanlarında rəngi aydın mətn statusu ilə birləşdirin: 'Aktiv', 'Gözləmədə' və ya 'Rədd edildi'.

2-ci qayda: qrafikləri teksturalar, naxışlar və birbaşa etiketlərlə fərqləndirin: xətti qrafiklərdə və sahə diaqramlarında heç vaxt yalnız rəngli xətlərə arxalanmayın. Ayrılmış rəng kodlu əfsanələr əvəzinə fərqli ştrix naxışlarından (bütöv, qırıq, nöqtəli), həndəsi nöqtə markerlərindən (dairələr, üçbucaqlar, kvadratlar) və xəttin sonunda birbaşa mətn etiketlərindən istifadə edin. Sütunlu qrafiklərdə çarpaz ştrixli kölgələmə və ya diaqonal zolaqlar tətbiq edin.

3-cü qayda: dizaynları monoxrom boz tonlarda sınaqdan keçirin: dizayn əlçatanlığı üçün ən etibarlı sınaq bütün tərtibatı ağ-qaraya çevirməkdir. Qrafikləriniz, düymələriniz və bildiriş bannerləriniz təmiz boz tonlarda 100% anlaşıqlı qalırsa, dizaynınız riyazi olaraq rəng korluğunun bütün formalarına qarşı immunitetlidir. İstənilən aktivi kliyent tərəfli Boz tonlara çevir alətimizlə dərhal ağ-qaraya çevirə bilərsiniz.

6. Kliyent tərəfli əlçatanlıq auditi və server yükləmə təhlükələri

Mülkiyyət məhsul maketlərini, məxfi səhiyyə portallarını və dərc olunmamış bank UI dizaynlarını onlayn əlçatanlıq alətləri ilə auditdən keçirmək, həmin alətlər emal üçün xam şəkilləri bulud serverlərinə yükləyirsə, tez-tez ciddi təhlükəsizlik zəiflikləri yaradır.

2run.tools matris transformasiyalarının, rəng korluğu simulyasiyalarının və piksel işıqlılığı hesablamalarının 100%-ni HTML5 Canvas və TypedArray-lər vasitəsilə tamamilə brauzerinizin şəxsi JavaScript icra mühitində yerinə yetirərək tam məxfiliyə zəmanət verir. Dizayn fayllarınız heç vaxt kompüterinizi tərk etmir və bu, korporativ təhlükəsizlik uyğunluğunu mümkün edir.