2025 yılında web sitelerinin %70'i hâlâ temel WCAG kontrast kontrollerinden geçemiyor. Yıllarca tasarım sistemi araçları, erişilebilirlik lint'leri ve JavaScript kütüphaneleri kullanılmasına rağmen bu oran değişmedi. Aslında ihtiyaç duyulan şey daha iyi kütüphaneler değil, daha iyi CSS'ti. İşte contrast-color() fonksiyonu tam da bu boşluğu dolduruyor. Tek bir bildirimle tarayıcı, sayfa boyanmadan önce kontrast hesaplamasını yapıp doğru metin rengini veriyor. Hiçbir kütüphane, derleme adımı veya hidrasyon yanıp sönmesi gerekmiyor.
contrast-color() fonksiyonunun mevcut sürümü (CSS Color Level 5) oldukça basit: Bir renk giriyorsunuz, size siyah veya beyaz döndürüyor. Örneğin, bir butonun arka plan rengi neon yeşil olduğunda metin siyah, gece mavisi olduğunda beyaz oluyor. Tema çalışma zamanında JavaScript ile değiştirildiğinde metin anında uyum sağlıyor. Ancak bu fonksiyonun bazı sınırlamaları var: sadece siyah veya beyaz döndürüyor, aday renk listeleri ve hedef kontrast oranları Level 6'ya bırakılmış. Ayrıca eski adı olan color-contrast() artık çalışmıyor; 'max' anahtar kelimesi de kaldırıldı.
contrast-color() iki farklı CSS spesifikasyonunda yer alıyor. Level 5, tarayıcıların bugün desteklediği sürümü tanımlarken, Level 6 aday renk listeleri ve hedef kontrast oranları gibi genişletilmiş özellikleri içeriyor. Level 5'te kullanılan algoritma 'UA-tanımlı' olarak işaretlenmiş, yani tarayıcı hangi matematiği kullanacağına kendisi karar veriyor. Şu anda tüm motorlar WCAG 2.x göreli parlaklık formülünü kullanıyor, ancak bu 'UA-tanımlı' etiketi, gelecekte APCA gibi daha gelişmiş bir algoritmaya geçişi kolaylaştırmak için tasarlanmış.
Uzmanların Görüşleri
APCA (Erişilebilir Algısal Kontrast Algoritması), insan gözünün kontrastı nasıl algıladığını daha iyi modelleyen bir yöntem. Ancak APCA'nın geleceği belirsiz: WCAG 3 taslağından 2023 ortasında çıkarıldı ve bazı Chromium geliştiricileri bu algoritmanın deneysel bayrağının kaldırılmasını talep etti. Buna rağmen, 'UA-tanımlı' yapı sayesinde tarayıcılar, hangi algoritma kazanırsa kazansın, mevcut kodları bozmadan uyum sağlayabilir. Bu, contrast-color() fonksiyonunu hem bugünün hem de geleceğin erişilebilirlik ihtiyaçlarına hazır, sağlam bir çözüm haline getiriyor.
