- CSS
contrast-color(), düğme arka planı gibi sık değişen renklere göre tarayıcının siyah veya beyaz metin rengini seçmesini sağlayarak renk çiftlerini ayrı ayrı yönetme yükünü azaltır
color: contrast-color(var(--button-color)); gibi bir temel renk verildiğinde, arka plan rengi değiştikçe daha yüksek kontrast sağlayan seçenek yeniden hesaplanır- Şu anda Safari Technology Preview,
#317CFF arka planında siyah metni seçmek için WCAG 2 kontrast algoritmasını kullanıyor; ancak insan algısına göre beyaz daha doğal görünebilir
- Bu özellik erişilebilirliği otomatik olarak garanti etmez; palet, yazı boyutu, font kalınlığı ve
prefers-contrast gibi unsurlar için tasarım doğrulaması hâlâ gereklidir
- CSS Working Group, WCAG 3 kontrast algoritması tartışmaları sonuçlanana kadar bu özelliği siyah/beyaz seçimi ile sınırlı sunuyor; daha karmaşık renk seçme araçları daha sonra genişletilebilir
contrast-color() ile azalan renk yönetimi yükü
- Bir web sitesi veya web uygulamasında farklı arka plan renklerine sahip düğmeler oluştururken, arka plan koyuysa beyaz metin, açıksa siyah metin kullanmak gerekir
- Daha önce
--button-color ve --button-text-color birlikte tanımlanarak renk çiftleri yönetilirdi; büyük projelerde veya birden çok ekibin çalıştığı ortamlarda bu kombinasyonları sürekli doğru tutmak zor olabilir
contrast-color(), CSS’te bir temel renk verildiğinde tarayıcının siyah ve beyaz arasından daha yüksek kontrast sağlayanı seçmesini sağlar
color: contrast-color(purple);
- Düğmelerde arka plan rengi değişkeni ile
contrast-color() birlikte uygulanabilir
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
}
- Bu yaklaşımda yalnızca tek bir arka plan rengi tanımlamak yeterlidir; metin rengini tarayıcı belirler
Durum renklerini de tek değişkenden türetmek
- Relative Color Syntax ile birlikte kullanıldığında, temel düğme renginden hover rengi üretilebilir ve her durum için metin rengi de
contrast-color() ile hesaplanabilir
:root {
--button-color: purple;
--hover-color: oklch(from var(--button-color) calc(l + .2) c h);
}
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
text-box: cap alphabetic; /* vertically centers the text */
}
button:hover {
background-color: var(--hover-color);
color: contrast-color(var(--hover-color));
}
WCAG 2 tabanlı hesaplamanın yarattığı tuhaf sonuçlar
contrast-color() tüm erişilebilirlik kontrastı sorunlarını otomatik olarak çözmez- Bazı arka plan renkleri siyah ya da beyazla yeterli kontrast oluşturmayabilir; bu yüzden tasarımcı, geliştirici ve test ekiplerinin kontrolü gerekir
- Mayıs 2025 itibarıyla Safari Technology Preview uygulaması WCAG 2 algoritmasını kullanıyor
#317CFF mavi arka planında WCAG 2, siyah metin kontrastını 5.45:1 olarak hesaplıyor- Aynı arka planda beyaz metin kontrastı 3.84:1 olarak hesaplanıyor
contrast-color() daha büyük sayı olan siyahı seçiyor
- Ancak insan algısına göre bu kombinasyonda beyaz daha iyi görünebilir ve WCAG 2 renk kontrastı algoritması uzun süredir eleştiriliyor
APCA ve WCAG 3 ile süren kontrast algoritması tartışması
- Accessible Perceptual Contrast Algorithm(APCA), WCAG 3 içinde yer alabilecek adaylardan biri
- APCA Contrast Calculator,
#317CFF arka planında siyah metni Lc 38.7, beyaz metni Lc -70.9 olarak değerlendiriyor
- APCA puanında negatif değer, metnin arka plandan daha açık olduğu anlamına gelir
- Kontrast büyüklüğü işaret dikkate alınmadan 38.7 ve 70.9 olarak karşılaştırılır
- Bu sonuca göre beyaz metnin kontrastı daha yüksektir
- APCA, basit matematiksel oranlardan ziyade algıya dayalı kontrastı önemser ve insanların renk ile parlaklığı doğrusal algılamadığını hesaba katar
- CSS standardı şu anda mevcut algoritmanın kullanılmasını gerektiriyor, ancak gelecekte başka kontrast algoritmalarının eklenebileceğine dair not içeriyor
- WCAG 3’te hangi algoritmanın kullanılacağı ve aday algoritmaların lisanslarının nasıl ele alınacağı konusu tartışılmaya devam ediyor
Gerçek tasarımda birlikte kontrol edilmesi gereken koşullar
contrast-color() daha iyi rengi seçmekle yeterli kontrastı garanti etmek aynı şey değildir- Özellikle orta tonlu renklerde algoritmalar arasındaki sonuç farkı büyüyebilir
- Daha yüksek kontrast isteyen kullanıcılar için
prefers-contrast medya sorgusu birlikte kullanılabilir
@media (prefers-contrast: more) {
/* styling with more contrast */
}
- Örnekte fidanlık web sitesinin marka düğmesi arka plan rengi olarak
#2DAD4E kullanılıyor
- APCA’ya göre beyaz metinle kontrastı Lc -60.4
- Bunun yeterli olup olmadığı yazı boyutuna ve font kalınlığına bağlı
- APCA, WCAG 2 oranı yerine Lc -108 ile 106 arasında tek bir puan kullanır
- APCA Readability Criterion, yazı boyutu ve kalınlığı seçiminde yardımcı olmak için Bronze, Silver ve Gold düzey hedefler sunuyor
- Örnek hesaplamada beyaz metin ile
#2DAD4E kombinasyonu, 24px metinde font-weight 400 ve üzerindeyse çalışıyor; font-weight 300 kullanılacaksa en az 41px gerekiyor
- Daha yüksek kontrast talep eden kullanıcılar için açık mod ve koyu modda ayrı renkler tanımlanabilir
- Açık mod: daha koyu yeşil ve beyaz metin, Lc -76.1
- Koyu mod: daha açık yeşil ve siyah metin, Lc 75.2
--button-color: #2DAD4E; /* brand green background */
@media (prefers-contrast: more) {
@media (prefers-color-scheme: light) {
--button-color: #419543; /* darker green background */
}
@media (prefers-color-scheme: dark) {
--button-color: #77CA8B; /* lighter green background */
}
}
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
font-size: 1.5rem; /* 1.5 * 16 = 24px at normal zoom */
font-weight: 500;
}
- Mevcut durumda
contrast-color() WCAG 2 algoritmasıyla çalıştığı için bu örnek web sitesinde kullanımı zor olabilir
- Marka rengi daha koyu bir yeşilse ve siyah/beyaz seçimi doğru sonuç veriyorsa, bazı projelerde bugün bile faydalı olabilir
- enabled/disabled, light/dark mode,
prefers-contrast gibi çok sayıda durum veya seçenekte renk tanımlarken contrast-color() özellikle yardımcı olur
Önce siyah/beyaz seçimiyle sınırlandırılmasının nedeni
- Mevcut
contrast-color(), Safari Technology Preview 122’de bulunan color-contrast()a kıyasla işlev olarak büyük ölçüde sadeleştirildi
- CSS Working Group, WCAG 3 kontrast algoritması tartışmaları sonuçlanmadan önce aracı, temel renge karşılık gelen siyah veya beyazı seçmekle sınırlı tutuyor
- Seçeneklerin siyah/beyazla sabitlenmesi, ileride WCAG 2 algoritması değişse bile web sitelerinin bozulma olasılığını azaltıyor
- Gelecekte tarayıcının kullanıcı tanımlı renk listesinden seçim yapması veya istenen kontrast düzeyinin belirtilmesi gibi daha güçlü araçlar gelebilir
contrast-color(), yalnızca metin rengi için değil; arka plan, kenarlık ve diğer renk kullanan özelliklerde de kullanılabilir
Henüz yorum yok.