`contrast-color()`, web tarayıcılarının stil hesaplaması sırasında arka plan rengine göre otomatik olarak siyah veya beyaz metin rengi seçmesini sağlayan yerel bir CSS fonksiyonudur. HTTP Archive ve WebAIM verilerine göre web sitelerinin büyük çoğunluğunun hâlâ temel WCAG kontrast standartlarını karşılayamaması üzerine geliştirilen bu özellik, çalışma zamanında JavaScript (runtime JS) maliyetlerini ortadan kaldırarak erişilebilirliği doğrudan tarayıcı seviyesinde çözmeyi hedeflemektedir.
Nasıl Çalışır ve Teknik Sınırları Nelerdir?
Fonksiyonun temel çalışma mantığı oldukça basittir; arka plana verilen renge göre en yüksek kontrastı sağlayacak olan siyah veya beyaz çıktısını doğrudan üretir.
Örnek kullanım yapısı şu şekildedir: ```css .button { background-color: var(--brand-color); color: contrast-color(var(--brand-color)); } ```
Mevcut sürümüne (Level 5) dair dikkat edilmesi gereken temel teknik detaylar şunlardır:
- Yalnızca Siyah veya Beyaz: Şimdilik sadece `black` veya `white` renk çıktısı verir. Özel renk listeleri veya hedef oranlar Level 6 spesifikasyonuna bırakılmıştır.
- İsim Değişikliği: Eski taslaklarda yer alan `color-contrast()` ismi ve `max` anahtar kelimesi geçerliliğini yitirmiştir; güncel standartta fonksiyonun adı `contrast-color()` olarak güncellenmiştir.
- Derleme Sonrası Maliyet Yok: JavaScript tabanlı kütüphanelere veya ek build adımlarına ihtiyaç duymadan, sayfa boyanmadan hemen önce tarayıcı tarafından hesaplanır.
CSS Color Level 5 ve Level 6 Ayrımı
Bu fonksiyon iki ayrı spesifikasyon seviyesine bölünmüş durumdadır. CSS Color Level 5, günümüzde tarayıcıların desteklediği ve bir renk girdisi alıp siyah veya beyaz çıktı veren sürümüdür. Buradaki algoritma tarayıcı tanımlıdır (UA-defined) ve genellikle WCAG 2.x bağıl luminans hesaplamasını kullanır.
Gelecek sürümlerde (Level 6), insan gözünün kontrastı algılama biçimini yazı tipi ağırlığı ve ortam ışığı gibi faktörlerle modelleyen APCA (Accessible Perceptual Contrast Algorithm) gibi daha gelişmiş algoritmaların entegre edilmesi planlanmaktadır.
Sektörel Yansımalar
Web projelerinde erişilebilirlik (a11y) denetimleri her geçen gün daha fazla önem kazanırken, geliştiricilerin kontrast hatalarını manuel olarak veya harici betiklerle çözmeye çalışması ölçeklenebilir bir yaklaşım sunmamaktadır. `contrast-color()` gibi yerel CSS çözümlerinin tarayıcılar tarafından desteklenmeye başlaması, tasarım sistemlerinin dinamik temalandırma süreçlerini hataya yer bırakmayacak şekilde otomatikleştirecektir.
Sıkça Sorulan Sorular
Eski projelerdeki color-contrast() kullanımları tarayıcılarda neden hata verir?
WCSSG taslak sürecinde fonksiyonun adı, döndürdüğü değeri daha doğru yansıtması amacıyla `color-contrast()` yerine `contrast-color()` olarak değiştirilmiş ve eski sözdizimi ile `max` anahtar kelimesi kaldırılmıştır.
Bu fonksiyon gelecekte siyah ve beyaz dışında özel renk paletlerini destekleyecek mi?
Evet, Level 5 spesifikasyonunda şimdilik sadece siyah veya beyaz çıktısı verilirken, planlanan Level 6 güncellemeleri ile aday renk listeleri ve hedef kontrast oranlarının eklenmesi hedeflenmektedir.
*Bu haber Smashing Magazine tarafından yayınlanan verilere dayanarak hazırlanmıştır.
💬 Yorumlar
Henüz yorum yok. İlk yorumu sen yap!
Yorum yapmak için giriş yapmalısınız.
🔑 Giriş Yap