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