Kontrastli interfeyslar va o’qish qobiliyati

1) Nima uchun kontrast

• kognitiv yuklamani va charchoqni kamaytiradi,
• interfeysni skanerlash tezligini yaxshilaydi,
• ko’rish va ranglarni idrok etishda nuqsonlari bo’lgan odamlar uchun foydalanish imkoniyatini oshiradi,
• o’zaro bog’liq stsenariylardagi xatolar sonini kamaytiradi (to’lovlar, shakllar, tasdiqlash).

2) Bazaviy tushunchalar va formulalar

2. 1 WCAG boʻyicha kontrast

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), bunda’L1 ≥ L2’,’L’- nisbiy yorqinlik (0.. 1).

2. 2 Nisbiy yorqinlik (sRGB)

1. R, G, B komponentlarini 0.. 1 diapazoniga kiriting.

• agar’c ≤ 0. 04045’, to’c _ lin = c/12. 92`
• aks holda’c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Yorqinlik: ’L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 Rang ifodalari

HSL/HSV - qo’lda sozlash uchun qulay, ammo bir tekis emas.
Lab/LCH/OKLCH - inson sezgisiga yaqinroq; OKLCH o’qish qobiliyatini saqlashda yorqinlik/to’yinganlikni tizimli ravishda o’zgartirish uchun qulaydir.

3) Normalar va maqsadlar (WCAG 2. 2)

Matn ≥ 14 pt bold yoki ≥ 18 pt (oddiy): kontrast minimal 3:1 (AA).
Qolgan matn: kontrast kamida 4. 5:1 (AA).
AAA (yuqori o’qish qobiliyati): 7:1 oddiy matn uchun; 4. Katta uchun 5:1.
Ikonografiya va muhim nefotografik elementlar (kirish maydonlari chegaralari, chekbokslar, o’tkazgichlar, xato indikatorlari): fon bilan 3:1 ko’rsatkichi.
Holatlar (hover/focus/pressed/disabled) holatlar yoki fon o’rtasida 3:1 dan kam bo’lmagan farqga ega bo’lishi kerak, shuningdek aniq fotografik indikatorlar (havolalar, soyalar/ramkalar, qalinlik o’zgarishi).

4) Dizayn-tizim: kontrast tokenlari

Dizayn tizimida kontrastni tokenlarning xususiyati sifatida qayd etishni tavsiya qilamiz.

• ’fg/primary’ ≥’bg/base’7:1 (tanqidiy matn uchun AAA)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• ’fg/muted’ ≥’bg/subtle’3:1 (xizmat matni)
• ’border/default’ ≥’bg/base’3:1 (maydon chegaralari, kartochkalar)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (havolalar/tugmalar)
• ’interactive/disabled’ aktiv holatlarni taqlid qilmasligi kerak; kontrastni kamaytirish va kursor/ARIA atributlaridan foydalaning.

• mavzuning asosiy yorqinligi (L), so’ngra qatlamlar/sirtlar uchun’Δ L’og’ishlari (’bg/subtle’,’bg/elevated’),
• testlarda minimal kontrast juftliklarni qayd qiling.

5) Yorqin va qorong’u mavzular

Yorqin mavzu: matn deyarli qora (# 000 sof emas, balki iliq/sovuq rangda), «porlashni» kamaytirish uchun oq rangdan biroz ranggacha.
Qorong’u mavzu: toza # 000 fondan qoching - L ≈ 0 bilan chuqur grafit/ko’mir. 12–0. 16 yorug’likni kamaytiradi; oq matnni L ≈ 0 gacha yumshating. 9.
Ikkala mavzuda ham bir xil qarama-qarshi maqsadlarni saqlang; rang urg’usi qorong’i fonda o’qishni yo’qotishiga yo’l qo’ymang (ko’pincha’Δ L’o’zgarishi va to’yinganlik pasayishi kerak).

6) Tasvirlar va videolardagi matn

Matn ostidagi overley (gradient/shaffof 40-60%) yoki plashkalardan foydalaning.
Kamida 4 ta biriktiring. 5:1 matn va plashkaning lokal foni o’rtasida.
Dinamik video uchun - kadrning yorqinligini tahlil qilish bo’yicha moslashuvchan fon/overley (markaziy/soxta sohaning samplingi).

7) Holatlar va interaktivlik

Havolalar nafaqat rang bilan farqlanishi kerak: oddiy matn bilan 3:1 ≥ bosish yoki hover/focus + kontrast.
Tugmalar: matn va piktogramma ≥ 4. 5:1 to’ldirishga; atrof-muhitga 3:1 ≥ quyish.
Xatolar/muvaffaqiyatlar/ogohlantirishlar: rangga tayanmang; belgi/matnli maslahatlar qo’shing; matn kontrastini kamida 4 ta qilib qo’ying. 5:1.

8) Rangni idrok etishda nuqsoni bo’lgan odamlar

• Deuteranopia/Protanopia (qizil-yashil zona): qoʻshimcha belgilarsiz «qizil-yashil» kombinatsiyasidan qoching.
• Tritanopia: ko’k-sariq juftliklar alohida tekshiriladi.
• Shakl va grafiklarni tushunarli qiling: matn belgilari, shtrix/markerlarning turli turlari, quyish naqshlari, segmentlarga imzolar.

9) Bosmaxona va fon

Asosiy matnning kegli: 14-16 px minimal (web), 16-18 px kontent zonalari uchun.
Satrlararo oraliq 1. 4–1. 6 yuqori kontrast fonida o’qishni yaxshilaydi.
Nozik chizmalardan ehtiyot boʻling.
Rangli fon matni: maqsadli munosabatda boʻlish uchun orqa fon toʻyinishini kamaytiring va/yoki yorqinlikni oshiring.

10) Diagrammalar, jadvallar, grafiklar

Chiziqlar/ustunlar ≥ 3: 1

O’qlar va afsonalar imzosi ≥ 4. 5:1.
Rangdan tashqari koʻrinadigan shakllar/patternlardan foydalaning.

11) Dinamik/moslashuvchan kontrast

Auto contrast: tanlangan toʻldirgichning kontrast rangini hisoblab chiqing (masalan, OKLCH: tanlash’L’orqali 4 ga erishing. 5:1).
Tizim moslamalari:’prefers-contrast’,’forced-colors’, high-contrast OS rejimlarini hurmat qiling.
Personallashtirish: ilovada «Yuqori kontrast» ni sozlash (’Δ L’ni kuchaytirish, brend urg’ularini shakl/piktogramma orqali markalashni saqlab qolgan holda yanada neytrallarga almashtirish).

12) Nazorat jarayonlari va avtomatlashtirish

12. 1 Dizaynerlar uchun

Maketlarda (ikkala mavzu va asosiy fon) kontrastni tekshiring.
Tarkibiy qismlarga (title/primary/secondary/hint) «kontrastli slotlarni» kiriting.
Har bir komponent uchun ruxsat etilgan fon kontekstlarini hujjatlashtiring.

12. 2 Ishlab chiquvchilar uchun

Yunit-xelperlar: token-juftliklar uchun testlarda kontrast va assertani hisoblash funksiyasi.
Kontrastli metriklarni tekshirgan holda vizual snapshotlar (skrin-render + semplar bo’yicha L1/L2 hisoblash).
Uslub linterlari: faqat tokenlar orqali «xom» rangni taqiqlash.

12. 3 V CI/CD

Mavzu va holatlardagi barcha juft’fg/bg’larni tekshirish.
Komponent, variant, mavzu va haqiqiy ahamiyati ko’rsatilgan holda qoidabuzarliklar bo’yicha hisobot (masalan, 3. 9:1 da talab qilinadi 4. 5:1).

13) iGaming xususiyatlari (ixtiyoriy)

Yorqin reklama bannerlari va turnirlar kartochkalari koʻpincha matnni «yeydi». Plush/overley va orqa fon toʻyinishini cheklash talab etiladi.
Mas’ul bildirishnomalarning tizimli elementlari (18 +, limitlar, xavflar) - kontrast bo’yicha AAA.
Yetakchi jadvallarda/koeffitsiyentlarda: sonlar va «+/-» belgilari ≥ 4. 5:1, yutuq yoritilishi - nafaqat rang (ikonka/belgi).

14) Antipatternlar

Holat farqlanishi uchun faqat rangga tayanish.
Rangli fondagi ingichka kulrang shriftlar kontrastni hisoblamasdan.
«Qorong’i-qorong’i» Dark Mode, «yorqin-yorqin» reklama zonalarida.
Matnning tafsilotlari/shovqini plashkasiz.

15) Revyu uchun chek-varaq

Asosiy matn

• ≥ 4. 5:1 (oddiy), ≥ 3:1 (katta/yogʻli).

Bogʻlar/tugmalar

• Tugma matni ≥ 4. Quyishga 5:1.
• Holatlarning farqlanishi ≥ 3:1 yoki aniq indikatorlar.

Nishonchalar/chegaralar

• ≥ 3:1 ga.

Qorong’u/yorqin mavzular

• Xuddi shu maqsadlarga erishildi.

Media-fon

• Overley/plashka, koeffitsiyent saqlanib qolgan.

Foydalanish imkoniyati

• Rangdan tashqari fotografik belgilar ham bor.

Avtomatlashtirish

• CI/CD’da tokenlar va komponentlar bo’yicha kontrast testlari.

16) Tokenlarni joriy etish (notatsiya misoli)

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)  # проверить на обоих фонах

Izoh: taxminiy qiymatlar; yakuniy mavzu aniq mavzuda kontrastni hisoblash bo’yicha tanlanadi.

17) Jamoa uchun hujjatlar

Gidlaynlarda: kontrast maqsadlari, to’g’ri/noto’g’ri juftliklar misollari, asosiy komponentlar uchun’fg × bg’matritsasi, media-fon qoidalari va «Yuqori kontrast» rejimini qanday yoqish kerakligini ko’rsating.
«Istisnolar va sabablar» (masalan, ruxsat etilgan 3. 8:1 yirik displey sarlavhasining tor holatida).

Qisqacha xulosa

Kontrast - ta’mli emas, o’lchanadigan parametr. Maqsadlarni belgilang (AA/AAA), ularni tokenlar orqali boshqaring (yaxshiroq OKLCH), avtomatik ravishda CI va vizual maketlarda tekshiring, qorong’u/yorqin mavzularni va rang ko’rish qobiliyati buzilgan odamlarni hisobga oling. Bu o’qishni kafolatlaydi, xatolarni kamaytiradi va konversiyani oshiradi.