Renk Kontrast Kontrol Cihazı
Ön plan ve arka plan renklerini girin; kontrol aracı, WCAG kontrast oranını (1:1 ile 21:1 arası) ve normal metin, büyük metin ve metin dışı öğeler için WCAG 2.1 AA ile AAA eşiklerine göre geçti/kaldı sonuçlarını döndürür. Perde arkasında WCAG parlaklık formülünü kullanır; basit bir matematik ama erişilebilirlik için kritiktir. Oran ihtiyacınız olan eşiği geçene kadar parlaklığı ayarlayarak başarısız sonuçları düzeltin.
Kontrast oranı nasıl hesaplanır?
-
1
İki renk girin
Her iki renk için 3 veya 6 haneli HEX. Her renk için renk seçici mevcuttur.
-
2
Her renk için bağıl parlaklık hesaplanır
L = 0.2126·R + 0.7152·G + 0.0722·B; burada her kanal sRGB'den doğrusallaştırılır.
-
3
Kontrast oranı
(L_açık + 0.05) / (L_koyu + 0.05). Oranlar 1:1 ile 21:1 arasındadır.
-
4
Geçti/Kaldı rozetleri
AA (normal için 4.5:1, büyük/UI için 3:1), AAA (normal için 7:1, büyük için 4.5:1). Büyük metin = ≥18pt normal veya ≥14pt kalın.
WCAG kontrast eşikleri
| İçerik türü | AA eşiği | AAA eşiği |
|---|---|---|
| Normal metin | 4.5:1 | 7:1 |
| Büyük metin (≥18pt normal veya ≥14pt kalın) | 3:1 | 4.5:1 |
| Metin dışı (UI bileşenleri, odak halkaları) | 3:1 | - |
| Tesadüfi metin (dekoratif, devre dışı, logolar) | muaf | muaf |
“Büyük metin”, 18pt+ normal ağırlık (CSS’te ~24px) veya 14pt+ kalın (~19px kalın) anlamına gelir.
Örnek kontrastlar
| Çift | Oran | AA normal | AA büyük | AAA normal |
|---|---|---|---|---|
| Beyaz üzerinde siyah | 21:1 | Geçti | Geçti | Geçti |
| Beyaz üzerinde #333 | 12.6:1 | Geçti | Geçti | Geçti |
| Beyaz üzerinde #666 | 5.7:1 | Geçti | Geçti | Kaldı |
| Beyaz üzerinde #888 | 3.5:1 | Kaldı | Geçti | Kaldı |
| Beyaz üzerinde #AAA | 2.3:1 | Kaldı | Kaldı | Kaldı |
| #1976D2 üzerinde beyaz (Material blue 700) | 4.6:1 | Kaldı | Geçti | Kaldı |
| #2196F3 üzerinde beyaz (Material blue 500) | 3.1:1 | Kaldı (normal) | Geçti | Kaldı |
Yaygın erişilebilirlik tuzakları
- Beyaz üzerinde gri gövde metni #999 veya daha açık olduğunda AA’yı geçemez. Beyaz üzerinde gövde metni için #767676 veya daha koyusunu kullanın.
- Gri üzerinde mavi bağlantı: iki renk de orta parlaklıkta olduğu için sıklıkla başarısız olur.
- Marka rengi üzerinde beyaz metin: daha koyu tonlarda (≥ 4.5:1) geçer, orta tonlu marka renklerinde kaldı. Daha büyük metin veya daha koyu marka rengi kullanın.
- Yer tutucu metin genellikle “ipucu” vermek için düşük kontrastlıdır; kullanıcıların yer tutucuyu okuması gerekiyorsa WCAG yine de geçerlidir.
- Devre dışı durum: WCAG 2.2, durumun kendisi başka bir yolla iletilmediği sürece devre dışı metin için denetimin arka planına karşı 3:1 oranını gerektirir.
WCAG’nin söylemedikleri
- WCAG 2.x, 1988 tarihli bir formül kullanır. Modern APCA (gelişmiş algısal kontrast algoritması) algılanan okunabilirliği daha iyi yansıtır ancak henüz yasal taban değildir. APCA ve uç durumları karşılamak için sayıları WCAG minimumlarının biraz üzerine çıkarın.
- Kontrast, erişilebilirliğin tek boyutu değildir. Font 9px ise, satır yüksekliği sıkışıksa veya anlam kırmızı-yeşil renkle veriliyorsa 21:1 oranının bir anlamı yoktur.
Başarısız bir çifti iyileştirme
- Koyu arka planda daha açık ön plan veya açık arka planda daha koyu ön plan.
- Font boyutunu veya ağırlığını artırın, büyük metin eşiği daha düşüktür.
- Görsellerin üzerindeki metnin arkasına bir arka plan ekleyin (bindirme, gradyan).
- Hâlâ başarısız olan bir griye soluklaştırarak kontrastı asla düzeltmeyin, AA’ya ulaşana kadar ilerleyin.
Her ayarlamadan sonra yeniden kontrol edin; araç oranı anlık olarak yeniden hesaplar ve küçük bir parlaklık değişikliği sonucu hızla değiştirebilir.
Sık Sorulan Sorular
AA, çoğu yargı bölgesinde (ABD Bölüm 508, AB EN 301 549) yasal tabandır ve çoğu denetim aracının işaretlediği seviyedir. AAA hedef odaklıdır ve yalnızca belirli erişilebilirlik bağlamlarında (düşük görüşlü kullanıcılar için eğitim içeriği) gereklidir. AA’yı hedefleyin ve AAA’yı bonus olarak görün.
Hayır, yalnızca 3 veya 6 haneli opak HEX renkleri kabul eder. RGB veya HSL’yi önce HEX’e çevirin ya da her zaman HEX üreten renk seçiciyi kullanın.
WCAG 2.1 SC 1.4.11, metin dışı UI bileşenleri ve grafik nesneler için 3:1 kontrast gerektirir. Bu, odak göstergeleri, giriş kenarlıkları, yalnızca simge içeren düğmeler ve durumlar (hover, aktif) için geçerlidir. Hem varsayılan hem de odak durumlarını kontrol edin.
Her modu ayrı ayrı test edin; açık ve koyu temalardaki kontrast oranları birbirinden bağımsızdır. Açık modda geçen birçok palet, aynı bağıl parlaklıkta koyu modda başarısız olur.
İlgili Araçlar
Gradyan Duvar Kağıdı Oluşturucu
Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.
FPS Sayacı
requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.
JSON Biçimlendirici
JSON metnini 2 veya 4 boşlukla okunabilir hale getirmek, kompakt çıktıya küçültmek ya da sonucu kopyalamadan önce söz dizimini hızlıca kontrol etmek için yapıştırın.
Renk Paleti Jeneratörü
Temel bir HEX renginden monokromatik, analog, tamamlayıcı, triadik veya tetradik paletler oluşturun ve kopyalamaya hazır CSS değişkenleri alın.
İkiliden Sekizliye Dönüştürücü
Bitleri üçer üçer gruplayarak ikiliyi sekizliye dönüştürün. Unix izinleri, eski sistemler ve kompakt sayısal gösterim için yararlıdır.
HAR Dosyası Görüntüleyici
HAR ağ kayıtlarını yerel olarak açın, istekleri filtreleyin, maskeli üstbilgileri ve zamanlama aşamalarını inceleyip temizlenmiş özetleri yüklemeden dışa aktarın.