Renk

Erişilebilir renk

Bir kullanıcı arayüzü bileşeninin varlığını veya durumunu belirtmek için yalnızca renk kullanmayın: Farklılaştırmaya yardımcı olması için simge ve/veya şekil kullanın. Başarıyı/hataları YALNIZCA renkle belirtmeyin. Simge veya metin kullanın.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Kontrast

• Minimum kontrast standartları: Normal metin için 4,5:1, büyük metin veya simgeler için 3:1 oranını koruyun.
• Metin dışı kontrast standartlarını karşılayın: Kullanıcı arayüzü bileşen sınırları ve durumları için minimum 3:1 kontrast oranını koruyun.
  • Buna, bir kullanıcı arayüzü bileşeninin sınırını oluşturan veya varlığını gösteren görsel öğeler (kenarlıklar, arka planlar, kutu gölgeleri, alt çizgiler) dahildir (ör. giriş alanı kenarlıkları).
  • Buna, bir bileşen içindeki etkin durumları gösteren görsel öğeler de dahildir (ör. onay kutusu onay işaretleri veya anahtar düğmeleri).
  • Uyarı: Metin dışı öğelerde 3:1 kontrast oranını karşılamak, minimalist tasarımlarda zor olabilir. Yumuşak geçişler veya hafif iç/dış gölgeler, erişilebilirlik gereksinimlerini karşılarken görsel sınırları yumuşatabilir.
• prefers-contrast seçeneğini yalnızca gerektiğinde kullanın: Tasarımda, güçlendirilmesi gereken düşük kontrastlı vurgular (ör.ince kenarlıklar, sönük ikincil metinler) kullanılıyorsa @media (prefers-contrast: more) seçeneğini kullanın. Temel kontrastı karşılayan çoğu sitede bu seçeneğe gerek yoktur.

Açık ve koyu renk şemaları

• Açık ve koyu renk şemalarını destekleyin: @media (prefers-color-scheme: dark) özelliğini kullanın ve bunu color-scheme CSS özelliğiyle eşleştirerek form kontrolleri, kaydırma çubukları ve kullanıcı aracısı tarafından oluşturulan diğer yüzeylerin eşleşmesini sağlayın. Daha fazla bilgi için Koyu mod bölümüne bakın.

Zorunlu Renkler Modu

• Zorunlu Renkler Modu'nu destekleme: Zorunlu Renkler Modu'nda (Windows'da Yüksek Kontrast) tarayıcı, yazar renklerini sistem anahtar kelimeleriyle geçersiz kılar ve background-image, box-shadow ve border-image öğelerini kaldırır. @media (forced-colors: active) kullanarak renk jetonları için sistem rengi yedeklerini tanımlayın.
• forced-color-adjust: none özelliğini yalnızca rengin önemli bir bilgi olduğu durumlarda kullanın (söz dizimi vurgulayıcı, renk seçici paleti). Sırf estetik açıdan güzel göründüğü için forced-color-adjust: none KULLANMAYIN.
• Kenarlıkları, ayırıcıları veya durumu belirtmek için background-image, box-shadow ya da border-image kullanmayın: Bunlar zorunlu renklerde (ve genellikle baskıda da) kaybolur. Kullanmanız gerekiyorsa zorunlu renkler modunda sistem rengi anahtar kelimeleri (CanvasText, LinkText, ButtonText, Highlight, GrayText vb.) içeren outline veya border gibi bir alternatif olduğundan emin olun.

Renk tonları oluşturuluyor

Tonları dinamik olarak oluşturmadan önce mevcut, önceden tanımlanmış bir tasarım jetonunu kullanıp kullanamayacağınızı kontrol edin. Bu sayede tasarımcılar daha fazla kontrol sahibi olur ve tutarlılık sağlanır.

Dinamik olarak daha açık veya daha koyu renkler oluşturmanız gerekiyorsa:

• oklch/oklab veya lch/lab'te yalnızca parlaklık kanalını AYARLAMAYIN (ör. oklab(from var(--primary) 0.9 a b)). Teorik olarak doğru yöntem bu olsa da tarayıcılar henüz gamut eşlemeyi uygulamadığından sonuçta elde edilen renk tahmin edilemez.
• Beyaz veya siyahla karıştırmak için color-mix() kullanabilirsiniz (tercihen oklab içinde). Bu, rengi güvenli bir şekilde gamut içinde tutar ancak renkleri aşırı doygunlaştırma ve soluk tonlar ile gölgeler oluşturma eğilimindedir.
• İkisi arasında denge sağlamak için açıklık ayarını diğer yöntemlerden herhangi biriyle (ör. color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) birleştirebilirsiniz ancak açıklık ayarında% 30'un üzerine çıkmaktan kaçının.