Renk Kontrast Oranı Hesaplama

Erişilebilirlik için iki rengin kontrast oranını kontrol edin.

Nasıl hesaplanır?

Her renk bir bağıl parlaklığa çevrilir: L = 0,2126 R + 0,7152 G + 0,0722 B. Her kanal önce 0 ile 1 arasına ölçeklenir ve doğrusallaştırılır (0,03928'e kadar olan değerler 12,92'ye bölünür, diğerlerinde ((c + 0,055) / 1,055)2,4 kullanılır). Kontrast oranı (Laçık + 0,05) / (Lkoyu + 0,05) olup 1 : 1 ile 21 : 1 arasındadır. İki rengin sırası önemli değildir. Araç oranı WCAG sınırlarıyla etiketler: AAA için 7 ve üzeri, AA için 4,5 ve üzeri, yalnızca büyük metin için 3 ve üzeri, 3'ün altı başarısızdır. Renkler 3 veya 6 haneli onaltılık kod olmalıdır; # olabilir de olmayabilir de.

Örnek hesaplama

Beyaz #ffffff üzerinde gri yazı #767676. Gri kanal 118/255 = 0,463 olur, doğrusallaşınca yaklaşık 0,181 eder; yani L = 0,181. Beyazın L değeri 1'dir. Oran = (1 + 0,05) / (0,181 + 0,05) = 1,05 / 0,231. Araç 4,54 : 1 oranını ve AA geçer sonucunu gösterir; bu, normal metin için gereken 4,5 sınırının hemen üstündedir.

Bu örneği dene →

Sık yapılan hatalar

  • Kendi ekranınıza bakarak karar vermek. Parlaklık, yansıma ve görme farklıdır; oran nesnel bir kontrol sunar.
  • Büyük metin için olan 3 : 1 sınırını normal metne uygulamak; normal metin AA için 4,5 : 1 ister.
  • Yalnızca varsayılan durumu denetleyip üzerine gelme, odak, devre dışı metin ve görsel üstündeki yazıyı unutmak.
  • Renkte yazım hatası yapmak veya red gibi bir ad girmek; araç onaltılık kod ister.
  • Geçmenin okunabilirliği garanti ettiğini sanmak. Yazı boyutu, kalınlık ve ince çizgiler yine önemlidir.

Bu hesaplama hakkında

Bu hesaplayıcı, iki renk arasındaki WCAG kontrast oranını, (L1 + 0,05) / (L2 + 0,05) formülüyle hesaplar; burada L1 ve L2, açık ve koyu renklerin göreli parlaklık değerleridir ve her biri sRGB kanal değerlerinden WCAG'nin gama düzeltmeli parlaklık formülüyle türetilir. Sonuç 1:1'den (aynı renkler) 21:1'e (beyaz üzerinde saf siyah) kadar değişir ve Web İçeriği Erişilebilirlik Kılavuzları eşikleriyle karşılaştırılır — AA seviyesinde normal metin için 4,5:1 ve büyük metin için 3:1, daha katı AAA seviyesinde ise sırasıyla 7:1 ve 4,5:1.

Web tasarımcıları, ön yüz geliştiricileri ve erişilebilirlik denetçileri, düşük görme veya renk körlüğü olan kullanıcılar için metin ve arayüz öğelerinin yasal ve kullanılabilirlik erişilebilirlik standartlarını (WCAG 2.1, ADA, Section 508 uyumluluğu) karşıladığından emin olmak için bunu kullanır. Kontrast oranını ve geçti/kaldı durumunu görmek için iki hex renk girin.

Bu faydalı oldu mu?

En fazla 3 tepki seçebilirsiniz.

Yorumlar (0)

  • İlk yorumu siz yazın.

Popüler hesaplayıcılar

Tüm Hesaplayıcılar