DevToolPal
TR

Renk Kontrastı Denetleyici (WCAG)

Metin ve arka plan renklerinin WCAG 2.x kontrast oranını denetleyin; normal metin, büyük metin ve arayüz için AA/AAA sonucu, canlı önizleme ve en yakın geçen renk önerisi.

Yerelde çalışır, asla yüklenmez

Renkler

Metin rengi
Arka plan rengi

Saydam renkler önce karıştırılır: metin arka planın, arka plan beyazın üzerine.

Önizleme

Büyük metin

Gövde metni, az gören kişiler veya ekranı karanlık olanlar dahil herkes için kolay okunmalıdır.

Düğme

Kontrast oranı

—

En yakın geçen renkler

Ne yapar

Renk kontrastı denetleyici, Web İçeriği Erişilebilirlik Yönergeleri’ne (WCAG 2.x) göre bir metin renginin arka plan rengi üzerinde okunabilir olup olmadığını söyler. Metin ve arka plan için herhangi bir CSS rengi girin — HEX, rgb(), hsl(), renk adı veya saydam renk — kontrast oranını, her AA ve AAA ölçütünün sonucunu ve canlı önizlemeyi görün. İkili geçemezse araç, aynı tonu koruyarak geçen en yakın metin ve arka plan renklerini önerir. Her şey tarayıcınızda çalışır.

Nasıl kullanılır

  1. Metin rengi ve Arka plan rengi’ni yazın veya seçin. Değiştir ikisinin yerini değiştirir.
  2. Kontrast oranı’nı ve normal metin, büyük metin ve arayüz bileşenleri için sonuç listesini okuyun.
  3. Bir seviye kalırsa En yakın geçen renkler’e bakın: her öneri yeni rengi, oranını, kopyalama düğmesini ve uygulamak için Kullan’ı gösterir.
  4. WCAG 3 taslağının açıklık kontrastını (Lc) da görmek için APCA’yı açın.

Yarı saydam renkler denetimden önce karıştırılır: metin arka planın, arka plan da beyazın üzerine.

Örnek

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Oran nasıl hesaplanır

Her rengin göreli parlaklığı sRGB kanallarından hesaplanır (doğrusallaştırılıp %21 kırmızı, %72 yeşil, %7 mavi ağırlıkla). Oran (açık olan + 0,05) / (koyu olan + 0,05) şeklindedir ve aynı renkler için 1:1’den beyaz üzerine siyah için 21:1’e kadar uzanır. Önemli olan yalnızca açıklıktır, ton değil: saf kırmızı üzerine saf yeşil renkli görünse de yalnızca yaklaşık 1,3:1 verir.

Öneriler yalnızca rengin açıklığını (HSL’de L) değiştirir ve koyulaştırma ya da açma yönlerinden daha az değişiklik gerektireni seçer. Bazen hiçbir ton yetmez: orta gri bir arka planda hiçbir metin rengi 7:1’e ulaşamaz.

SSS

› Ne kadar kontrast oranı gerekir?

WCAG 2.x AA seviyesi normal metin için en az 4,5:1, büyük metin ve alan kenarlıkları, simgeler, odak halkaları gibi arayüz bileşenleri için 3:1 ister. AAA seviyesi normal metin için 7:1, büyük metin için 4,5:1 ister. Çoğu yasa ve politika AA seviyesini esas alır.

› Büyük metin ne demektir?

Normal kalınlıkta en az 24px (18pt) veya kalın yazıda en az 18,66px (14pt) olan metin. Bundan küçük her şey normal metindir ve daha yüksek oran gerekir.

› 4,49:1 neden kalır?

WCAG eşikleri kesindir: 4,499 oranı 4,5'e ulaşmaz. Bu yüzden araç gösterilen oranı yukarı yuvarlamak yerine keser ve sonucu kesin değere göre verir.

› APCA nedir?

APCA (Accessible Perceptual Contrast Algorithm), WCAG 3 taslağı için önerilen kontrast yöntemidir. Hangi rengin metin olduğuna bağlı bir açıklık kontrastı değeri Lc verir ve karanlık moda daha uygundur. Henüz yasal bir standart olmadığı için burada yalnızca ek bilgi olarak gösterilir.