3BearLabs3Bear Tools
Görseller

Metin ve Arka Plan Renkleri için Kontrast Denetleyicisi

Bir metin rengi ve bir arka plan rengi seçin; kontrast oranlarını ve WCAG sonuçlarını görün.

Tarayıcında çalışır — dosyalar bu cihazdan çıkmaz.

WCAG Kontrast Denetleyicisi

Erişilebilirlik standartlarına göre metin renginizin arka plan renginizde okunabilir olup olmadığını kontrol edin.

Canlı Önizleme

Metniniz arka planda böyle görünüyor.

Contrast Ratio
21.00:1
Normal Metin (AA)PASS
Büyük Metin (AA)PASS
Normal Metin (AAA)PASS

Nasıl kullanılır

  1. Arka plan rengini ve metin rengini renk seçicilerle ya da HEX kodlarını yazarak ayarlayın.
  2. 4.50:1 gibi bir sayı olarak gösterilen kontrast oranını okuyun ve önizleme kartına bakın.
  3. Normal metin AA, büyük metin AA ve normal metin AAA için GEÇTİ veya KALDI rozetlerini kontrol edin.

Denetleyici, kontrast oranını Web İçeriği Erişilebilirlik Yönergeleri'nin (WCAG) tanımladığı şekilde hesaplar. Her renk sRGB formülüyle bağıl parlaklığa dönüştürülür ve oran, açık rengin parlaklığına 0,05 eklenip koyu rengin parlaklığına 0,05 eklenmiş değere bölünerek bulunur. Sonuç iki ondalıkla gösterilir; aynı renkler için 1:1'den beyaz üzerinde siyah için 21:1'e kadar değişir. Varsayılan renkler beyaz ve siyahtır.

Üç sonuç gösterilir. AA düzeyinde normal metin en az 4,5 oranı gerektirir. AA düzeyinde büyük metin en az 3 gerektirir. AAA düzeyinde normal metin en az 7 gerektirir. Her biri GEÇTİ veya KALDI olarak işaretlenir. Oranın kendisi de renk kodludur. WCAG'a göre büyük metin kabaca 18 punto normal veya 14 punto kalın demektir; bu yüzden büyük metin sonucunu yalnızca metniniz bu boyuttaysa kullanın.

Bir önizleme kartı iki rengi kullanarak bir başlık ve örnek bir metin satırı gösterir; böylece renkleri sayının yanı sıra gözünüzle de değerlendirebilirsiniz. Geçen bir puan tek başına iyi okunabilirliği garanti etmez; çünkü yazı tipi kalınlığı, boyutu ve çevresi de önemlidir.

Renkler 6 haneli HEX kodları olarak girilmelidir. Hesaplama tarayıcınızda yapılır.

Sık sorulan sorular

Hangi orana ihtiyacım var?

WCAG AA için normal metin 4.5:1, büyük metin 3:1 gerektirir. AAA için normal metin 7:1 gerektirir. Araç her biri için sonucu gösterir.

Büyük metin sayılan nedir?

WCAG'da yaklaşık 18 punto veya daha büyük ya da 14 punto kalın veya daha büyük metin.

Hangi renk nereye gider?

Araç bir rengi arka plan, diğerini metin olarak ele alır, ancak oran her iki durumda da aynıdır.

Kısa HEX kodum neden çalışmıyor?

#333 yerine #333333 gibi tam 6 haneli biçimi girin.

Metin olmayan öğeleri denetler mi?

Yalnızca metin eşiklerini verir. Oran gösterilir; böylece arayüz bileşenleri için 3:1 yönergesiyle kendiniz karşılaştırabilirsiniz.

İlgili araçlar