# Renk Kontrastı Kontrol Aracı Bir metin rengini bir arka plan rengiyle burada WCAG 2.2’ye göre karşılaştırın ya da bir sayfa adresi girerek kontrast alt sınırının altındaki her metni, ölçülen renkleri ve geçen en yakın renkle birlikte bulun. ## Bu araç neleri kontrol eder - Herhangi iki rengin WCAG oranı: Hesaplayıcı, WCAG 2.2 tanımlarındaki bağıl parlaklık formülünü kullanır ve normal metin, büyük metin ve arayüz parçaları için AA ve AAA sonucunu gösterir. Tarayıcınızda çalışır. - Geçen bir renk, hesaplanmış olarak: Bir çift kaldığında, aynı tonda 4.5:1 veya 7:1 oranına ulaşan en yakın metin rengini bulur; böylece tasarımınızı olabildiğince az değiştirirsiniz. - Bir sayfadaki düşük kontrastlı her metin: Sayfa taraması, axe-core’un color-contrast kuralını gerçek bir Chrome tarayıcısında çalıştırır ve kalan her öğeyi metin rengi, arka plan rengi, yazı boyutu ve oranıyla listeler. - Renk çiftine göre gruplanmış: Sonuçlar metin ve arka plan rengine göre gruplanır; çünkü bir tema rengindeki tek değişiklik genellikle o rengi kullanan her öğeyi düzeltir. - Büyük metin için doğru eşik: En az 24 piksel ya da kalın yazıda 18,66 piksel olan metin için 4.5:1 yerine 3:1 gerekir. Tarama, her öğeye hesaplanan boyut ve kalınlığına göre doğru eşiği uygular. - Ölçemediği metinler ve nedenleri: Görsellerin, renk geçişlerinin veya üst üste binen öğelerin üzerindeki metinler nedeniyle birlikte ayrıca listelenir; böylece neyi gözle kontrol edeceğinizi bilirsiniz. ## Neleri kontrol edemez - Fotoğrafların, renk geçişlerinin veya videoların üzerindeki metni ölçmek. Yazılım her harfin arkasında görselin hangi kısmının olduğunu bilemez; bu metinler kontrol etmeniz için listelenir. - Üzerine gelme, odak veya diğer durumları kontrol etmek. Tarama sayfayı yüklendiği haliyle görür; bu renkleri hesaplayıcıyla kontrol edin. - Sayfadaki simgeleri, kenarlıkları ve form alanlarını WCAG 1.4.11’e göre taramak. Hesaplayıcı, girdiğiniz her çift için 3:1 sonucunu gösterir. - Bir görselin parçası olan metni okumak, örneğin yazıları görsele gömülü bir banner. - Girdiğiniz sayfadan fazlasını test etmek. Tam ücretsiz tarama en fazla beş önemli sayfayı test eder. ## Neden önemli Düşük kontrast, web’deki en yaygın erişilebilirlik hatasıdır. WebAIM’in en çok ziyaret edilen bir milyon ana sayfayı inceleyen 2026 analizi, bu sayfaların %83,9’unda düşük kontrastlı metin buldu; sayfa başına ortalama 34 örnek. Soluk metin, az gören veya renk görme farklılığı olan kişiler için, güneş altında telefon kullanan herkes için okunması zor bir metindir. WCAG 2.2’nin AA düzeyindeki 1.4.3 başarı ölçütü, alt sınırı normal metin için 4.5:1, büyük metin için 3:1 olarak belirler. Ayrıca düzeltmesi en ucuz sorunlardan biridir: çoğu sitede hataların neredeyse tamamına birkaç tema rengi neden olur ve bunları değiştirmek tüm sayfaları birden düzeltir. ## Sonuçlar nasıl okunur - Kontrast oranı: 1:1’den (aynı renk iki kez) 21:1’e (beyaz üzerinde siyah) kadar. Oranlar aşağı yuvarlanır; 4.49:1 gösteren bir çift 4.5:1 alt sınırını geçemez. - Normal metin, AA (4.5:1): WCAG 1.4.3’e göre gövde metni, bağlantılar, etiketler ve düğme metinleri için alt sınır. - Büyük metin, AA (3:1): En az 24 piksel ya da kalın yazıda 18,66 piksel olan metin için. WCAG büyük metni 18 punto, kalın yazıda 14 punto olarak tanımlar. - AAA (7:1 ve 4.5:1): WCAG 1.4.6’daki geliştirilmiş düzey. AA uyumu için gerekmez ama daha fazla okuyucuya yardımcı olur. - Simgeler, kenarlıklar ve form alanları (3:1): WCAG 1.4.11, kontrollerin ve grafiklerin kullanılmak için görülmesi gereken parçalarında komşu renklere karşı 3:1 ister. - Kalan metin: Taramanın eşiğinin altında ölçtüğü her öğe; seçicisi, renkleri, boyutu ve oranıyla. İşaretlemesini ve varsa ekran görüntüsünü görmek için birini açın. - Gözle kontrol edilecek: axe-core’un ölçemediği metinler ve nedeni; örneğin arkasında bir görsel veya renk geçişi olması. ## En yaygın sorunlar nasıl düzeltilir - Beyaz üzerinde gri metin: #767676, beyaz üzerinde 4.5:1’e ulaşan neredeyse en açık gridir (4.54:1). #999999 (2.84:1) gibi daha açık griler altbilgilerde, resim altı yazılarında, yer tutucularda ve fiyatlarda sık görülen bir hata nedenidir. - Marka renkli düğmede beyaz metin: Marka renginizin üzerindeki beyaz metin kalıyorsa düğme arka planını birkaç ton koyulaştırın veya koyu metin kullanın. Üzerine gelme ve odak renklerini de kontrol edin; bunlar genellikle daha açıktır. - Formlardaki yer tutucu metinler: Yer tutucu metin de metindir ve 4.5:1 gerektirir. Daha iyisi, yer tutucunun tek talimat olmaması için alanın üstünde görünür bir etiket kullanmaktır. - Görsellerin ve slaytların üzerindeki metin: Metni düz veya yarı saydam bir zeminin üzerine koyun ya da görsele koyu bir katman ekleyin, ardından görselin metnin arkasında kalan en açık kısmını kontrol edin. - İndirim rozetleri ve küçük yazılar: Devre dışı kontrollerdeki metin 1.4.3’ten muaftır ama indirim rozetleri, fiyatlar ve yasal küçük yazılar muaf değildir. Bunlar çoğu zaman bir mağazanın en soluk metinleridir. ## Sık sorulan sorular ### WCAG hangi kontrast oranını ister? AA düzeyi için normal metinde 4.5:1, büyük metinde 3:1 (1.4.3 başarı ölçütü) ve arayüz bileşenleri ile anlam taşıyan grafikler için 3:1 (1.4.11). AAA düzeyi 7:1 ve 4.5:1 ister (1.4.6). ### Büyük metin ne demek? WCAG büyük ölçekli metni en az 18 punto ya da kalın yazıda 14 punto olarak tanımlar. CSS pikseliyle bu yaklaşık 24px, kalın yazıda 18,66px demektir. ### Logoların kontrast alt sınırını karşılaması gerekir mi? Hayır. WCAG 1.4.3, logoları ve bir logo ya da marka adının parçası olan metni, tamamen dekoratif metni ve etkin olmayan kontrollerdeki metni muaf tutar. ### Tarama bir görselin üzerindeki metni neden kontrol için listeliyor? axe-core düz renkleri ölçer. Metnin arkasında bir görsel, renk geçişi veya başka bir öğe olduğunda hangi renklerin buluştuğunu bilemez; bu yüzden tahmin etmek yerine öğeyi bir insanın kontrol etmesi için bildirir. ### AAA kontrast gerekli mi? AAA, AA uyumu için gerekmez ve W3C bütün siteler için AAA şartı koymayı önermez. Tasarımınız izin veriyorsa gövde metninde 7:1’e ulaşmak yine de iyi bir uygulamadır. ### APCA, WCAG’nin bir parçası mı? Hayır. APCA, hâlâ taslak olan WCAG 3 için tartışılmış farklı bir kontrast yöntemidir. Bugün uyum, bu aracın hesapladığı WCAG 2 oranıyla ölçülür. ## Kaynaklar - [W3C: WCAG 2.2 başarı ölçütü 1.4.3 Kontrast (Minimum) açıklaması](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: Başarı ölçütü 1.4.6 Kontrast (Geliştirilmiş) açıklaması](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: Başarı ölçütü 1.4.11 Metin Dışı Kontrast açıklaması](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: WCAG 2.2’de bağıl parlaklık tanımı](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: axe-core color-contrast kuralı](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)