Mobil Uygulamalarda High Contrast — Nedir, Erişilebilirlik ve Kontrast Ayarları

Erişilebilirlikte High Contrast Nedir?

High Contrast, işletim sistemi veya uygulamanın ön plan rengi (metin, simgeler) ile arka plan arasındaki farkı artırdığı bir görüntüleme modudur. WCAG AA standardına göre normal metin için minimum kontrast oranı 4.5:1 ve büyük metin (18pt veya 14pt kalın) için — 3:1'dir. High Contrast modu, oranı 7:1 ve üzerine çıkararak maksimum okunabilirlik sağlar.

Basitçe arka planı koyulaştırma veya metni açma işleminden farklı olarak, High Contrast kapsamlı bir şekilde çalışır: arayüz renk paletini sınırlı bir yüksek kontrastlı renk setiyle değiştirir, öğelerin etrafına ana hatlar ekler ve saydamlığı kaldırır. Bu mod, azalmış görme keskinliği, fotofobi ve belirli renk körlüğü türleri olan kişiler için tasarlanmıştır.

Üç tür High Contrast vardır: sistem düzeyi (işletim sisteminde etkinleştirilir ve tüm uygulamaları etkiler), uygulama içi (belirli bir uygulama içindeki yerleşik mod) ve web modu (CSS medya özelliği prefers-contrast). Sistem düzeyindeki High Contrast en güçlü olanıdır çünkü kendi erişilebilirlik desteği olmayan uygulamalarda bile renkleri geçersiz kılar.

High Contrast Kimin İhtiyacı Var?

High Contrast'ın ana kullanıcıları, katarakt (kontrast hassasiyetini azaltan mercek bulanıklığı), makula dejenerasyonu (merkezi görme kaybı), glokom ve diyabetik retinopatisi olan kişilerdir. Bu mod, parlak güneş ışığında çalışırken de gereklidir — yüksek kontrast, ekran parlamasını telafi eder. WebAIM'e (2025) göre, web sayfalarının %86'sı WCAG AA'nın altında kontrasta sahip metin içerir — kullanıcı tarafındaki High Contrast bu kusuru kısmen düzeltir.

iOS'ta Increase Contrast: Ayarlar ve Kontrast Türleri

iOS'ta Increase Contrast özelliği Settings > Accessibility > Display & Text Size altında bulunur ve üç bağımsız anahtar içerir: Increase Contrast (genel iyileştirme), Darken Colors (parlak renkleri koyulaştırma) ve Reduce Transparency (saydamlığı azaltma). Increase Contrast, sistem öğelerinin metnini, düğmelerini ve kenarlıklarını etkileyen ana anahtardır.

Teknik olarak, iOS Increase Contrast'ı tintColor ve UIVisualEffectView katmanı aracılığıyla uygular. Etkinleştirildiğinde, sistem koyu tonlar için alfa değerini artırır ve açık tonlar için azaltır, tüm UI öğelerinin kontrast oranını 2-3 puan yükseltir. Reduce Transparency, yarı saydam arka planları (buzlu cam efekti) opak olanlarla değiştirir, bu da bulanık arka planlarda metin okunabilirliğini daha da artırır.

iOS Uygulamasında Increase Contrast'ı Kontrol Etme

Bir geliştirici, Increase Contrast durumunu UIAccessibility aracılığıyla kontrol edebilir ve renkleri buna göre uyarlayabilir. Örneğin, kontrast artırılmışsa daha doygun vurgu renkleri kullanılabilir; değilse, varsayılan palet aracılığıyla 4.5:1 temel kontrast oranı sağlanmalıdır. UIAccessibility.isReduceTransparencyEnabled, mod etkinken bulanıklık efektlerini devre dışı bırakmak için de kullanışlıdır.

import UIKit

class ContrastManager {

    // Increase Contrast Durumunu Kontrol Etme
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Reduce Transparency'yi Kontrol Etme
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Rengi Kontrast Moduna Uyarlama
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // High Contrast Etkinken Daha Doygun Mavi
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Reduce Transparency'yi Dikkate Alan Arka Plan Rengi
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Opak Arka Plan
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Değişikliklere Abone Olma
    static func observeChanges(observer: Any, selector: Selector) {
        NotificationCenter.default.addObserver(
            observer,
            selector: selector,
            name: UIAccessibility.darkerSystemColorsStatusDidChangeNotification,
            object: nil
        )
        NotificationCenter.default.addObserver(
            observer,
            selector: selector,
            name: UIAccessibility.reduceTransparencyStatusDidChangeNotification,
            object: nil
        )
    }
}

// Kullanım Örneği: UINavigationBar
func applyContrastToNavigationBar(_ navBar: UINavigationBar) {
    if ContrastManager.isIncreaseContrastEnabled {
        navBar.isTranslucent = false
        navBar.barTintColor = ContrastManager.backgroundColor()
        navBar.titleTextAttributes = [
            .foregroundColor: UIColor.label,
            .font: UIFont.boldSystemFont(ofSize: 18)
        ]
    }
}

ContrastManager sınıfı, isDarkerSystemColorsEnabled aracılığıyla Increase Contrast durumuna erişim sağlar, mod etkinken vurgu rengini uyarlar, navigationBar saydamlığını devre dışı bırakır ve kontrast değişiklikleriyle ilgili sistem bildirimlerine abone olur. UIKit, UIAccessibility durumu değiştiğinde öğeleri otomatik olarak yeniden çizer.

Dinamik iOS Renkleri (UIColor Well) ve Kontrast

iOS, Increase Contrast moduna otomatik olarak uyum sağlayan dinamik UIColor renkleri (systemBackground, label, secondaryLabel) sağlar. Increase Contrast etkinleştirildiğinde, sistem renkleri değerlerini değiştirir: label koyulaşır (veya koyu modda açıklaşır), arka plan saydamlığını kaybeder. Geliştiricilerin, sistem kontrastıyla çakışmaları önlemek için tüm UI öğelerinde dinamik renkler kullanmaları önerilir.

Android'de High Contrast Text: Koyu Tema ve Kontrast

Android'de High Contrast Text özelliği iOS'tan farklı çalışır. Kontrast oranını kademeli olarak artırmak yerine Android, ters renk şeması uygular: koyu arka plan ve artırılmış kalınlıkta beyaz metin. Bu mod, siyahın maksimum kontrast sağladığı AMOLED ekranlarda özellikle etkilidir. Ayar, Ayarlar > Erişilebilirlik > Görünürlük iyileştirmeleri altında bulunur.

Android High Contrast Text iki mekanizma kullanır: tema kaplaması yoluyla renk paletini geçersiz kılma ve bitmap görüntülerinin kontrastını artırmak için ColorMatrix uygulama. Sistem, geçerli uygulama temasını (Açık/Koyu) analiz eder ve maksimum kontrastla bir kaplama uygular: siyah arka plan (#000000) üzerinde beyaz ön plan (#FFFFFF). Yarı saydam öğeler opak bir arka plan alır.

Android API Aracılığıyla High Contrast Text'i Kontrol Etme

Android'de High Contrast Text durumunu kontrol etmek için AccessibilityManager ve ContentResolver kullanılır. API, modun etkin olup olmadığını belirlemeye ve kullanıcı arayüzünü uyarlamaya olanak tanır. Jetpack Compose, CompositionLocalProvider ve LocalContrast aracılığıyla uyarlamayı destekler.

import android.accessibilityservice.AccessibilityService
import android.content.Context
import android.provider.Settings
import android.view.accessibility.AccessibilityManager
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

class HighContrastHelper {

    // AccessibilityManager ile Kontrol
    fun isHighContrastTextEnabled(context: Context): Boolean {
        val am = context.getSystemService(
            Context.ACCESSIBILITY_SERVICE
        ) as AccessibilityManager
        return am.isEnabled && am.getEnabledAccessibilityServiceList(
            AccessibilityService.FEEDBACK_ALL_MASK
        ).any { it.resolveInfo.serviceInfo.packageName ==
            "com.android.server.accessibility" }
    }

    // Genel Ayarlarla Kontrol
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — Kontrastı Dikkate Alan Renkler
    @Composable
    fun contrastAwareColors(): Pair<Color, Color> {
        val context = androidx.compose.ui.platform.LocalContext.current
        return if (isHighContrastTextEnabled(context)) {
            Color.White to Color.Black
        } else {
            Color.Black to Color.White
        }
    }
}

// View Sistemi: Dinamik Renk Seçici
class ContrastTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : AppCompatTextView(context, attrs) {

    private val helper = HighContrastHelper()

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        if (helper.isHighContrastTextEnabled(context)) {
            setTextColor(Color.WHITE)
            setBackgroundColor(Color.BLACK)
            setTypeface(getTypeface(), Typeface.BOLD)
        }
    }
}

HighContrastHelper sınıfı, AccessibilityManager ve sistem ayarları aracılığıyla High Contrast'ın etkin olup olmadığını kontrol eder, Jetpack Compose'da renkleri uyarlar ve View sistemi için özel bir ContrastTextView sağlar. Android'de, iOS'un aksine, High Contrast değişiklikleri için doğrudan bir Bildirim yoktur — dinamik güncellemeler için Settings.System üzerinde ContentObserver gereklidir.

Material Design 3 ve High Contrast

Material Design 3 (Material You), Dynamic Color aracılığıyla yerleşik High Contrast desteği içerir. Sistem modu etkin olduğunda, Material 3 otomatik olarak maksimum ton paletini seçer: background = Neutral0, onBackground = Neutral100, primary = Primary100. Geliştiricilerin yalnızca MD3 bileşenlerini kullanması yeterlidir — sistem kontrast uyarlamasını otomatik olarak halleder.

WCAG Kontrast Oranı: 4.5:1 ve 3:1 Standartları

WCAG kontrast oranı, metin erişilebilirliğini değerlendirmek için kullanılan iki renk arasındaki matematiksel parlaklık oranıdır. Standart iki eşik tanımlar: normal metin için 4.5:1 (AA seviyesi) ve büyük metin (18px/14px kalından) için 3:1. AAA seviyesi için normal metinde 7:1 ve büyük metinde 4.5:1 gerekir. High Contrast modu ideal olarak 7:1 ve üzerini sağlamalıdır.

Kontrast oranı hesaplaması şu formül kullanılarak yapılır: (L1 + 0.05) / (L2 + 0.05), burada L1 daha açık rengin bağıl parlaklığı ve L2 daha koyu rengin bağıl parlaklığıdır. Bağıl parlaklık, sRGB kanallarından ağırlıklarla hesaplanır: 0.2126R + 0.7152G + 0.0722B. Erişilebilirlik geliştiricileri için WebAIM Contrast Checker, Color Contrast Analyser veya Xcode'taki Accessibility Inspector gibi araçları kullanmak yeterlidir.

WCAG 2.2 Kontrast Eşiği Tablosu

Kodda Kontrast Kontrolü

Bir web uygulamasında otomatik kontrast oranı kontrolü için JavaScript kullanılabilir. High Contrast modu etkinken, AA standardını karşılamayan öğeleri vurgulamak tavsiye edilir. Aşağıda JavaScript'te bağıl parlaklık ve kontrast oranı hesaplamasına bir örnek verilmiştir.

// WCAG 2.2'ye Göre Kontrast Oranı Hesaplama
class ContrastChecker {

    // sRGB'yi Doğrusal Uzaya Dönüştürme
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Bağıl Parlaklık
    relativeLuminance(r, g, b) {
        const R = this.linearize(r)
        const G = this.linearize(g)
        const B = this.linearize(b)
        return 0.2126 * R + 0.7152 * G + 0.0722 * B
    }

    // İki Renk Arasındaki Kontrast Oranı
    getContrastRatio(hex1, hex2) {
        const rgb1 = this.hexToRgb(hex1)
        const rgb2 = this.hexToRgb(hex2)
        const L1 = this.relativeLuminance(rgb1.r, rgb1.g, rgb1.b)
        const L2 = this.relativeLuminance(rgb2.r, rgb2.g, rgb2.b)
        const lighter = Math.max(L1, L2)
        const darker = Math.min(L1, L2)
        return (lighter + 0.05) / (darker + 0.05)
    }

    hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16),
        } : null
    }

    // AA Seviyesini (4.5:1) Kontrol Etme
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // AAA Seviyesini (7:1) Kontrol Etme
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// Kullanım
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13.2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2.8:1)

JavaScript'teki ContrastChecker sınıfı, WCAG 2.2'ye göre tam kontrast oranı hesaplaması uygular: sRGB'yi doğrusal uzaya dönüştürme, Rec.709 ağırlıklarıyla bağıl parlaklık hesaplama ve AA/AAA eşikleriyle karşılaştırma. Bu araç, High Contrast desteğine sahip web uygulamaları geliştirirken otomatik renk paleti denetimi için kullanışlıdır.

Kontrast Denetim Araçları

Tamamlanmış bir uygulamada kontrast oranını kontrol etmek için Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) veya axe DevTools (web) kullanın. Bu araçlar, WCAG AA'nın altında kontrasta sahip öğeleri otomatik olarak bulur ve vurgular. Denetim sırasında High Contrast modu etkinleştirilmelidir — bu, 7:1'e ulaşmak için sistem kontrast artırımının yeterli olup olmadığını gösterecektir.

CSS prefers-contrast: Web Sayfalarını Sistem Kontrastına Uyarlama

CSS medya özelliği prefers-contrast, web sayfalarının stilleri kullanıcının sistem kontrast ayarına göre uyarlamasına olanak tanır. Özellik şu değerleri kabul eder: no-preference (varsayılan), more (kullanıcı High Contrast'ı etkinleştirdi), less (kullanıcı düşük kontrastı tercih ediyor) ve custom (ince ayar). 2022'den beri tüm modern tarayıcılar tarafından desteklenmektedir.

prefers-contrast: more — web geliştiricileri için bir sinyal: metin kontrast oranını artırın, yarı saydam arka planları opak olanlarla değiştirin, etkileşimli öğe kenarlıklarını güçlendirin ve düşük kontrastlı arka plan resimlerini kaldırın. iOS Safari ve Android Chrome, sistem High Contrast modu (Increase Contrast / High Contrast Text) etkinleştirildiğinde more değerini iletir.

prefers-contrast ile Uyarlama Örneği

prefers-contrast: more etkinken, web sayfası renk sayısını en aza indirmeli ve vurgular için aksan renkleriyle siyah-beyaz paleti tercih etmelidir. Aşağıda renk değiştirme, saydamlık kaldırma ve kenarlık güçlendirme içeren bir CSS uyarlama örneği verilmiştir.

/* Temel Stiller (no-preference) */
.card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.button {
    background: #0066CC;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
}

/* Yüksek Kontrast: more */
@media (prefers-contrast: more) {
    .card {
        background: #FFFFFF;
        border: 2px solid #000000;
        color: #000000;
        box-shadow: none;
    }

    .button {
        background: #004499;
        outline: 2px solid #000000;
        outline-offset: 2px;
    }

    .muted-text {
        color: #000000; // #666'ydı — şimdi siyah
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // 0.4'tü — artırıldı
    }
}

/* Düşük Kontrast: less */
@media (prefers-contrast: less) {
    .card {
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }
}

CSS örneğinde prefers-contrast: more altında, kart opak beyaz bir arka plan, 2px siyah kenarlık alır, metin siyah olur (#333 yerine #000) ve düğme görünürlük için siyah anahatta sahip koyu mavi olur. prefers-contrast: less (nadir bir durum — kullanıcı yumuşak renkleri tercih eder) altında, bunun yerine kontrast azaltılır.

prefers-color-scheme ile Birleştirme

Tam erişilebilirlik uyarlaması için prefers-contrast, prefers-color-scheme (açık/koyu tema) ile birleştirilir. prefers-color-scheme: dark ve prefers-contrast: more her ikisi de etkinken, renkler parlak vurgularla siyah üzerinde beyaz olmalıdır. Açık modda — beyaz üzerinde siyah. Bu medya özelliklerinin birleşimi, tam erişilebilirlik kapsamı için test edilmesi gereken 4 kombinasyon verir.