WCAG kontrast oranı palet tasarımı, erişilebilirlik uyumunu görsel tasarımın başından entegre etmenin sistematik yoludur. Renk seçimini erişilebilirlik kısıtları içinde tutarken estetik esnekliği korumak, kontrastı doğru hesaplamakla başlar. WCAG 2.1 AA standardı şu minimum oranları tanımlar: - Normal metin (< 18pt veya 14pt kalın): **4.5:1 kontrast oranı** - Büyük metin (≥ 18pt normal veya ≥ 14pt kalın): **3:1 kontrast oranı** - UI bileşenleri ve grafik öğeler: **3:1 kontrast oranı** AAA seviyesi (daha katı): - Normal metin: 7:1 - Büyük metin: 4.5:1 Kontrast oranı hesaplaması göreli parlaklık (relative luminance) üzerine kuruludur: L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin Burada R_lin, G_lin, B_lin linearize edilmiş kanal değerleridir: sRGB değeri ≤ 0.04045 → c_lin = c_sRGB / 12.92 sRGB değeri > 0.04045 → c_lin = ((c_sRGB + 0.055) / 1.055)^2.4 Kontrast oranı: CR = (L1 + 0.05) / (L2 + 0.05), L1 daha aydınlık renktir. WCAG kontrast oranı palet üretiminin pratik yaklaşımı: **1. Ton (hue) seçimi önce, parlaklık ayarı sonra:** İstenilen renge sahip palet için tonlar belirlenir; ardından her tonun HSL parlaklık (L) değeri kontrast sağlayacak seviyeye ayarlanır. Bu süreç iteratif olup araçlar olmadan verimsizdir. **2. Araç destekli yaklaşım:** Tanaguru Contrast Finder, Colour Contrast Analyser veya Figma'nın kontrast eklentileri anlık kontrol sağlar. Figma'da WCAG kontrast kontrol doğrudan "Inspect" panelinde görünür. **3. Sistem rengi token mimarisi:** Her renk token'ı için "AA uyumlu arka plan renkleri" tablosu oluşturulur. Örneğin Primary-600 tonu beyaz (#fff) arka plan üzerinde AA sağlıyor ama Primary-400 sağlamıyorsa, bu ayrım token dokümantasyonuna eklenir. **4. Dark mode bağlamı:** Dark modda açık metin koyu arka plan üzerinde çalışır; her iki paleti ayrı ayrı doğrulama zorunluluğu ortadan kalkmaz. Tek palet her iki temada kullanılmak üzere tasarlanırken, semantic token sisteminin "on-primary", "on-background" gibi amaç bazlı katmanı bu karmaşıklığı yönetir. En sık yapılan hata: placeholder metin, devre dışı UI durumları ve ikincil etiketler için kontrast kurallarının göz ardı edilmesidir. "Devre dışı" bileşenler için WCAG muafiyet tanısa da en iyi uygulama bu öğelerde de 3:1 hedeflenmesidir.