Kontrast arayüzleri ve okunabilirlik

1) Neden kontrast

• Bilişsel yükü ve yorgunluğu azaltır,
• arayüz tarama hızını artırır,
• Görme ve renk bozukluğu olan kişiler için erişilebilirliği artırır,
• Birbiriyle ilişkili senaryolardaki hataları azaltır (ödemeler, formlar, onaylar).

2) Temel kavramlar ve formüller

2. 1 WCAG ile kontrast

• Kontrast = (L1 + 0. 05 )/( L2 + 0. 05), burada 'L1 ≥ L2', 'L' göreceli parlaklıktır (0.. 1).

2. 2 Göreceli parlaklık (sRGB)

1. R, G, B bileşenlerini 0 aralığında getirin.. 1.

• Eğer'c ≤ 0. 04045 ', sonra'c _ lin = c/12. 92`
• Aksi takdirde'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Parlaklık: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin'

2. 3 Renk temsilleri

HSL/HSV - manuel ayarlama için uygundur, ancak algısal olarak düzgün değildir.
Lab/LCH/OKLCH - insan algısına daha yakın; OKLCH, okunabilirliği korurken, hafiflik/doygunluğun sistematik olarak değiştirilmesi için uygundur.

3) Normlar ve hedefler (WCAG 2. 2)

Metin ≥ 14 pt kalın veya ≥ 18 pt (normal): kontrast en az 3:1 (AA).
Metnin geri kalanı: kontrast en az 4. 5:1 (AA).
AAA (okunabilirlik artışı): Düz metin için 7:1; 4. Büyük bir tane için 5-1.
İkonografi ve önemli fotoğrafik olmayan öğeler (giriş alanlarının sınırları, onay kutuları, anahtarlar, hata göstergeleri): Arka plan ile 3:1 dönüm noktası.
Durumlar (hover/focus/pressed/disabled), durumlar arasında veya bir arka plan ile en az 3:1 ayırt edilebilir, ayrıca açık fotoğrafik olmayan göstergeler (bağlantı altı, gölgeler/çerçeveler, kalınlık değişimi) olmalıdır.

4) Tasarım sistemi: kontrast belirteçleri

Tasarım sisteminin kontrastı belirteçlerin bir özelliği olarak kaydetmesini öneririz.

• 'fg/birincil' ↔ 'bg/baz' ≥ 7:1 (kritik metin için AAA)
• 'fg/secondary' ↔ 'bg/base' ≥ 4. 5:1
• 'fg/sessiz' ↔ 'bg/ince' ≥ 3:1 (servis metni)
• 'border/default' ↔ 'bg/base' ≥ 3:1 (alanların sınırları, kartlar)
• 'Interactive/default' ↔ 'bg/base' ≥ 4. 5:1 (bağlantılar/düğmeler)
• 'Interactive/disabled' etkin durumları taklit etmemelidir; Kontrast azaltma ve imleç/ARIA niteliklerini kullanın.

• Temanın temel hafifliği (L), daha sonra katmanlar/yüzeyler için 'Δ L' sapmaları ('bg/ince', 'bg/yükseltilmiş'),
• Testlerde minimum kontrast çiftlerini sabitleyin.

5) Işık ve karanlık temalar

Işık teması: Metin neredeyse siyahtır (saf bir # 000 değil, sıcak/soğuk bir gölge), arka plan "ışıltıyı" azaltmak için beyazdan hafif renklidir.
Karanlık tema: temiz # 000 arka plandan kaçının - L≈0 ile derin grafit/kömür. 12–0. 16 parlamayı azaltır; L≈0 için beyaz metni yumuşatın. 9.
Her iki temada da aynı zıt hedefleri tutmak; Renk aksanlarının koyu bir arka planda okunabilirliğini kaybetmesine izin vermeyin (genellikle 'Δ L' kayması ve doygunlukta bir azalma gerekir).

6) Resimlerde ve videolarda metin

Metin altında kaplamalar (degrade/yarı saydam katman %40-60) veya kalıplar kullanın.
En az 4 tane yapın. Metin ve kalıbın yerel arka planı arasında 5:1.
Dinamik video için - çerçevenin parlaklığını analiz ederek (merkezi/arka plan alanını örnekleyerek) uyarlanabilir arka plan/kaplama.

7) Durumlar ve etkileşim

Referanslar yalnızca renkle ayırt edilmemelidir: varsayılan vurgulu/odaklama + kontrastlı ≥ 3:1 ile düz metin.
Düğmeler: metin ve simge ≥ 4. 5:1 doldurmak için; 3:1 ≥ çevreye doldurun.
Hatalar/başarı/uyarılar: renge güvenmeyin; Simgeler/metin istemleri ekleyin; En az 4 metin kontrastı sağlayın. 5:1.

8) Renk bozukluğu olan kişiler

• Deuteranopia/Protanopia (kırmızı-yeşil bölge): Ek işaretler olmadan "kırmızı ve yeşil" kombinasyonlardan kaçının.
• Tritanopi: Ayrı ayrı kontrol etmek için mavi-sarı çiftler.
• Şekilleri ve grafikleri net hale getirin: metin etiketleri, farklı konturlar/işaretleyiciler, dolgu desenleri, parça başlıkları.

9) Tipografi ve arka plan

Gövde boyutu: 14-16 px minimum (web), içerik bölgeleri için 16-18 px.
Satır aralığı 1. 4–1. 6, yüksek kontrastlı bir arka plana karşı okunabilirliği geliştirir.
Yetersiz kontrastta ince stillerden kaçının.
Renkli arka planlardaki metin: Hedef orana ulaşmak için arka plan doygunluğunu azaltın ve/veya açıklığı artırın.

10) Grafikler, tablolar, grafikler

Çizgiler/sütunlar ≥ 3:1'den ızgaraya/arka plana.
Eksen etiketleri ve efsaneler ≥ 4. 5:1.
Rengin ötesinde ayırt edilebilir şekiller/desenler kullanın.

11) Dinamik/adaptif kontrast

Otomatik kontrast: seçilen dolguya metnin kontrast rengini hesaplayın (örn. VIA OKLCH: 'L'ile eşleşerek 4'e ulaşın. 5:1).
Sistem ayarları: 'prefers-contrast', 'forced-colors', yüksek kontrastlı OS modlarına saygı gösterin.
Kişiselleştirme: Uygulamada "Yüksek kontrast" ayarı ('Δ L'nin güçlendirilmesi, marka aksanlarının form/simgeler aracılığıyla marka kimliğini korurken daha nötr olanlarla değiştirilmesi).

12) Kontrol süreçleri ve otomasyon

12. 1 Tasarımcılar için

Düzenlerde kontrastı kontrol edin (hem temalarda hem de anahtar arka planlarda).
Bileşenlere "kontrast yuvalarını" girin (başlık/birincil/ikincil/ipucu).
Her bileşen için belge geçerli arka plan bağlamları.

12. 2 Geliştiriciler için

Birim yardımcıları: Kontrast hesaplama işlevi ve belirteç çiftleri için testlerde iddia eder.
Kontrast metrikleri denetleyen görsel anlık görüntüler (ekran oluşturma + örnek L1/L2 hesaplama).
Stil gömlekleri: "Ham" rengin yasaklanması, yalnızca belirteçler aracılığıyla.

12. 3 V CI/CD

Temalar ve durumlardaki tüm 'fg/bg' çiftlerini denetler.
Bileşen, değişken, tema ve gerçek değeri olan ihlal raporu (örn. 3. 9:1 gerekli 4 ile. 5:1).

13) iGaming özellikleri (isteğe bağlı)

Parlak promosyon afişleri ve turnuva kartları genellikle metni yiyor. Plaka/kaplama ve arka plan doygunluk sınırlaması gereklidir.
Kritik bildirimlerin sistem unsurları (18 +, limitler, riskler) - aksine AAA.
Skor tablolarında/katsayılarda: sayılar ve işaretler "+/-" ≥ 4. 5:1, galibiyeti vurgulamak - sadece renkli değil (simgeler/etiketler).

14) Antipatterns

Durumu ayırt etmek için sadece renge güvenin.
Kontrastı hesaplamadan renkli bir arka plan üzerinde ince gri yazı tipleri.
Dark Mode'da "Dark on Dark", promosyon alanlarında "Bright on Bright".
Arka plandaki metin, detaylar/gürültü olmadan ölür.

15) İnceleme kontrol listesi

Temel metin

• ≥ 4. 5:1 (normal), ≥ 3:1 (büyük/yağlı).

Bağlar/Düğmeler

• Düğme metni ≥ 4. 5:1 doldurmak için.
• Ayırt edilebilir 3:1 ≥ durumlar veya açık göstergeler.

Simgeler/Kenarlıklar

• ≥ 3:1 arka plana.

Karanlık/Açık Temalar

• Aynı kontrast hedeflerine ulaşılır.

Medya arka planları

• Kaplama/plaka, katsayı korunur.

Kullanılabilirlik

• Renk dışında fotoğrafik olmayan özellikler de vardır.

Otomasyon

• CI/CD'de belirteçler ve bileşenler üzerinde kontrast testleri.

16) Belirteç enjeksiyonu (gösterim örneği)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

Not: yaklaşık değerler; Son olanlar, belirli bir konudaki kontrast hesaplanarak seçilir.

17) Takım belgeleri

Yönergelerde şunları belirtin: kontrast hedefleri, true/false çiftleri örnekleri, temel bileşenler için 'fg × bg' matrisi, ortam arka planları için kurallar ve Yüksek Kontrast modunun nasıl etkinleştirileceği.
İstisnalar ve Nedenler sayfasını canlı tutun (örneğin, izin verilen 3. Büyük bir ekran başlığının dar durumunda 8:1).

Kısa özet

Kontrast ölçülen bir parametredir, tat parametresi değildir. Hedefler belirleyin (AA/AAA), bunları belirteçlerle yönetin (tercihen OKLCH'de), otomatik olarak CI'da ve görsel olarak düzenlerde kontrol edin, koyu/açık temaları ve renk görme bozukluğu olan kişileri dikkate alın. Bu, okunabilirliği garanti eder, hataları azaltır ve dönüşümü artırır.