Renk Kontrast Denetleyici
İki rengi seç; oranı, WCAG rozetlerini ve gerçek bir sayfada nasıl göründüğünü anında gör. Yetersizse tek tıkla düzelten bir renk önerir. Aynı çifti renk körü bir müşterinin gözünden de gösterir.
SAMSUN · DİJİTAL
Büyük başlık böyle görünür
Normal gövde metni 16 piksel. Müşterinin sitede en çok okuyacağı boy budur. Burada zorlanıyorsa kontrast yetersiz.
Küçük metin, 13 piksel: dipnot, açıklama, form uyarısı, fiyat altı bilgi.
Renk körlüğü simülasyonu erkeklerin ~%8'i bu listeden birini yaşıyor
Her kutu aynı renk çiftinin o görme tipindeki hâli. Altındaki oran, o kişinin gerçekte gördüğü kontrast.
Çoklu renk matrisi tüm marka renklerini birbiriyle karşılaştır
APCA: yeni nesil ölçüm WCAG 3 taslağı
APCA, insan gözünün ışığı nasıl algıladığını klasik orandan daha doğru modeller. Lc 90+ her yerde güvenli, 75 gövde metni, 60 büyük başlık, 45 ikon ve kalın büyük yazı, 30 sadece dekoratif.
İpucu: renk kutusuna tıklayıp seçebilir ya da HEX kodunu doğrudan yapıştırabilirsin. Altta çıkan öneri renklerine tıklayınca anında uygulanır.
Kontrast neden para kazandırır
- Okunmayan yazı satmaz: açık gri üzerine açık gri fiyat etiketi, müşterinin sepete gitmesini engelleyen en sessiz sebeptir.
- Telefonda güneş altında: ekran parlaklığı düşükken 4.5:1 sınırının altındaki her şey kaybolur; masaüstünde güzel görünmesi yetmiyor.
- Yaş faktörü: 40 yaş üstü bir gözün ihtiyacı olan kontrast, 20 yaşındakinden belirgin biçimde yüksektir. Hedef kitlen yaşlıysa AAA'ya (7:1) çık.
- Google da bakıyor: Lighthouse erişilebilirlik puanı düşük kontrastı doğrudan cezalandırır; Core Web Vitals raporunda karşına çıkar.
Renkler doğru, peki tasarımın geri kalanı?
Erişilebilir, hızlı ve satan bir arayüz mü istiyorsun? Samsun'dan uzaktan da olur, yüz yüze de.