{ "@context": "https://schema.org", "@type": "Article", "@id": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui", "url": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui", "identifier": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui", "name": "Seçilen Rengin Metin Kontrastını Arayüzde Kullanmadan Önce Nasıl Kontrol Edilir", "headline": "Seçilen Rengin Metin Kontrastını Arayüzde Kullanmadan Önce Nasıl Kontrol Edilir", "description": "WCAG 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.", "inLanguage": "tr", "datePublished": "2026-08-29", "dateModified": "2026-08-29", "author": { "@type": "Person", "name": "Lubor Šimůnek" }, "publisher": { "@type": "Organization", "name": "lapnito.cz s.r.o.", "url": "https://appstoryo.com" }, "isPartOf": { "@type": "WebSite", "name": "AppStoryo", "url": "https://appstoryo.com" }, "license": "https://creativecommons.org/licenses/by/4.0/", "keywords": [ "Tasarım", "article", "AppStoryo" ], "articleSection": "Tasarım", "image": "https://appstoryo.com/upload/blog/check-text-contrast-picked-color-ui-hero.jpg", "encoding": [ { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui.pdf", "encodingFormat": "application/pdf" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui.md", "encodingFormat": "text/markdown" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui.txt", "encodingFormat": "text/plain" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui.json", "encodingFormat": "application/json" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui.epub", "encodingFormat": "application/epub+zip" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui.jats.xml", "encodingFormat": "application/xml" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui.bib", "encodingFormat": "application/x-bibtex" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui.ris", "encodingFormat": "application/x-research-info-systems" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui.csl.json", "encodingFormat": "application/vnd.citationstyles.csl+json" } ], "cite": "Lubor Šimůnek (2026). Seçilen Rengin Metin Kontrastını Arayüzde Kullanmadan Önce Nasıl Kontrol Edilir. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/tr/blog/check-text-contrast-picked-color-ui", "sections": [ { "level": 2, "heading": "Kontrast Neden Önemlidir", "text": "Dü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:\n\n- 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ı.\n- AAA Düzeyi: Normal metin için 7:1." }, { "level": 2, "heading": "Yaygın Hatalar", "text": "En 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." }, { "level": 2, "heading": "Pratik İş Akışı", "text": "1. Arka plan rengini alın. Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)'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.\n2. Metin rengini aynı şekilde alın.\n3. İkiliyi bir kontrast denetleyicisinde kontrol edin — WebAIM Contrast Checker, DevTools'daki Erişilebilirlik paneli veya Figma'daki Contrast eklentisi gibi.\n4. 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." }, { "level": 2, "heading": "HSL Neden Kontrast Ayarı İçin İdealdir", "text": "RGB ve HEX, parlaklık üzerinde sezgisel kontrol sağlamaz. HSL, ton, doygunluk ve parlaklığı birbirinden ayırır. Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker), HEX, RGB, HSL ve CMYK'yı aynı anda gösterir — manuel dönüştürme gerekmez." }, { "level": 2, "heading": "Gerçek Dünya Örneği", "text": "Beyaz 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." }, { "level": 2, "heading": "WCAG 3.0 ve APCA Hakkında Not", "text": "Yeni 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.\n\nColor Picker Camera: HEX RGB uygulamasını iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) veya Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) için ücretsiz indirin — reklamsız, izlemesiz ve tamamen çevrimdışı çalışır." } ], "text": "Kontrast Neden Önemlidir\n\nDü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:\n\n- 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ı.\n- AAA Düzeyi: Normal metin için 7:1.\n\nYaygın Hatalar\n\nEn 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.\n\nPratik İş Akışı\n\n1. Arka plan rengini alın. Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)'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.\n2. Metin rengini aynı şekilde alın.\n3. İkiliyi bir kontrast denetleyicisinde kontrol edin — WebAIM Contrast Checker, DevTools'daki Erişilebilirlik paneli veya Figma'daki Contrast eklentisi gibi.\n4. 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.\n\nHSL Neden Kontrast Ayarı İçin İdealdir\n\nRGB ve HEX, parlaklık üzerinde sezgisel kontrol sağlamaz. HSL, ton, doygunluk ve parlaklığı birbirinden ayırır. Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker), HEX, RGB, HSL ve CMYK'yı aynı anda gösterir — manuel dönüştürme gerekmez.\n\nGerçek Dünya Örneği\n\nBeyaz 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.\n\nWCAG 3.0 ve APCA Hakkında Not\n\nYeni 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.\n\nColor Picker Camera: HEX RGB uygulamasını iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) veya Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) için ücretsiz indirin — reklamsız, izlemesiz ve tamamen çevrimdışı çalışır.", "markdown": "## Kontrast Neden Önemlidir\n\nDü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:\n\n- **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ı.\n- **AAA Düzeyi**: Normal metin için 7:1.\n\n## Yaygın Hatalar\n\nEn 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.\n\n## Pratik İş Akışı\n\n1. **Arka plan rengini alın.** [Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)'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.\n2. **Metin rengini** aynı şekilde alın.\n3. **İkiliyi bir kontrast denetleyicisinde kontrol edin** — WebAIM Contrast Checker, DevTools'daki Erişilebilirlik paneli veya Figma'daki Contrast eklentisi gibi.\n4. **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.\n\n## HSL Neden Kontrast Ayarı İçin İdealdir\n\nRGB ve HEX, parlaklık üzerinde sezgisel kontrol sağlamaz. HSL, ton, doygunluk ve parlaklığı birbirinden ayırır. [Color Picker Camera: HEX RGB](https://play.google.com/store/apps/details?id=com.tomas.color_picker), HEX, RGB, HSL ve CMYK'yı aynı anda gösterir — manuel dönüştürme gerekmez.\n\n## Gerçek Dünya Örneği\n\nBeyaz 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.\n\n## WCAG 3.0 ve APCA Hakkında Not\n\nYeni 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.\n\n**Color Picker Camera: HEX RGB uygulamasını [iOS](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) veya [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker) için ücretsiz indirin** — reklamsız, izlemesiz ve tamamen çevrimdışı çalışır.", "html": "

Kontrast Neden Önemlidir

Dü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:

Yaygın Hatalar

En 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ışı

  1. 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.
  2. Metin rengini aynı şekilde alın.
  3. İkiliyi bir kontrast denetleyicisinde kontrol edin — WebAIM Contrast Checker, DevTools'daki Erişilebilirlik paneli veya Figma'daki Contrast eklentisi gibi.
  4. 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 İdealdir

RGB 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ği

Beyaz 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 Not

Yeni 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.

" }