ConverterHub

Renk Kontrastı (WCAG) Hesaplama

Renk kontrastı nasıl ölçülür?

Sonuç

4,54:1
AA uygun

Nasıl hesaplanır?

Hex biçiminde iki renk girin; 3 veya 6 haneli olabilir, başındaki # isteğe bağlıdır. Kırmızı, yeşil ve mavi kanalların her biri 255'e bölünür ve doğrusallaştırılır: c 0,03928 veya altındaysa c / 12,92, aksi halde ((c + 0,055) / 1,055)^2,4. Bağıl parlaklık L = 0,2126 R + 0,7152 G + 0,0722 B olur. Oran (Laçık + 0,05) / (Lkoyu + 0,05) formülüyle bulunur; hangi rengin yazı olduğu sonucu değiştirmez.

Gösterilen düzey, 7:1 ve üzeri için AAA, 4,5:1 ve üzeri için AA, altı için yetersizdir. Büyük yazı için geçerli 3:1 eşiği uygulanmaz. Geçersiz bir kod (hex olmayan harf ya da yanlış hane sayısı) oran yerine “Geçersiz renk kodu” mesajı verir.

Örnek hesaplama

Beyaz #ffffff üzerinde gri #767676. Gri kanal 118/255 = 0,4627 olur ve ((0,4627 + 0,055) / 1,055)^2,4 = 0,1812 değerine doğrusallaşır, yani L = 0,1812. Beyazın L değeri 1'dir. Oran (1 + 0,05) / (0,1812 + 0,05) = 1,05 / 0,2312 = 4,54 çıkar. Bu değer 4,5'i geçer ama 7'ye ulaşmaz; sonuç 4,54:1 ve AA uygun.

Bu örneği dene →

Sık yapılan hatalar

  • Göz kararı değerlendirmek. Beyaz üzerinde #777777 değeri 4,48:1 ile yetersiz kalır, #767676 ise 4,54:1 ile geçer; oysa iki gri birbirinin aynı görünür.
  • Orta tonda bir marka mavisinin beyaz üzerinde güvenli olduğunu varsaymak. #1a73e8 yalnızca 4,51:1 verir, AA sınırını zor geçer; biraz daha açık bir ton kalır.
  • Büyük yazı için esneklik beklemek. Araç her çifte AA için 4,5:1 uygular; standarda göre 3:1 ile geçebilecek bir başlık burada yetersiz görünür.
  • Renk adı ya da rgb() değeri yazmak. Yalnızca 3 veya 6 haneli hex kodları kabul edilir, diğerleri geçersiz mesajı verir.
  • 3 haneli kodda her hanenin ikiye katlandığını unutmak: #f80, #0f0800 değil #ff8800 demektir.

Bu hesaplama hakkında

Bu araç, her rengin göreli parlaklığından (relative luminance) hesaplanan, 1:1 (aynı renkler, kontrast yok) ile 21:1 (saf beyaz üzerinde saf siyah) arasında değişen bir ön plan ve arka plan rengi arasındaki WCAG kontrast oranını hesaplar. Ardından bu oranı, AA için 4,5:1 ve AAA için 7:1 olan (standardın büyük metne tanıdığı daha düşük 3:1 sınırını bu araç uygulamaz) resmi AA ve AAA erişilebilirlik eşikleriyle karşılaştırarak, belirli bir metin-arka plan kombinasyonunun erişilebilirlik standartlarını karşılayacak kadar okunabilir olup olmadığını söyler.

Web tasarımcıları ve ön yüz geliştiricileri bir renk paletini yayına almadan önce bu aracı kullanır, çünkü düşük kontrastlı metin en yaygın erişilebilirlik şikayetlerinden biridir ve bazı ülkelerde yasal erişilebilirlik gerekliliklerini karşılamayabilir. Erişilebilirlik denetçileri de bir web sitesini veya uygulamayı WCAG uyumluluğu açısından incelerken aynı hesaplamayı kullanır; tasarım sistemleri de bu sorunu baştan önlemek için AA seviyesini geçen renk çiftlerini doğrudan bileşen kütüphanelerine gömer.

Bu faydalı oldu mu?

En fazla 3 tepki seçebilirsiniz.

Yorumlar (0)

  • İlk yorumu siz yazın.

Popüler hesaplayıcılar

Kredi Hesaplama

Aylık taksit, toplam faiz ve ödeme planını hesaplayın.

Yüzde Hesaplama

Yüzde değişim, indirim ve oran hesaplamaları.

İndirim Hesaplama

İndirimli fiyatı, kazancı ve indirim tutarını hesaplayın.

Vücut Kitle Endeksi (BMI)

Boy ve kiloya göre vücut kitle endeksini hesaplayın.

Yaş Hesaplama

Doğum tarihinden bugüne tam yıl, ay ve gün cinsinden yaşınızı hesaplayın.

Bileşik Faiz Hesaplama

Ana para, faiz oranı ve süreye göre bileşik faizle nihai tutarı hesaplayın.

Tüm Hesaplayıcılar