Renk Kontrast Denetleyici (WCAG)

Nasıl çalışır?

Sol panele metin (yazı) renklerini yazın; her satıra bir renk gelir ve biçim otomatik tanınır: #777777, rgb(119, 119, 119) ya da hsl(0, 0%, 47%) aynı şekilde okunur. Arka plan rengini seçenek kutusuna yazın; boş bırakırsanız beyaz varsayılır. Sonuç panelinde her renk için kontrast oranı 4,48:1 gibi tek bir sayıyla ve o sayının seçtiğiniz metin boyunda AA ile AAA eşiklerinden geçip geçmediğiyle birlikte çıkar. Örnek: beyaz zemin üstünde #777777 grisi 4,48:1 verir ve normal metin için AA'da bir tık kalır; rengi bir basamak koyulaştırıp #767676 yaptığınızda 4,54:1'e çıkar ve geçer. Renk kutuları çıktının altında canlı olarak çizilir, böylece sayıya bakmadan önce ikilinin gözle nasıl durduğunu da görürsünüz. Aynı zemine karşı birden çok marka rengini denemek için hepsini alt alta yazmanız yeterlidir; durum satırı kaçının geçtiğini sayar.

Bu araç renk kontrast hesaplama aramalarıyla da biliniyor.

Kontrast oranı nedir?

Kontrast oranı, iki rengin parlaklık farkını tek bir sayıya indiren ölçüdür ve her zaman "X:1" biçiminde yazılır. En küçük değeri 1:1'dir; bu, iki rengin birebir aynı olduğu ve metnin zeminde hiç görünmediği durumdur. En büyük değeri ise siyah ile beyazın verdiği 21:1'dir. Ölçünün sevilen yanı, renklerin sırasına bakmamasıdır: metin ile zemini değiştirseniz de aynı sayıyı bulursunuz, çünkü hesap açık olanı her zaman paya koyar.

WCAG AA ve AAA nedir?

WCAG (Web İçeriği Erişilebilirlik Kılavuzu), okunabilirlik için iki uyum seviyesi tanımlar. AA seviyesi normal metinde 4,5:1, büyük metinde 3:1 kontrast ister; kamu kurumlarının ve çoğu kurumsal ürünün hedeflediği taban budur. AAA seviyesi çıtayı normal metinde 7:1, büyük metinde 4,5:1'e çeker ve tüm sayfaya uygulanması pratikte zordur. Logolar, devre dışı düğmeler ve dekoratif metinler bu kuralın dışında tutulur.

Göreli parlaklık nedir?

Göreli parlaklık, bir rengin ekrandan gözünüze ne kadar ışık gönderdiğini 0 (siyah) ile 1 (beyaz) arasında anlatan sayıdır. Hesap iki adımlıdır: önce her kanal doğrusallaştırılır, yani ekranın gama eğrisi geri alınır; sonra kanallar 0,2126 kırmızı, 0,7152 yeşil ve 0,0722 mavi ağırlıklarıyla toplanır. Bu ağırlıklar gözün yeşile duyarlı, maviye kör sayılacak kadar az duyarlı olmasından gelir — kontrastta maviyi açmanın neredeyse hiç işe yaramamasının sebebi budur.

AA ile AAA arasındaki fark nedir?

İkisi de aynı kontrast oranını kullanır, yalnızca geçme notu farklıdır: normal metinde AA 4,5:1, AAA ise 7:1 ister. Aradaki boşluk göründüğünden büyüktür — beyaz zeminde AA'yı geçen en açık gri #767676 iken AAA'yı geçen en açık gri #595959'dur, yani gövde metnini belirgin biçimde koyulaştırmanız gerekir. Pratikte AA tüm sayfa için hedeflenir; AAA ise uzun okuma yapılan, açık havada kullanılan ya da yaşlı kullanıcıya hitap eden ekranlarda tercih edilir.

Neden gözünüze okunaklı gelen gri sınıfta kalıyor?

Kontrast oranı, iki rengin ekrandaki parlaklığından hesaplanır; ancak buradaki parlaklık, HEX kodundaki sayıların doğrudan kendisi değildir. Kanal değerleri önce doğrusallaştırılır, sonra yeşile kırmızıdan üç kat, maviye ise on kat fazla ağırlık verilir — çünkü göz yeşili çok, maviyi az görür.

Bunun pratik sonucu şudur: gözle benzer koyulukta duran iki renk aynı oranı vermez. Beyaz zemin üstünde saf mavi #0000FF 8,59:1 çıkarken, koyu yeşil #008000 yalnızca 5,14:1 çıkar. Bu yüzden karar gözle değil sayıyla verilir; ekran parlaklığınız da yargınızı bozar.

Hangi eşiği hedeflemelisiniz?

AA, kamuya açık işlerin çoğunda beklenen taban seviyedir; AAA ise gerçekten zorlayıcıdır ve genellikle gövde metninin tamamına uygulanmaz.

• Gövde metni, form etiketi, hata mesajı → normal metin AA (4,5:1) en az
• Büyük başlık (18pt ya da 14pt kalın) → 3:1 yeterli sayılır
• Yaşlı kullanıcı ağırlıklı ya da açık havada okunan ekran → AAA (7:1) hedefleyin
• Soluk gri yardım metni → en sık kalınan yer; 4,5:1'in altına düşmesin

Sık sorulanlar

Kontrast oranı nasıl hesaplanıyor?

İki rengin göreli parlaklığı ayrı ayrı bulunur ve (açık + 0,05) / (koyu + 0,05) oranı alınır. Sonuç en az 1:1 (aynı iki renk), en çok 21:1 (siyah ile beyaz) olabilir.

Büyük metin tam olarak kaç punto?

WCAG büyük metni 18 punto ve üzeri ya da kalın yazılmışsa 14 punto ve üzeri olarak tanımlar. Web'de kabaca 24 piksel normal, 18,66 piksel kalın karşılığına denk gelir.

Rengin sırası önemli mi; metin ile zemini değiştirsem sonuç değişir mi?

Hayır. Formül önce hangisinin daha açık olduğuna bakar, bu yüzden metin ile zemini yer değiştirmek oranı değiştirmez. Değişen tek şey hangi rengin okunaklı göründüğüne dair izleniminizdir.

Renkler bir yere gönderiliyor mu?

Hayır. Hesap tamamen tarayıcınızın içinde yapılır; yazdığınız renk kodları sunucuya ya da üçüncü tarafa gitmez.