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 ve APCA kontrast denetleyicisidir. Renkleri HEX (#rgb, #rrggbb ve alfa içeren 8 haneli #rrggbbaa), rgb()/rgba() ve hsl()/hsla() olarak kabul eder, ölçmeden önce yarı saydam ön planı arka planın üzerine bindirir ve hem WCAG 2.1 oranını (1:1 ile 21:1 arası) hem de APCA Lc parlaklık kontrastı puanını bildirir. WCAG 2.1 Düzey AA (normal 4.5:1, büyük 3:1) ve AAA (normal 7:1, büyük 4.5:1) durumunu işaretler, metin dışı UI bileşenleri ve grafikler için 3:1 rozeti ekler ve en yakın geçen ön planı önerebilir — yalnızca parlaklığını AA veya AAA'yı karşılayana dek ayarlar — tek tıkla uygularsınız.

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

1. Ön plan (metin) rengini HEX, rgb() veya hsl() olarak girin — alfa içeren 8 haneli HEX veya rgba kabul edilir — ya da renk seçicisine tıklayarak görsel olarak seçin.
2. Arka plan rengini de aynı şekilde girin; kontrast ölçülmeden önce yarı saydam ön plan bunun üzerine (arka plan da beyazın üzerine) bindirilir.
3. Ön plan ile arka planı istediğiniz an değiştirmek için Değiştir düğmesini kullanın.
4. WCAG 2.1 kontrast oranını ve hemen yanında gösterilen APCA Lc puanını okuyun.
5. Normal ve büyük metin için AA ve AAA rozetlerini, ayrıca UI bileşenleri ve grafikler için 3:1 rozetini kontrol edin.
6. Bir çift geçemezse, en yakın geçen AA veya AAA rengine bakın ve ön planı güncellemek için Uygula'ya tıklayın.

Örnekler

Ön plan #595959, Arka plan #ffffff

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

Ön plan #00000080 (%50 siyah) #ffffff üzerinde

Önce düz bir griye bindirilir, ardından WCAG oranı ve APCA Lc hesaplanır

Ön plan #999999, #ffffff üzerinde — 2.85:1, AA'yı geçemez

En yakın AA rengini açın ve aynı ton korunurken 4.5:1'e ulaşmak için Uygula'ya tıklayın

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, büyük metin için 3:1; Düzey AAA 7:1 ve 4.5:1 gerektirir. Metin dışı UI bileşenleri ve grafik nesneleri (SC 1.4.11) 3:1 gerektirir. Bu denetleyici bu eşiklerin her biri için bir geçti/kaldı rozeti gösterir.

APCA Lc puanı nedir?

APCA (Erişilebilir Algısal Kontrast Algoritması), WCAG 3 için önerilen kontrast yöntemidir. Yaklaşık 0 ile 108 arası bir parlaklık kontrastı (Lc) değeri verir; değer yükseldikçe kontrast artar ve kutupluluğu (açık üzerine koyu ile koyu üzerine açık) hesaba katar. WCAG 2.1 oranının yanında gösterilir ve tek bir geçti/kaldı yerine kendi kılavuz düzeylerini kullanır.

En yakın geçen renk önerisi nasıl çalışır?

Ön planın tonunu ve doygunluğunu korur, yalnızca parlaklığını daha açık veya daha koyu yaparak arka plana karşı kontrast AA (4.5:1) veya AAA (7:1) olana dek ayarlar; sonra tek tıkla uygulayabilirsiniz. Arka plan orta tonluysa ve hedefe ulaşılamıyorsa, bunun yerine mümkün olan en yakın rengi gösterir.

Hangi renk biçimlerini girebilirim?

HEX (#rgb, #rrggbb ve alfa içeren #rgba ile 8 haneli #rrggbbaa), rgb()/rgba() ve hsl()/hsla(); her alan için yerel bir renk seçici vardır. Oran hesaplanmadan önce yarı saydam ön plan arka planın üzerine bindirilir — arka planın kendisi de önce beyaza indirgenir. Adlandırılmış renkler desteklenmez.

Renklerim bir sunucuya gönderiliyor mu?

Hayır. Tüm ayrıştırma, bindirme ve parlaklık, oran ile APCA hesapları tamamen tarayıcınızda JavaScript ile çalışır — hiçbir renk yüklenmez ve sunucuya hiçbir şey gönderilmez, bu yüzden gizli şekilde ve sayfa yüklendikten sonra çevrimdışı bile çalışır.