Kontrast Denetleyici — WCAG Renk Kontrastı
Metin ve arka plan renkleri arasındaki kontrast oranını WCAG AA/AAA'ya göre kontrol edin, sonucu anında görün.
Pijamalı hasta yağız şoföre çabucak güvendi.
Pijamalı hasta yağız şoföre çabucak güvendi.
Yerelde hesaplanır
Duyurulmamış markalar için güvenli
Hesap yok
Güvenli bağlantı
Nasıl çalışır
- 1
Metin rengini belirleyin
Ön planın HEX kodunu yapıştırın ya da renk kutusundan seçin.
- 2
Arka plan rengini belirleyin
Metnin arkasında ne varsa onun için aynısını yapın — varsayılan beyaz değil, gerçek arka plan.
- 3
Sonucu okuyun
Oran ve her WCAG düzeyi için geçti/kaldı birlikte görünür, canlı örnek metinle birlikte.
Neden bu araç
Görüş değil, sayı
Kontrast 1:1 ile 21:1 arasında ölçülebilir bir orandır. Araç bunu hesaplar, böylece “bana iyi göründü” belirleyici argüman olmaktan çıkar.
Tüm eşikler bir arada
AA ve AAA, normal ve büyük metin için birlikte değerlendirilir — bir çiftin hangi kullanımda güvenli olduğunu anında görürsünüz.
Canlı önizleme
Sınadığınız çiftle gerçek metin çizilir; sayı ile görünüm yan yana denetlenir.
Aracın içinde düzeltin
İki renkten birini ayarlayın, oran anında güncellensin; tahmin etmek yerine geçen en yakın tonu bulun.
Hiçbir şey yüklenmez
Hesap tarayıcınızda yapılan bir aritmetiktir — hiçbir renk değeri hiçbir yere gönderilmez.
Hesapsız ve ücretsiz
Kayıt yok, sınır yok, hiçbir şeye basılan filigran yok.
Kontrast oranı aslında neyi ölçer
Oran, iki rengin bağıl parlaklığını karşılaştırır — her birinin ne kadar ışık yansıttığını ya da yaydığını, insan görüşünün kırmızıya, yeşile ve maviye duyarlılığına göre ağırlıklandırarak. 1:1’den, yani iki rengin özdeş olduğu ve metnin görünmez kaldığı noktadan, saf beyaz üzerine saf siyah olan 21:1’e kadar uzanır. Kritik nokta şu: açıklık farkını ölçer, ton farkını değil. Benzer açıklıkta doygun bir kırmızı ile doygun bir yeşil 1:1’e yakın durur ve birlikte neredeyse okunmaz; oysa tipik renk görüşü olan birine azami derecede farklı görünürler. “Bu iki renk güçlü kontrast yapıyor” yargısının güvenilmez olmasının ve formülün var olmasının sebebi budur.
Eşikler ve size hangisi uyar
WCAG iki uygunluk düzeyi tanımlar. Çoğu kurumun ve çoğu yasal gerekliliğin hedeflediği AA düzeyi, normal gövde metni için 4,5:1, büyük metin için 3:1 ister — büyük demek 18 punto ya da kalınsa 14 punto. AAA düzeyi bunları 7:1 ve 4,5:1’e çıkarır; bir dokümantasyon sitesinin gövde metni için gerçekçidir, marka ağırlıklı bir pazarlama sayfası için genelde değildir. İnsanları iki şey yanıltır. Birincisi, büyük metin muafiyeti öyle cömerttir ki bir başlık geçerken altındaki paragraf aynı renkte kalabilir. İkincisi, arayüz bileşenlerinin ve anlam taşıyan grafiklerin — bir form kenarlığı, bilgi ileten bir simge — kendi 3:1 gereksinimi vardır ve yalnızca metni denetlemek bunu tümüyle kaçırır.
Marka renkleri bu sınavda neden bu kadar sık kalıyor
Marka paletleri, 16 pikselde okunaklılık için değil, büyük yüzeylerde karakter için seçilir. Genelde orta tonlar kurban olur: bir düğme dolgusu olarak kendinden emin görünen marka turuncusu, turkuazı ya da limon yeşili beyaza karşı çoğunlukla 2:1 ile 3:1 arasına düşer ve hiçbir eşiği geçmez. İçgüdü sayıyla tartışmaktır, sayı ise kımıldamaz. Verimli tepki, marka rengini işe yaradığı yerde tutmak — dolgular, kenarlıklar, büyük başlık tipografisi — ve gövde metni için HSL’de açıklığı düşürerek oran geçene kadar daha koyu bir varyant türetmektir; renk dönüştürücü bunu iki adımlık bir işe indirger. Böylece ton kimliği bozulmadan metin okunur hâle gelir.
Gri metin, web’deki en yaygın başarısızlık
Beyaz üzerine açık gri gövde metni bir tasarım geleneği hâline geldi, çünkü iyi bir monitörde aydınlık bir odada sakin ve pahalı görünüyor. Ölçüldüğünde, beyaz üzerine `#999999` yaklaşık 2,8:1’dir ve AA’da doğrudan kalır; `#767676` kabaca 4,5:1’dir ve normal metin için geçen en açık gridir. Bu iki hex kodu arasındaki fark bir tasarım incelemesinde görünmez, gün ışığında telefonuna bakan ya da görüşü biraz azalmış bir okuyucu için ise belirleyicidir. Bir maket hiyerarşiyi gri metinle kuruyorsa çözüm genelde açıklık değil, boyut ve kalınlıktır — daha küçük, daha ince çizgili koyu bir gri, eşiğin altına düşmeden ikincil okunur.
Oranın size söylemediği şeyler
4,5:1’i geçmek bir tabandır, iyi tipografinin güvencesi değil. Formül, büyük metin eşiği dışında yazı boyutunu yok sayar; çizgi kalınlığını yok sayar — 4,6:1’de saç teli inceliğinde bir yazı tipi, aynı orandaki orta kalınlıktan daha zor okunur — ve renk eşleşmesinin kendisini yok sayar. Yeşil üzerine kırmızı metin, açıklık yeterince farklıysa rahatça geçer ve kırmızı-yeşil renk körlüğü olan yaklaşık her on iki erkekten biri için yine kötü bir tercihtir; çünkü tasarımın geri kalanının dayandığı ton ayrımını kaybederler. Kontrast gereklidir ama yeterli değildir: önce geçin, sonra tipografiye bakın.
Görsel ve renk geçişi üzerindeki metni denetlemek
Formül iki düz renk alır; bir fotoğrafın ya da bir renk geçişinin üzerine konan metnin tek bir arka planı yoktur — her harfin arkasında farklı bir arka plan vardır. Pratik yaklaşım, metnin gerçekten geçtiği en açık ve en koyu noktaya karşı sınamaktır; ikisinden biri kalıyorsa çözüm farklı bir metin rengi değil, düzenin kendisidir. Alışılmış çareler görselle metin arasına yarı saydam bir katman koymak, metin bloğunun arkasına düz bir panel yerleştirmek ya da metne gölge vermektir — hepsi de ölçebileceğiniz, denetlenebilir bir arka plan yaratır. Yalnızca görselin ortalama parlaklığına karşı denetlemek, gökyüzünün parlak bir noktasında kaybolan başlıkları üreten şeydir.
Kaçınılması gereken yaygın hatalar
- Kontrastı iyi bir monitörde, aydınlık bir odada gözle değerlendirmek. Bu, tasarımınızın karşılaşacağı en bağışlayıcı koşuldur; eşik, güneş altında telefona bakan ya da görüşü azalmış okuyucu için vardır.
- Başlığı denetleyip gövde metnini sorunsuz saymak. Büyük metin 3:1’i geçerken normal metin 4,5:1 ister — aynı renk, aynı sayfada biri için geçip diğeri için kalabilir.
- Yalnızca metin renklerini denetlemek. Form alanı kenarlıkları, odak halkaları ve anlam taşıyan simgelerin kendi 3:1 gereksinimi vardır; yalnızca metne bakan bir denetim hepsini kaçırır.
- Fotoğraf üzerindeki metni görselin ortalama parlaklığına göre ölçmek. Metnin gerçekten geçtiği en açık ve en koyu noktalara karşı sınayın ya da ölçülecek tek bir arka plan olsun diye bir katman ekleyin.
- Geçmeyi sorunun sonu saymak. 4,5:1 bir tabandır — saç teli inceliğinde bir yazı tipi, sıkışık bir satır yüksekliği ya da kırmızı-yeşil bir eşleşme teknik olarak uyan bir oranda bile zor okunabilir.
Karşılaştırma
| KeroTools | Tarayıcı geliştirici araçları | Tasarım eklentileri | |
|---|---|---|---|
| AA ve AAA bir arada | Var | Genelde yalnız AA | Değişir |
| Normal ve büyük metin | İkisi de gösterilir | Bazen | Genelde |
| Üretmeden önce çalışır | Evet | Hayır — çizilmiş sayfa gerekir | Evet |
| Değerler sunucuya gider | Asla | Hayır | Eklentiye göre |
| Hesap ya da lisans | İkisi de değil | İkisi de değil | Sıklıkla gerekir |
| Maliyet | Ücretsiz | Ücretsiz | Ücretsiz / ücretli |
Özellikler
WCAG oran hesabı
Gözle yapılan bir yaklaşıklama değil, resmî bağıl parlaklık formülü.
AA ve AAA düzeyleri
Her iki uygunluk düzeyi değerlendirilir, böylece çiftin ne kadar payı olduğunu bilirsiniz.
Normal ve büyük metin
Büyük metnin eşiği daha düşüktür; hangisinin geçerli olduğunu hatırlamanız beklenmeden ikisi de gösterilir.
Canlı örnek metin
Sınanan çiftle gerçek karakterler — çıplak bir sayının yakalayamadığı sorunları yakalar.
Anında ayarla ve yeniden denetle
Renklerden birini kaydırın ve oranın hareketini izleyin; geçen en küçük değişikliği bulun.
HEX girişi
Kodları doğrudan bir marka belgesinden ya da stil dosyasından yapıştırın.
Kurulum yok
İndirilecek ya da kurulacak bir şey yok — web sayfasında çalışır.
Arapça ve RTL uyumlu
Sekiz dilde tam arayüz, sağdan sola Arapça dahil.
Varsayılan olarak güvenli
HTTPS üzerinden sunulur, dosya takibi ve üçüncü taraf yüklemesi yoktur.
Kimler kullanıyor
Ön yüz geliştiricileri
Bir renk sorusunu tasarım incelemesi tartışmasıyla değil, ölçülmüş bir oranla kapatmak.
Tasarımcılar
Bir marka renginin geçen en yakın tonunu, o renk bileşen kütüphanesine girmeden bulmak.
Erişilebilirlik ve uyum ekipleri
Hangi çiftlerin AA’yı karşıladığını ve hangilerinin düzeltme gerektirdiğini kesin oranlarla belgelemek.
Kamu ve eğitim kurumları
Tercih değil yasal yükümlülük olan erişilebilirlik gerekliliklerini karşılamak.
Sıkça Sorulan Sorular
WCAG AA normal metin için en az 4.5:1, büyük metin için 3:1 gerektirir; AAA ise sırasıyla 7:1 ve 4.5:1 gerektirir.
Hayır. Her şey tarayıcınızda yerel çalışır — hiçbir şey yüklenmez, saklanmaz veya paylaşılmaz.
Evet — tamamen ücretsiz, hesap ve sınır yok.