Renk Kontrastı Denetleyici

Renk Kontrastı Denetleyici nedir?

Renk Kontrastı Denetleyici; tasarımcılar, geliştiriciler ve erişilebilirlik test edenler için ücretsiz bir çevrimiçi WCAG kontrast oranı denetleyicisidir. Bir ön plan (metin) rengi ile bir arka plan rengini alır, her birinin bağıl parlaklığını hesaplar ve kontrast oranını 1:1 ile 21:1 arasında bir değer olarak bildirir. Ardından bu oranın WCAG 2.1 Düzey AA (normal 4.5:1, büyük 3:1) ve Düzey AAA (normal 7:1, büyük 4.5:1) ile uyumlu olup olmadığını söyler ve iki rengi canlı bir örnek metin önizlemesi olarak gösterir, böylece okunabilirliği bir bakışta değerlendirebilirsiniz. Bir tasarımı yayınlamadan önce gövde metni, düğmeler, bağlantılar ve etiketlerin okunabilir olduğunu doğrulamak için kullanın.

Renk Kontrastı Denetleyici nasıl kullanılır

1. Ön plan (metin) rengini HEX değeri olarak yazın veya yapıştırın ya da görsel olarak seçmek için yerel renk seçicisine tıklayın.
2. Metnin üzerinde durduğu arka plan rengi için de aynısını yapın.
3. 4.5:1 gibi bir değer olarak gösterilen kontrast oranı çıktısını okuyun (1:1 aynı renkler, 21:1 beyaz üzerine saf siyahtır).
4. Hangi düzeylerin geçtiğini görmek için normal metin ve büyük metin (18pt / 14pt kalın ve üzeri) için AA ve AAA rozetlerini kontrol edin.
5. Metnin rahatça okunabildiğini doğrulamak için iki renginizle oluşturulan örnek metin önizlemesine bakın.
6. Tasarımınızın ihtiyaç duyduğu kontrast düzeyine ulaşana kadar renklerden birini ayarlayın.

Örnekler

Ön plan #595959, Arka plan #ffffff

Oran 7.00:1 — normal ve büyük metin için AA ve AAA'yı geçer

Ön plan #999999, Arka plan #ffffff

Oran 2.85:1 — AA normal ve AAA'dan geçemez, gövde metni için gerekenlerin hiçbirini geçmez

Ön plan #767676, Arka plan #ffffff

Oran 4.54:1 — AA normal ve AA büyüğü geçer, ancak AAA normal geçemez

Sıkça sorulan sorular

WCAG hangi kontrast oranlarını gerektirir?

WCAG 2.1 Düzey AA, normal metin için en az 4.5:1 ve büyük metin için 3:1 gerektirir. Düzey AAA daha katıdır: normal metin için 7:1 ve büyük metin için 4.5:1. Bu denetleyici, bu dört eşiğin her biri için bir geçti/kaldı rozeti gösterir.

Büyük metin neye denir?

WCAG, büyük metni 18pt (yaklaşık 24px) ve üzeri ya da kalın olduğunda 14pt (yaklaşık 18.66px) ve üzeri olarak tanımlar. Büyük metnin kontrast gereksinimi daha düşüktür çünkü daha büyük gliflerin okunması daha kolaydır; bu yüzden normal metin rozetleri kalsa da büyük metin rozetleri geçebilir.

Kontrast oranı nasıl hesaplanır?

Resmi WCAG formülünü kullanır: her rengin bağıl parlaklığı doğrusallaştırılmış sRGB kanallarından hesaplanır ve oran (daha açık + 0.05) / (daha koyu + 0.05) şeklindedir. Sonuç 1:1 (aynı renkler) ile 21:1 (beyaz üzerine siyah) arasında değişir.

Alfa, RGB veya adlandırılmış renkleri destekliyor mu?

Giriş yalnızca HEX'tir (#rgb kısaltması veya #rrggbb) ve her alan için yerel bir renk seçicisi vardır. Alfa/opaklık ya da kısmi saydamlık dikkate alınmaz — önce yarı saydam katmanları düz bir renkte birleştirin, sonra onu kontrol edin.

Renklerim bir sunucuya gönderiliyor mu?

Hayır. Parlaklık ve oran hesaplaması tamamen tarayıcınızda JavaScript ile çalışır — hiçbir renk yüklenmez ve sunucuya hiçbir şey gönderilmez, bu nedenle gizli şekilde ve sayfa yüklendikten sonra çevrimdışı bile çalışır.