Kontrast interfeyslər və oxunabilirlik

1) Niyə kontrast

• bilişsel yükü və yorğunluğu azaldır,
• interfeys tarama sürətini artırır,
• görmə və rəng qavrayışı pozulmuş insanlar üçün əlçatanlığı artırır,
• qarşılıqlı əlaqəli ssenarilərdə səhvlərin sayını azaldır (ödənişlər, formalar, təsdiqlər).

2) Əsas anlayışlar və formullar

2. 1 WCAG kontrastı

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), burada 'L1 ≥ L2', 'L' - nisbi parlaqlıq (0.. 1).

2. 2 Nisbi parlaqlıq (sRGB)

1. R, G, B komponentlərini 0.. 1 diapazonuna gətirin.

• əgər 'c ≤ 0. 04045 ', sonra' c _ lin = c/12. 92`
• əks halda 'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Parlaqlıq: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 Rəng görünüşü

HSL/HSV - əllə konfiqurasiya üçün əlverişli, lakin təkrarlanan deyil.
Lab/LCH/OKLCH - insan qavrayışına daha yaxın; OKLCH oxunma qabiliyyətini qoruyarkən sistematik olaraq işıqlıq/doygunluq dəyişikliyi üçün əlverişlidir.

3) Normalar və məqsədlər (WCAG 2. 2)

Mətn ≥ 14 pt bold və ya ≥ 18 pt (adi): kontrast minimum 3:1 (AA).
Qalan mətn: kontrast minimum 4. 5:1 (AA).
AAA (artan oxu qabiliyyəti): 7:1 adi mətn üçün; 4. 5:1 böyük üçün.
İkonoqrafiya və mühüm fotoqrafik olmayan elementlər (giriş sahələrinin sərhədləri, çek qutuları, açarlar, səhv göstəriciləri): fon ilə 3:1 göstərici.
Hallar (hover/focus/pressed/disabled) hallar və ya fon arasında ən az 3:1 fərqlilik olmalıdır, üstəgəl aydın qeyri-fotoqrafik göstəricilər (link, kölgə/çərçivə, qalınlıq dəyişikliyi).

4) Dizayn sistemi: kontrast işarələri

Dizayn sistemində kontrastı tokenlərin xassəsi kimi düzəltməyi tövsiyə edirik.

• 'fg/primary' ≥ 'bg/base' 7:1 (kritik mətn üçün AAA)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• 'fg/muted' ≥ 'bg/subtle' 3:1 (rəsmi mətn)
• 'border/default' ≥ 'bg/base' 3:1 (sahə sərhədləri, kartlar)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (linklər/düymələr)
• 'interactive/disabled' aktiv halları təqlid etməməlidir; kontrastın azaldılması və kursor/ARIA atributları istifadə edin.

• mövzunun əsas işığı (L), sonra qatlar/səthlər üçün 'Δ L' sapmaları ('bg/subtle', 'bg/elevated'),
• testlərdə minimum kontrast cütləri qeyd edin.

5) Parlaq və qaranlıq mövzular

Yüngül mövzu: mətn demək olar ki, qara (təmiz # 000 deyil, isti/soyuq çalardır), «parıltını» azaltmaq üçün ağ rəngdən yüngül rəngə qədər.
Qaranlıq mövzu: təmiz # 000 fon çəkinin - L ≈ 0 ilə dərin qrafit/kömür. 12–0. 16 işıqları azaldır; ağ mətn L ≈ 0 qədər yumşaldır. 9.
Hər iki mövzuda eyni ziddiyyətli hədəfləri saxlayın; rəng vurğularının qaranlıq fonda oxunma qabiliyyətini itirməsinə imkan verməyin (tez-tez 'Δ L' sürüşməsi və doygunluğun azalması lazımdır).

6) Şəkillərdə və videolarda mətn

Overlay (gradient/yarı şəffaf təbəqə 40-60%) və ya mətn altında qəliblər istifadə edin.
Ən azı 4 bərkidin. 5:1 mətn və lokal arxa plan arasında.
Dinamik video üçün - çərçivə parlaqlığının analizi üçün adaptiv fon/overley (mərkəzi/saxta sahənin samplinqi).

7) Vəziyyət və interaktivlik

Linklər yalnız rəng ilə fərqlənməməlidir: adi mətnlə 3:1 ≥ hover/focus + kontrast üzərində default vurğulamaq və ya vurğulamaq.
Düymələr: mətn və simvol ≥ 4. 5:1 doldurma; mühitə 3:1 ≥ doldurun.
Səhvlər/müvəffəqiyyət/xəbərdarlıq: rəngə güvənməyin; nişanlar/mətn ipuçları əlavə edin; ən azı 4 mətn kontrastı təmin edin. 5:1.

8) Rəng qavrayışı pozulmuş insanlar

• Deuteranopia/Protanopia (qırmızı-yaşıl zona): əlavə əlamətlər olmadan «qırmızı vs yaşıl» birləşmələrindən çəkinin.
• Tritanopia: mavi-sarı cütlər ayrıca yoxlamaq.
• Formaları və qrafikləri aydın edin: mətn işarələri, müxtəlif ştrix/marker növləri, doldurma naxışları, seqmentlərin imzaları.

9) Mətbəə və fon

Əsas mətn Cegle: 14-16 px minimum (web), məzmun zonaları üçün 16-18 px.
Sətirlərarası interval 1. 4–1. 6 yüksək kontrast fonunda oxuculuğu yaxşılaşdırır.
Qeyri-kafi kontrast üzərində incə yazılardan çəkinin.
Rəngli fon mətni: hədəf nisbətinə çatmaq üçün arxa plan doygunluğunu azaltın və/və ya işığı artırın.

10) Diaqramlar, cədvəllər, qrafiklər

Xətlər/sütunlar ≥ 3:1 grid/fon.
Oxların və əfsanələrin imzaları ≥ 4. 5:1.
Rəngdən başqa fərqli formalar/nümunələr istifadə edin.

11) Dinamik/adaptiv kontrast

Auto contrast: Seçilmiş dolgu üçün mətnin kontrast rəngini hesablayın (məsələn, OKLCH vasitəsilə: 4-ə çatmaq üçün 'L' seçin. 5:1).
Sistem parametrləri: 'prefers-contrast', 'forced-colors', high-contrast OS rejimlərinə hörmət edin.
Personalizasiya: tətbiqdə «Yüksək kontrast» konfiqurasiyası ('Δ L' gücləndirilməsi, forma/ikonalar vasitəsilə markalı aksentlərin daha neytral olaraq dəyişdirilməsi).

12) Nəzarət prosesləri və avtomatlaşdırılması

12. 1 Dizaynerlər üçün

Maketlərdə kontrastı yoxlayın (hər iki mövzuda və əsas fonda).
Komponentlərdə «kontrast yuvaları» daxil edin (title/primary/secondary/hint).
Hər bir komponent üçün icazə verilən fon kontekstlərini sənədləşdirin.

12. 2 Developers üçün

Birlik köməkçiləri: token cütləri üçün testlərdə kontrast və assertlərin hesablanması funksiyası.
Kontrast metriklərin yoxlanılması ilə vizual snapshotlar (screen-render + L1/L2 hesablanması).
Stil linterləri: «xam» rəngin qadağan edilməsi, yalnız tokenlər vasitəsilə.

12. 3 CI/CD

Mövzu və şərtlərdə bütün 'fg/bg' cütlərini yoxlayın.
Komponent, variant, mövzu və faktiki dəyəri (məsələn, 3. 9:1 tələb olunur 4. 5:1).

13) iGaming xüsusiyyətləri (isteğe bağlı)

Parlaq reklam bannerləri və turnir kartları tez-tez mətni «yeyir». Plush/overley və fon doygunluğunun məhdudlaşdırılması tələb olunur.
Məsuliyyətli bildirişlərin sistem elementləri (18 +, limitlər, risklər) - kontrast üzrə AAA.
Liderlər/əmsallar cədvəllərində: ədədlər və işarələr «+/-» ≥ 4. 5:1, qalib işıqlandırma - yalnız rəng (nişanlar/nişanlar).

14) Antipattern

Vəziyyətin fərqliliyi üçün yalnız rəngə güvənmək.
Kontrast hesablamadan rəngli fonda nazik boz şriftlər.
Dark Mode-da «qaranlıq-qaranlıq», promosyon zonalarında «parlaq-parlaq».
Təfərrüatlar/səs-küy ilə fonda mətn.

15) Review üçün çek siyahısı

Əsas mətn

• ≥ 4. 5:1 (adi), ≥ 3:1 (böyük/yağlı).

Linklər/düymələr

• ≥ düyməsinin mətni 4. 5:1 doldurulması.
• Vəziyyətlərin fərqliliyi ≥ 3:1 və ya aydın göstəricilər.

Nişanlar/sərhədlər

• ≥ 3:1 arxa plana.

Qaranlıq/parlaq mövzular

• Eyni kontrast hədəfləri əldə edilmişdir.

Media fonları

• Overlay/Plush, əmsal saxlanılır.

Mövcudluq

• Rəngdən başqa fotoqrafik əlamətlər də var.

Avtomatlaşdırma

• CI/CD-də tokenlər və komponentlər üzrə kontrast testləri.

16) Tokenlərin tətbiqi (notasiya nümunəsi)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

Qeyd: dəyərlər təxmini; final konkret mövzuda kontrast hesablanması ilə seçilir.

17) Komanda üçün sənədləşmə

Bələdçilərdə göstərin: kontrastın məqsədləri, düzgün/səhv cütlərin nümunələri, əsas komponentlər üçün 'fg × bg' matrisi, media arxa planları üçün qaydalar və «Yüksək kontrast» rejiminin necə daxil edilməsi.
«Istisnalar və səbəblər» canlı səhifəsini saxlayın (məsələn, 3. 8:1 böyük ekran başlığının dar halda).

Qısa xülasə

Kontrast dad deyil, ölçülə bilən parametrdir. Hədəfləri təyin edin (AA/AAA), tokenlər vasitəsilə idarə edin (daha yaxşı OKLCH-də), CI-də avtomatik və vizual olaraq düzənlərdə yoxlayın, tünd/açıq mövzuları və rəng görmə pozğunluğu olan insanları nəzərə alın. Bu oxunuşa zəmanət verir, səhvləri azaldır və dönüşümü artırır.