Renk Kontrast Matrisi Denetleyicisi

Neden tüm renk kombinasyonlarını tek tek değil, hepsini aynı anda kontrol etmelisiniz?

WCAG erişilebilirlik yönergeleri, metin ve arka plan renkleri arasında minimum bir kontrast oranı gerektirir; aksi takdirde düşük görüşe veya renk körlüğüne sahip kullanıcılar metni okuyamayabilir. Pratikte çoğu site birden fazla marka rengi, arka plan rengi ve durum rengini bir arada kullanır —açık gri bir kart üzerinde ana renkte bir başlık, beyaz üzerinde bir uyarı rengi, renkli bir arka plan üzerinde koyu metin— ve her çifti tek tek elle kontrol etmek kolayca hataya veya gözden kaçırmaya yol açar. Bu araç, gerçekten kullandığınız tüm renkleri yapıştırmanıza olanak tanır ve olası her çift için kontrast oranını anında hesaplayarak tek bir matris halinde sunar —artık kombinasyonları tek tek kontrol etmenize gerek yok.

Oran nasıl hesaplanır — somut bir örnek

WCAG 2.1, kontrast oranını (L1 + 0,05) / (L2 + 0,05) olarak tanımlar; burada L1 ve L2 iki rengin "bağıl parlaklığı"dır (daha yüksek değer beyaza daha yakın olduğunu gösterir). Saf siyah #000000, saf beyaz #FFFFFF karşısında mükemmel bir 21:1 skoru alırken, açık gri #999999 beyaza karşı sadece 2,85:1 alır —normal metin için gereken 4,5:1 minimumunun oldukça altında. Normal metin (18px altı veya 14px altı kalın) AA ≥ 4,5:1 gerektirir, daha sıkı bir standart için AAA ≥ 7:1; büyük metin (18px+ kalın veya 24px+) AA ≥ 3:1 gibi daha gevşek bir eşiğe sahiptir.

Sonuç matrisi nasıl okunur

Matristeki her hücre, o satırın rengi ile o sütunun rengi arasındaki kontrast oranını gösterir; yeşil (AAA'yı geçer), sarı (yalnızca AA'yı geçer) veya kırmızı (başarısız) olarak renklendirilir —böylece her birini elle hesaplamak yerine sorunlu eşleşmeleri tek bakışta fark edebilirsiniz.

Kontrast, yalnızca her rengin RGB değerine göre hesaplanır —gerçek render sırasında yazı tipi kalınlığını, kenar yumuşatmayı (anti-aliasing) veya yarı saydam katmanları hesaba katmaz. Yayınlamadan önce her zaman gerçek bir cihazda tekrar kontrol edin.