Erişilebilirlik İçin Çevrimiçi Ücretsiz Metin Kontrastı Nasıl Kontrol Edilir (2026 Rehberi)

Güzel renk çifti, okunamaz metin. Bu, webdeki en yaygın tasarım başarısızlıklarından biridir — beyaz arka plan üzerinde açık gri metin, beyaz harfli modern pastel düğme — ve gerçek insanları dışarıda bırakır: görme gücü zayıf kullanıcılar, renk körlüğü olanlar veya parlak güneşte telefon ekranı olan herkes. Çözüm ölçülebilir, zevk meselesi değildir. Bu rehber WCAG kontrast kurallarını anlatır, size bizim ücretsiz Kontrast Denetleyici aracımızla herhangi bir renk çiftini nasıl test edeceğinizi gösterir ve başarısız kombinasyonları düzeltmenin somut yollarını verir.

Ücretsiz Kontrast Denetleyici ne yapar

Kontrast Denetleyici iki renk alır — metin renginiz ve arka plan renginiz — ve onların kontrast oranını hesaplar, sonra çiftin WCAG erişilebilirlik standartlarını karşılayıp karşılamadığını söyler. Tamamen tarayıcınızda çalışır: kayıt yok, kurulum yok, anında sonuçlar.

WCAG kontrast kuralları (gerçek sayılar)

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), kontrast gereksinimlerini oranlar olarak tanımlar; 1:1 hiç kontrast olmaması (aynı renkler) ve 21:1 en yüksek (beyaz üzerinde siyah) anlamına gelir. Önemli olan sınırlar:

• 4.5:1 — normal metin (WCAG AA). Gövde metni, paragraflar, liste öğeleri ve arayüz etiketleri arka planlarına göre en az 4.5:1'e ulaşmalıdır. Erişilebilir metnin temelidir.
• 3:1 — büyük metin (WCAG AA). En az 18pt (24px) olan veya 14pt (18,66px) kalın olan metin yalnızca 3:1 ister — büyük harfler doğal olarak okunması daha kolaydır.
• 7:1 — normal metin (WCAG AAA). Daha katı, daha iyi düzey. Yapabildiğinizde önemli içerik için bunu hedefleyin.
• 3:1 — arayüz bileşenleri. Simgeler, form kenarlıkları ve odak göstergelerinin çevre renklerine göre en az 3:1'e ihtiyacı vardır; böylece kullanıcılar etkileşimli öğeleri anlayabilir.

Bu kuralların kapsamadığına dikkat edin: bunlar açıklık-karanlık (parlaklık) kontrastını ölçer, renk farkını değil. Yeşil arka plan üzerinde kırmızı metin sayılara göre yüksek kontrastlı olabilir ama yine de kırmızı-yeşil renk körlüğü olan kullanıcılar için okunamaz — bu yüzden anlamı iletmek için asla yalnızca renge güvenmemelisiniz.

Adım adım: renk çiftinizi test edin

1. Kontrast Denetleyici aracını açın. Kayıt yok, herhangi bir modern tarayıcıda çalışır.
2. Metin (ön plan) renginizi girin. Tasarımınızdan gerçek metin renginin HEX veya RGB kodunu kullanın.
3. Arka plan renginizi girin. Metnin oturduğu gerçek arka planı kullanın — üç katman aşağıdaki sayfa arka planı değil, metnin arkasındaki doğrudan arka plan.
4. Oranı ve kararı okuyun. Araç hesaplanmış kontrast oranını ve çiftin normal metin için AA, büyük metin için AA ve AAA'yı geçip geçmediğini gösterir.
5. Her gerçek kombinasyonu test edin. Sayfa arka planı üzerinde gövde metni, düğme rengi üzerinde düğme metni, arka plan üzerinde bağlantı rengi, girdilerde yer tutucu metin — her çift kendi kontrolünü ister.
6. Başarısızlıkları düzeltin (aşağıya bakın) ve çift geçene kadar yeniden test edin.

Başarısız bir kombinasyon nasıl düzeltilir

Başarısız bir çift, paletinizi bırakmak anlamına gelmez. Küçük, hedefli ayarlamalar genellikle onu düzeltir:

• Metni koyulaştırın veya arka planı açın. En güvenilir çözüm. Bir adım koyu/açık olmak genellikle tasarımın karakterini değiştirmeden 4.5:1 çizgisini geçer. Ayarlanmış tonu bulmak için Renk Seçici aracını kullanın.
• Yazı tipi ağırlığını veya boyutunu artırın. Kalın metin veya büyük başlıklar daha kolay 3:1 büyük metin sınırına hak kazanır. Bu bir hile değil, meşru bir stratejidir — büyük, kalın metin gerçekten daha okunabilirdir.
• Destekleyici bir şekil ekleyin. Görsel üzerindeki beyaz metin başarısız mı oluyor? Önce onu yarı saydam koyu bir katmanın üzerine koyun, sonra metni katman rengine karşı kontrol edin.
• Hangi rengin metin olduğunu değiştirin. Bazen çift tersine işler — üzerinde açık metin yerine açık marka rengi üzerinde koyu metin.
• Düşük kontrastlı çiftleri yalnızca süsleme için saklayın. Büyük süsleyici başlıklar, devre dışı durumlar ve filigranlar yumuşak kombinasyonlar kullanabilir — okunmalarına bağlı hiçbir önemli bilgi olmadığı sürece.

Yaygın şüpheliler: neredeyse her zaman başarısız olan kombinasyonlar

• Beyaz üzerinde açık gri metin (#999 ve daha açık) — klasik suçlu, özellikle ikincil metin ve yer tutucularda.
• Pasteller üzerinde beyaz metin — beyaz etiketli açık pembe, gök mavisi veya nane düğmeler rutin olarak 4.5:1'in altına düşer.
• Marka rengi arka planı üzerinde marka rengi metin — birlikte oturmak için tasarlanmış iki marka rengi genellikle metnin ihtiyaç duyduğu parlaklık farkına sahip değildir.
• Görseller üzerinde metin — görselin parlaklığı alanı boyunca değişir; bu yüzden koyu kısımda iyi olan metin aydınlık kısımda başarısız olur. Katmanlar veya metin gölgeleri standart çözümlerdir.
• Form alanlarında yer tutucu metin — tarayıcılar yer tutucuları varsayılan olarak soluk griyle işler; onları bilinçli olarak geçen bir renkle biçimlendirin.

Kontrast gerekli ama yeterli değil

Oran kontrolünden geçmek temeldir, tavan değil. Gerçek erişilebilirlik aynı zamanda şu anlama gelir: yeterli yazı tipi boyutu, satırları birbirine bastırmayan satır aralığı, anlamı asla yalnızca renkle iletmemek (o kırmızı/yeşil durumu bir simge veya etiketle eşleştirin), klavye kullanıcıları için görünür odak göstergeleri ve renge bağlı anlamı yakalamak için tasarımınızı gri tonlamada test etmek. Kontrast denetleyici ölçülebilir kısmı saniyeler içinde halleder; gerisi tasarım disiplinidir.

Kontrast kontrolünü iş akışınıza ekleyin

1. Renk Seçici aracından marka renklerini seçin veya Rastgele Renk Paleti aracıyla fikirler üretin.
2. Herhangi bir metin/arka plan çiftini kesinleştirmeden önce onu Kontrast Denetleyici aracından geçirin.
3. Bir çift başarısız olursa seçiciyle ayarlayın ve yeniden kontrol edin — çift başına iki dakika.
4. Gerektiği gibi HEX'ten RGB'ye Dönüştürücü aracıyla biçimleri dönüştürün (örneğin RGBA katmanları oluşturmak için).
5. Herhangi bir yeniden tasarımdan sonra yeniden kontrol edin — renkteki “küçük” bir değişiklik sessizce geçen bir oranı bozabilir.

Sık sorulan sorular

Kontrast Denetleyici ücretsiz mi?

Evet — sınırsız WCAG kontrast kontrolü, kayıt yok.

Gövde metnimin hangi kontrast oranına ihtiyacı var?

WCAG AA için arka planınıza göre en az 4.5:1; yaygın olarak benimsenen temel. 7:1 daha katı AAA düzeyini karşılar.

Başlıkların farklı gereksinimleri var mı?

Büyük metin — 18pt/24px ve üzeri veya 14pt/18,66px kalın ve üzeri — AA düzeyinde yalnızca 3:1 ister.

Çiftim denetleyiciden geçiyor ama yine de okunması zor görünüyor — neden?

Oran yalnızca parlaklık kontrastını ölçer. İnce yazı tipleri, küçük boyutlar, yoğun arka planlar ve renk görme farkları, hepsi sayıdan öte gerçek okunabilirliği etkiler. 4.5:1'i en az olarak görün, hedef olarak değil.

Denetleyici renk körlüğünü hesaba katar mı?

Parlaklık kontrastını ölçer; bu, renk körlüğünden bağımsızdır — yararlı bir özellik. Ama anlamı iletmek için asla yalnızca renk kullanmayın; onu metin, simgeler veya desenlerle eşleştirin.

Şimdi renklerinizi kontrol edin: Ücretsiz Kontrast Denetleyici · Ücretsiz Renk Seçici · Ücretsiz HEX'ten RGB'ye Dönüştürücü