Ücretsiz Erişilebilirlik aracı

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.

Kontrast hesaplayıcı

Bir metin rengi ve bir arka plan rengi girin. Her şey tarayıcınızda hesaplanır.

16 piksel normal metin böyle görünür.

24 piksel büyük metin

Bir düğme çerçevesi

Kontrast oranı4.54:1

Bu renkler için WCAG 2.2 sonuçları
Normal metin, AAWCAG 1.4.3, gereken 4.5:1Geçti
Büyük metin, AAWCAG 1.4.3, gereken 3:1Geçti
Normal metin, AAAWCAG 1.4.6, gereken 7:1Kaldı
Büyük metin, AAAWCAG 1.4.6, gereken 4.5:1Geçti
Simgeler, kenarlıklar ve form alanlarıWCAG 1.4.11, gereken 3:1Geçti

Bu arka planda geçen en yakın metin renkleri

Büyük metin en az 24 piksel ya da kalın yazıda 18,66 piksel demektir. Oranlar aşağı yuvarlanır; bu yüzden 4.499:1 oranı 4.49:1 olarak gösterilir ve WCAG’nin amaçladığı gibi kalır.

Ya da düşük kontrastlı metinler için bir sayfayı tarayın

Ücretsiz. Girdiğiniz adresi yaklaşık 20 saniyede kontrol eder.

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.

Düşük renk kontrastı: neden önemli ve Shopify’da, WooCommerce’te ve her sitede nasıl düzeltilir

Bu araçla ilgili 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

İlgili araçlar

Erişilebilirlik Düzeltme Raporu ($174, tek seferlik) ücretsiz taramanın tamamından yola çıkar ve buna daha fazla sayfa, her bulgu için yapılacak değişiklik, bir PDF ve düzeltmelerinizi doğrulamak için yeniden testler ekler.

Erişilebilirlik Düzeltme Raporu hakkında