Erişilebilirlik için renk kontrastı: WCAG 2.1, APCA ve gerçekten ne çıkarmalısınız

WCAG 2.1, normal gövde metni için 4,5:1 kontrast oranı ve büyük metin (18 punto+ normal veya 14 punto+ kalın) için 3:1gerektirir. Formül, ABD’de (ADA ile ilgili), AB’de (EAA) ve dünyanın büyük bölümünde fiili yasal standarttır. Aynı zamanda WCAG 2.2’ye giremeyen bir yenileme (APCA) doğuran iyi belgelenmiş kusurları vardır. Bu rehber güncel pratik tabloyu açıklar.

WCAG 2.x kontrast formülü

WCAG 2.0’da (2008) tanımlanmış ve 2.2’ye kadar değişmemiştir:

kontrast = (L_açık + 0.05) / (L_koyu + 0.05)
L = doğrusal ışık sRGB'de göreli parlaklık (0-1)

Sonuçlar 1:1 (özdeş renkler) ile 21:1 (saf beyaz üzerine saf siyah) arasında değişir.

WCAG eşikleri (AA uyumu için):

• 4,5:1 — gövde metni, simgeler, form kontrolleri.
• 3:1 — büyük metin (≥ 18 punto veya ≥ 14 punto kalın), UI bileşenleri.
• AAA hedefleri daha katıdır: 7:1 gövde, 4,5:1 büyük. Yalnızca belirli bağlamlarda gereklidir.

Formülün yanlış olduğu yerler

Üç belgelenmiş sorun:

1. Orta ton duyarsızlığı. Formül, gerçek algıda çok farklı görünen orta ton çiftlerine eşit kontrast puanları verir.
2. Renk körü. Eşit parlaklıklı tonlar (aynı parlaklıkta kırmızı ve yeşil) 1:1 kontrast alır, ancak dikromatik kullanıcılar bunları zayıf biçimde ayırt edebilir.
3. Yazı tipi ağırlığı yok sayılır. İnce yazı tipleri, aynı boyuttaki kalın yazı tiplerinden daha fazla kontrast gerektirir; WCAG ağırlık için kredi vermez.

APCA: WCAG 2.2’ye giremeyen yenileme

APCA (Accessible Perceptual Contrast Algorithm), Andrew Somers tarafından WCAG 3.0 çalışma taslağı için geliştirilmiş önerilen yeni nesil kontrast metriğidir. Yukarıdaki sorunları ele alır ve gerçek kullanıcı çalışması verilerine karşı çok daha doğrudur.

APCA puanları −108 ile +106 arasında değişir. Eşikler:

• Lc 75 — gövde metni (WCAG’ın 4,5:1’ini değiştirir).
• Lc 60 — büyük metin veya başlıklar (3:1’i değiştirir).
• Lc 45 — içerik dışı metin (dekoratif, telif hakkı satırları).

APCA, insan gözlerinin iki durumu farklı işlemesi nedeniyle yönlere göre farklı eşikler verir. WCAG’ın simetrik formülü bunu kaçırır.

2026’da ne kullanılacak

İki iz yaklaşımı:

1. En az WCAG 2.1 AA’yı geçin. Yasal standarttır. Standart oran formülünü kullanın, 4,5:1 gövde / 3:1 büyük hedefleyin. Araçlar: npm i wcag-contrast, tarayıcı DevTools.
2. APCA’yı bir akıl kontrolü olarak kullanın. WCAG geçtiğinde ama sonuç öznel olarak zayıf göründüğünde APCA genellikle işaretler.

Somut öneriler

• Gövde metni: beyaz üzerine #1a1a1a ~17:1 verir — hoş, açıkça okunabilir.
• Devre dışı / yer tutucu metin: WCAG muaf tutar, ancak kullanıcılar hâlâ okumak zorundadır. Minimum 3:1 hedefleyin.
• Düğmeler: metin ile arka plan 4,5:1; kenarlık ile sayfa arka planı 3:1.
• Odak göstergeleri: odak çerçevesi bitişik arka plana karşı 3:1.
• Koyu mod:APCA asimetriktir — koyu mod için biraz farklı token’lar gerekebilir. Yalnızca renkleri tersine çevirmeyin.

Ne atlayacağınız

• Kontrastı durum için tek sinyal olarak kullanmayın. Hata durumları kontrast ve başka ipucu gerektirir.
• Refleks olarak AAA hedeflemeyin.WCAG’ın kendi kılavuzu AAA’nın “tüm siteler için genel politika olarak önerilmediğini” söyler.
• Otomatik oluşturulan renk ramplarına eleştirisiz güvenmeyin. Her bitişik çifti doğrulayın.

Pragmatik iş akışı

Tasarım zamanında: tasarım araçlarındaki WCAG kontrast denetleyicisini kullanın. 4,5:1 / 3:1 minimumlarına ulaşın.

Kod zamanında: tasarım token’larını wcag-contrastile lintleyin. Gerileme olduğunda CI’yi başarısız kılın.

QA zamanında: gerçek ekran okuyucu ve klavye navigasyon testi. Kontrast, erişilebilirliğin küçük bir dilimidir.

Çalışılmış örnek: “geçen” bir marka rengi

Marka teal’i #3aa6a0, beyaz arka planda. WCAG kontrastı: 2,99:1 — gövde metni AA başarısız. APCA: Lc 52”yalnızca içerik dışı metin veya 24 piksel üzeri için kullan.” Her iki metrik hemfikirdir: geçmez.

Bir adım koyulaştırmak #2f8682: WCAG 4,52:1 (AA geçer), APCA Lc 67 (büyük metin için geçer, gövde marjinal). Tek hex basamak değişikliği bileşeni başarısızdan geçere taşır.

Yaygın hatalar

• Yalnızca beyaza karşı test etmek. Her çift kendi kontrolüne ihtiyaç duyar.
• Görüntüler üzerindeki metni yok saymak. Fotoğraflar üzerindeki hero başlıkları neredeyse her zaman bir yerde başarısız olur. Yarı saydam koyu katman, metin gölgesi veya düz panel kullanın.
• Okunabilirlik için hover durumlarına güvenmek.Statik durum başarısızsa hover kurtarmaz.
• Metin için düşük alfa değeriyle rgba() kullanmak.Renkli arka planda alfa < 0,8 neredeyse her zaman başarısız olur.
• Renk körü simülasyonunu erişilebilirlik testi olarak ele almak.Kontrastın yeterli olup olmadığını değil, renklerin ayırt edilebilir olup olmadığını test eder. Her iki kontrol da gereklidir.

Formülün doğrusallaştırdığı temel renk alanı mekaniği için bakınız CSS renk biçimleri rehberi.