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.

Bu faydalı oldu mu?

En fazla 3 tepki seçebilirsiniz.

Yorumlar (1)

  • Editör ekibi

    Oran iki düz rengi karşılaştırır; bu yüzden gradyan, fotoğraf ya da yarı saydam bir katman üzerindeki yazıyı değerlendiremez. Böyle durumlarda yazının arkasındaki en açık ve en koyu noktaları seçip her çifti ayrı sınayın, çünkü en kötüsü belirleyicidir. Renkler burada onaltılı kodla girilir; adlı ya da rgb değerleri önce çevirin. Paletinizde hangi renk çiftleri sürekli başarısız oluyor, hangileri yalnızca büyük yazıda geçiyor?

Popüler hesaplayıcılar

Tüm Hesaplayıcılar