Yükleme yok, %100 yerel, hesap yok

WCAG Kontrast Denetleyici

İki renk yazın veya seçin, WCAG kontrast oranını anında görün; normal ve büyük metin için AA/AAA geçiş rozetleriyle.

Kontrast Denetleyici nasıl çalışır

Bu araç iki renk arasındaki WCAG kontrast oranını hesaplar ve çiftin normal metin, büyük metin ve metin dışı arayüz bileşenleri için AA veya AAA düzeyini karşılayıp karşılamadığını gösterir. Her şey tarayıcınızda yerel olarak hesaplanır; girdiğiniz renkler asla yüklenmez.

Yazan: Bastien Sulyan

Kontrast Denetleyici nasıl kullanılır, adım adım

  1. Ön plan (metin) rengini girin veya seçin.
  2. Arka plan rengini girin veya seçin.
  3. Normal metin, büyük metin ve metin dışı arayüz bileşenleri için kontrast oranını ve AA/AAA rozetlerini okuyun.
  4. Çifti ters yönde kontrol etmek için Renkleri değiştir'i kullanın.

Yaygın kullanım örnekleri

  • Bir düğme bileşenini yayınlamadan önce bir markanın ana rengini beyaza veya siyaha karşı kontrol etmek.
  • Soluk gri gövde metninin açık renkli bir kart arka planında hâlâ AA'yı geçtiğini doğrulamak.
  • Bir paragraf içindeki bağlantı renginin 4,5:1 normal metin eşiğine ulaştığını doğrulamak.
  • Büyük, ince ağırlıklı bir başlığın hâlâ gevşetilmiş 3:1 büyük metin eşiğini geçip geçmediğini test etmek.

Sık sorulan sorular

Bu araç renklerimi bir sunucuya gönderiyor mu?

Hayır, hesaplama tamamen tarayıcınızda JavaScript ile yapılır; girdiğiniz hiçbir şey yüklenmez.

AA veya AAA için hangi kontrast oranı gerekir?

WCAG 2.x normal metinde AA için 4,5:1, AAA için 7:1; büyük metinde AA için 3:1, AAA için 4,5:1 gerektirir.

Büyük metin ne sayılır?

En az 24px (18pt) normal ağırlıkta veya yaklaşık 18,7px (14pt) kalın; daha küçük her şey normal metin eşiklerini kullanır.

Ön plan ve arka planı değiştirmek neden oranı değiştirmiyor?

Oran formülü simetriktir: yalnızca daha açık ve daha koyu parlaklığı karşılaştırır, hangi rengin metin için kullanıldığını değil. Değiştirmek yine de faydalıdır çünkü çiftin roller tersine çevrildiğinde de işe yarayıp yaramadığını gösterir, örneğin açık bir çip üzerinde koyu metne karşı koyu bir çip üzerinde açık metin.

AA'yı geçmek tasarımımın erişilebilir olduğunu garanti eder mi?

Hayır. Kontrast, birçok WCAG başarı kriterinden yalnızca biridir. Renk körlüğü olan kişiler için renk seçimi, odak görünürlüğü, metin yeniden boyutlandırma ve klavye gezinme ayrı kontrollerdir; bu sitedeki renk körlüğü simülatörü bunlardan birini kapsar.

Bu resmi bir W3C veya WebAIM aracı mı?

Hayır. Herkese açık WCAG 2.x kontrast formülünü bağımsız olarak uygular ve W3C veya başka bir erişilebilirlik kuruluşuyla bağlantılı değildir.

İlgili araçlar

Her şeyi yerel tutun, tamamlayıcı araçları keşfedin.

Tüm geliştirici araçları