Published on

Swift'da Qulaylik (Accessibility): Dinamik Ranglar

Authors

Agar ilovamizda Apple'ning native komponentlari — primary, secondary kabi ranglardan foydalansak, ular avtomatik ravishda qulaylik (accessibility) talablariga javob beradi. Ammo o'zimizning maxsus rang sxemamizni yaratsak, buni ongli ravishda amalga oshirishimiz kerak.

Boshlang'ich ekran

struct AccessibilityColorsBootcamp: View {
    var body: some View {
        VStack {
            Button("Button 1") {}
                .foregroundColor(.primary)
                .buttonStyle(.borderedProminent)
                .font(.largeTitle)

            Button("Button 2") {}
                .tint(.orange)
                .buttonStyle(.borderedProminent)
                .font(.largeTitle)

            Button("Button 3") {}
                .foregroundColor(.white)
                .tint(.green)
                .buttonStyle(.borderedProminent)
                .font(.largeTitle)

            Button("Button 4") {}
                .foregroundColor(.green)
                .tint(.purple)
                .buttonStyle(.borderedProminent)
                .font(.largeTitle)
        }
    }
}

Ko'rinishdan hammasi o'qiladi, ammo 3-tugma (oq matn, yashil fon) va 4-tugma (yashil matn, binafsha fon) ba'zi foydalanuvchilar uchun o'qilishi qiyin bo'lishi mumkin.

Rang kontrastini tekshirish

Xcode Accessibility Inspector

Xcode → Xcode menyu → Developer Tools → Accessibility Inspector. Inspector ichida Window → Show Color Contrast Calculator ni tanlang.

Bu vosita ikki rang berilganda ularning kontrast nisbatini hisoblaydi. Masalan: qora rangda oq fon — 21:1 (juda yuqori).

Qanday nisbat yaxshi?

  • AA daraja (minimal): 4.5:1 (oddiy matn), 3:1 (katta matn)
  • AAA daraja (ideal): 7:1

Yashil fon + oq matn: taxminan 2.8:1 — bu barcha matn o'lchamlari uchun muvaffaqiyatsiz. Bunday rang sxemasini ilovada ishlatmaslik kerak.

Internetda bepul rang kontrast tekshiruvchi saytlar bor (masalan, webaim.org/resources/contrastchecker). Rang sxemangizni tanlashdan oldin shu yerda barcha yorug'/qorong'i rejim variantlarini tekshiring.

Asosiy qoida: Yaxshi kontrast nisbatiga ega bo'lsangiz, quyidagi barcha sozlamalarning aksariyati o'z-o'zidan hal bo'ladi.

Muhit o'zgaruvchilari (Environment Values)

Foydalanuvchilar qurilma sozlamalarida bir nechta qulaylik parametrlarini yoqishi mumkin. Ularni ilovamizda quyidagicha o'qiymiz:

@Environment(\.accessibilityReduceTransparency) var reduceTransparency
@Environment(\.colorSchemeContrast) var colorSchemeContrast
@Environment(\.accessibilityDifferentiateWithoutColor) var differentiateWithoutColor
@Environment(\.accessibilityInvertColors) var invertColors

1. reduceTransparency — shaffoflikni kamaytirish

Foydalanuvchi "Reduce Transparency" yoqib qo'ysa, loycha fon (blur, material) ko'rish uchun qiyinlashadi. Bunday holda uni to'liq qoraytirishimiz mumkin:

Color.black
    .opacity(reduceTransparency ? 1.0 : 0.5)
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .ignoresSafeArea()

Reduce Transparency yoqiq → to'liq qora fon (aniq chegaralar), o'chiq → yarim shaffof kulrang fon (chiroyli effekt).

2. colorSchemeContrast — kontrast oshirish

Foydalanuvchi "Increase Contrast" yoqsa, ba'zi native komponentlar avtomatik o'zgaradi. Biz ham qo'shimcha moslashtira olamiz:

Button("Button 3") {}
    .foregroundColor(colorSchemeContrast == .increased ? .white : .primary)
    .tint(.blue)
    .buttonStyle(.borderedProminent)
    .font(.largeTitle)

Kontrast oshirilganda quyuq ko'k fon ustidagi matn oq bo'ladi — o'qilishi osonroq.

3. differentiateWithoutColor — rangsiz farqlash

Bu sozlama yoqilganda, foydalanuvchi rangga tayanmasdan farqlashni istaydi (masalan, rang ko'rish qiyinlashgan holat). Bunday holda rangli sxemani oddiy qora-oqqa almashtirish tavsiya etiladi:

Button("Button 4") {}
    .foregroundColor(differentiateWithoutColor ? .white : .green)
    .tint(differentiateWithoutColor ? .black : .purple)
    .buttonStyle(.borderedProminent)
    .font(.largeTitle)

Sozlama yoqiq → qora fon, oq matn (juda o'qilishi oson), o'chiq → binafsha fon, yashil matn (maxsus sxema).

4. invertColors — ranglarni teskari qilish

Bu sozlama yoqilganda, tizim ranglarni o'z-o'zidan teskari qiladi. Agar kerak bo'lsa, o'zimiz ham boshqarishimiz mumkin:

@Environment(\.accessibilityInvertColors) var invertColors

Hozircha ko'pchilik standart komponentlar bu sozlamani avtomatik qo'llab-quvvatlaydi.

Qachon bularni qo'lda yozish kerak emas

Agar ilovangiz asosan qora matn oq fonda yoki oq matn qora fonda bo'lsa — bu yerga keltirilgan barcha sozlamalar o'z-o'zidan ishlaydi. Instagram, Facebook, TikTok kabi katta ilovalarda deyarli hech qachon o'qilishi qiyin joy yo'q, chunki ular har doim rang kontrastini tekshirib boradi.

Shu sababli: birinchi va eng muhim qadam — rang sxemangizni tanlashda kontrast nisbatini tekshirish. Yaxshi kontrast nisbatiga ega bo'lsangiz, maxsus muhit o'zgaruvchilarini har bir tugma uchun yozishga kamdan-kam ehtiyoj tug'iladi. Agar maxsus ranglar ishlatayotgan bo'lsangiz esa, simulyatorda Sozlamalar → Qulaylik → Displey va matn o'lchami bo'limiga kirib, shu sozlamalarni yoqib-o'chiring va ilovangiz qanday ko'rinishini tekshiring.

Xulosa: amaliy ketma-ketlik

  1. Rang sxemasini tanlashdan oldin kontrast nisbatini tekshiring (maqsad: ≥ 4.5:1).
  2. Simulyatorda accessibility sozlamalarini yoqib, ilovangizni ko'rib chiqing.
  3. Muammo topilgan joylarda @Environment o'zgaruvchilarini qo'llab, muqobil ko'rinish taqdim eting.
  4. Barcha joyni moslash shart emas — faqat aniq muammo bo'lgan joylarni hal qiling.
Buy mea coffee