appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/trSeçilen Rengin Metin Kontrastını Arayüzde Kullanmadan Önce Nasıl Kontrol EdilirLubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0WCAG kontrast oranını nasıl kontrol edeceğinizi ve arayüzünüzün her zaman erişilebilir ve okunabilir olması için renkleri HSL'de nasıl ayarlayacağınızı öğrenin.
TasarımarticleAppStoryoKontrast Neden ÖnemlidirDünya genelinde yaklaşık 300 milyon kişi bir tür renk görme bozukluğuna sahiptir. İyi kontrastla tasarlamak yalnızca estetik bir tercih değil — birçok bölgede yasal bir gerekliliktir. Referans standart, iki ana düzeyi tanımlayan WCAG 2.1'dir:
AA Düzeyi: Normal metin için 4,5:1 ve büyük metin (18px veya 14px kalın) için 3:1 kontrast oranı.
AAA Düzeyi: Normal metin için 7:1.
Yaygın HatalarEn sık karşılaşılanlar: beyaz üzerine açık gri (1,5:1 kadar düşük olabilir), görsel olarak okunabilir gibi görünen ancak AA'yı geçemeyen renkli düğmelerdeki beyaz metin ve açık modda geçip karanlık modda başarısız olan renkler.
Pratik İş AkışıArka plan rengini alın. Color Picker Camera: HEX RGB'yi açın, kamerayı yüzeye yöneltin ve tek dokunuşla HEX değerini alın. Uygulama aynı anda HSL'yi de gösterir.
Metin rengini aynı şekilde alın.
İkiliyi bir kontrast denetleyicisinde kontrol edin — WebAIM Contrast Checker, DevTools'daki Erişilebilirlik paneli veya Figma'daki Contrast eklentisi gibi.
Oran geçene kadar HSL'de parlaklığı ayarlayın. H ve S'yi koruyarak L'yi düşürün; rengin görsel kimliğini değiştirmeden onu karartın.
HSL Neden Kontrast Ayarı İçin İdealdirRGB ve HEX, parlaklık üzerinde sezgisel kontrol sağlamaz. HSL, ton, doygunluk ve parlaklığı birbirinden ayırır. Color Picker Camera: HEX RGB, HEX, RGB, HSL ve CMYK'yı aynı anda gösterir — manuel dönüştürme gerekmez.
Gerçek Dünya ÖrneğiBeyaz metinli orta mavi (#4A90E2) düğmenin kontrastı yaklaşık 3,1:1'dir — AA'yı geçmez. Koyu lacivert (#1A3A6B)'e geçildiğinde oran 9,4:1'e yükselir ve AAA'yı bile aşar.
WCAG 3.0 ve APCA Hakkında NotYeni nesil yönergeler, daha nüanslı bir algısal kontrast modeli olan APCA'yı tanıtmaktadır. WCAG 2.1 AA şu an için geçerli standart olmaya devam etmektedir, ancak uzun vadeli projeler için APCA'ya karşı test yapmak değerlidir.
Color Picker Camera: HEX RGB uygulamasını iOS veya Android için ücretsiz indirin — reklamsız, izlemesiz ve tamamen çevrimdışı çalışır.