Renk Dönüştürücü ve Kontrast Denetleyici

Onaylanan marka rengi erişilebilirlik denetiminden döndü

Marka rengi seçildi, sunumda çok iyi durdu, herkes onayladı. Aylar sonra bir erişilebilirlik denetimi geldi ve o rengin beyaz üstündeki kontrastı 2.8:1 çıktı. Butonların yazısı, linkler, bilgi metinleri, hepsi sınıfta kaldı. Renk kötü değildi, sadece kimse ölçmemişti.

Rengin ekranda "yeterince koyu" görünmesi bir ölçüm değil. Kontrast, iki rengin birbirine ne kadar benzemediğiyle değil, ışık miktarlarının oranıyla hesaplanıyor ve gözünüz bu oranı doğru tahmin edemiyor.

Hangi biçim ne işe yarıyor

Dört biçim de aynı rengi anlatıyor, farkları neyi kolaylaştırdıklarında. Birini diğerine üstün kılan bir sıra yok, iş bazında seçim var.

Bu araç dördünü de hem okuyor hem yazıyor. Girdi tarafında CSS Color 4'ün yeni boşluklu sözdizimini de eski virgüllü sözdizimini de kabul ediyor, çünkü tasarım araçları yenisini üretirken mevcut stil dosyalarınız hâlâ eskisini kullanıyor.

Kısa HEX yazımında sık yapılan bir hata var: #f00 gibi üç haneli bir değer açılırken her karakter kendisiyle ikizleniyor, yani "f" harfi "ff" oluyor. Sıfırla tamamlayan bir uygulama "f0" üretir ve her kısa HEX değerini bir miktar koyultur. Aradaki fark tek bir renkte gözden kaçar, bir palet boyunca birikir.

Aralık dışı değerlerde ise araç sessizce kırpmak yerine hata veriyor. rgb(300, 0, 0) yazdığınızda kırmızı göstermek sorunu gizlemek olurdu; o değer büyük ihtimalle bir hesaplamadan yanlış çıkmıştır ve haberdar olmanız gerekir. Ton ise açı olduğu için kuralın dışında kalıyor: hsl(400 ...) geçerli CSS ve 40 derece anlamına geliyor, dolayısıyla kaydırılarak kabul ediliyor.

OKLCH neden fark yaratıyor

HSL'deki "lightness" bir algı ölçüsü değil, kırmızı, yeşil ve mavi kanalların en büyüğü ile en küçüğünün ortalaması. Bunun pratikteki sonucu şu: hsl(60 100% 50%) sarısı ile hsl(240 100% 50%) mavisi aynı lightness değerine sahip, ama sarı gözünüzü alacak kadar parlak, mavi ise neredeyse koyu. Göz yeşile ve sarıya maviden çok daha duyarlı, HSL bunu hiç hesaba katmıyor.

Bu farkın en can yakıcı hali palet üretirken ortaya çıkıyor. Klasik yöntem şu: bir renk seç, lightness'ı sabit tut, tonu 60 derecelik adımlarla döndür, altı renkli bir palet çıksın. Sonuç düzgün olmuyor. Sarı ve camgöbeği paletin içinden fırlıyor, mavi ve mor arkada kalıyor, elinizde dengesiz bir set kalıyor.

1/* HSL: lightness sabit, ama algılanan parlaklık her adımda değişiyor */2.a { background: hsl(0   80% 55%); }   /* kırmızı, orta parlaklık */3.b { background: hsl(60  80% 55%); }   /* sarı, gözle bakınca çok daha parlak */4.c { background: hsl(240 80% 55%); }   /* mavi, gözle bakınca belirgin koyu */5 6/* OKLCH: L algıya karşılık geliyor, aynı döndürme dengeli bir palet veriyor */7.a { background: oklch(0.65 0.18 25); }8.b { background: oklch(0.65 0.18 85); }9.c { background: oklch(0.65 0.18 265); }10 11/* Aynı özellik tema üretmeyi de kolaylaştırıyor:12   L değerini 0.08 düşürmek tonu bozmadan bir basamak koyu ton verir. */

OKLCH'nin L bileşeni algıyla birlikte hareket ediyor. Aynı L değerindeki iki renk gerçekten aynı parlaklıkta görünüyor, dolayısıyla tonu döndürerek ürettiğiniz palet dengeli çıkıyor. Bir rengi bir basamak koyultmak istediğinizde de sadece L düşüyor, ton kaymıyor. Araçtaki erişilebilir renk önerisi tam olarak bunu yapıyor: rengin ton ve doygunluğuna dokunmadan yalnızca OKLCH açıklığını ikili arama ile kaydırıyor, böylece öneri hâlâ sizin renginiz gibi görünüyor.

WCAG kontrastı ve 4.5:1 sayısının anlamı

Kontrast oranı 1 ile 21 arasında bir sayı. İki rengin bağıl parlaklığı hesaplanıyor, her ikisine 0.05 ekleniyor ve büyük olan küçüğe bölünüyor. O 0.05'ler ekrandaki ortam yansımasını modelliyor ve üst sınırın tam olarak 21 çıkmasının sebebi de bu.

Normal metin için AA seviyesi 4.5:1, AAA seviyesi 7:1 istiyor. Büyük metin için çıta düşüyor: AA 3:1, AAA 4.5:1. Büyük metnin tanımı 18pt ve üzeri, kalınsa 14pt ve üzeri. Sebebi harflerin kalınlaşması: kalın çizgi düşük kontrastta bile okunabilir kalıyor. Buradaki eşikler "en az" olarak tanımlı, yani tam 4.5 çıkan bir oran AA seviyesini geçiyor.

Saydamlık kontrastı neden ölçülemez yapıyor

rgba(0, 0, 0, 0.6) bir renk gibi görünüyor ama tek başına bir parlaklığı yok. Ekranda gördüğünüz şey o rengin arkasındaki neyse onunla harmanlanmış hali. Beyaz üstünde açık gri, koyu gri üstünde neredeyse siyah. İki farklı renk, tek bir tanım.

Bu yüzden araç kontrast hesabında alfa kanalını bilerek yok sayıyor. Arka planı tahmin etmek, size kendinden emin ama yanlış bir sayı vermek olurdu. Yarı saydam bir katmanın kontrastını ölçmek istiyorsanız önce onu arka planla birleştirip çıkan opak rengi girin. Bu hesap kanal başına şu şekilde: sonuç = ön alfa + arka (1 - alfa).

Kontrast hesabının bir de sessizce yanlış yapılabilen tarafı var. Bağıl parlaklık, kanalların 0 ile 255 arasındaki ham değerlerinden değil, doğrusallaştırılmış hallerinden hesaplanıyor. Yaygın kısayol olan (c/255)^2.2 formülü koyu renklerde belirgin şekilde sapıyor: 0.02 değerinde doğru sonuç 0.00155 iken kısayol 0.00022 veriyor, yani yedi kat fark. Bu sapma doğrudan kontrast oranına yansıdığı için, erişilemez bir renk çiftini geçer gösteren bir araçla karşılaşmanız mümkün.

Aynı belirsizlik gradyanlar ve fotoğraf üstündeki metinler için de geçerli. Arka plan tek bir renk değilse ölçülecek tek bir kontrast da yok. Pratikte yapılması gereken, metnin denk gelebileceği en açık ve en koyu noktayı bulup ikisini de ölçmek, sonucu ise en kötü senaryoya göre kabul etmek.