Disleksi-Dostu Web: Font, Renk ve Aralık Seçimleri

Disleksi-Dostu Web: Font, Renk ve Aralık Seçimleri

Kısa cevap: Disleksi, dünya nüfusunun yaklaşık %10'unu etkileyen nörolojik temelli bir okuma güçlüğüdür. Türkiye'de bu sayı 8 milyonu aşıyor. Disleksili kullanıcılar için doğru font seçimi (OpenDyslexic, Lexie Readable, Arial, Verdana), satır aralığı (1.5+), harf aralığı (0.12em+), kelime aralığı (0.16em+), sarı/krem arka plan ve animasyon durdurma okuma deneyimini dramatik şekilde iyileştirir. Aşağıda CSS örnekleri + Erişilebilir Çerez "Disleksi Profili" ile tek tıkla uygulama yer alıyor.

İçindekiler

• Disleksi nedir?
• Disleksi-dostu fontlar
• Satır, harf ve kelime aralığı
• Renk ve kontrast — sarı/krem zemin neden işe yarar?
• Animasyon ve dikkat dağıtıcı içerikler
• CSS örnekleri — pratik uygulama
• Erişilebilir Çerez "Disleksi Profili"
• Sıkça Sorulan Sorular

Disleksi nedir?

Disleksi (Developmental Dyslexia), zeka düzeyi normal veya üzeri olan bireylerin harfleri ve sözcükleri tanıma + doğru okuma + akıcı okuma süreçlerinde zorlandığı bir öğrenme güçlüğüdür. Dünya Sağlık Örgütü (WHO) bunu bir engel olarak tanır — yani disleksi-dostu tasarım erişilebilirlik kapsamındadır.

Yaygın belirtiler

• Benzer harflerin (b/d, p/q) karıştırılması
• Sözcük içi harf sırasının değişmesi (kalem → kelma)
• Satır atlama / aynı satırı tekrar okuma
• Uzun metinden kaçınma + hızlı yorulma
• Yüksek kontrast (siyah/beyaz) zorlanma

Web'de pratik etki

Disleksili bir kullanıcı için yoğun, küçük puntolu, dar satır aralıklı bir blog yazısı anlamsız bir harf yığını gibi görünebilir. Aynı içerik OpenDyslexic font + 1.5 satır aralığı + krem zemin ile kolayca okunur hale gelir.

Disleksi-dostu fontlar

1. OpenDyslexic (Ücretsiz, açık kaynak)

Açık kaynak font ailesi. Harflerin alt kısmı kalınlaştırılmış — bu sayede harfler "yere yapışır" ve b/d, p/q karışıklığı azalır. Türkçe karakterler (ı, İ, ş, ğ, ü, ö, ç) tam destekli.

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-display: swap;
}

2. Lexie Readable (Ücretli)

K-Type tarafından geliştirilen, disleksi araştırmacılarıyla test edilmiş font. Tek katlı 'a' ve tek katlı 'g' harf formları sayesinde algı kolaylığı sağlar.

3. Sistem fontları (Ücretsiz, hızlı)

Disleksili kullanıcıların büyük bölümü için sistem fontları da iyi sonuç verir — ek yazılım kurulumu gerektirmez:

• Arial — geniş harf gövdeleri, net ayırt edilebilirlik
• Verdana — geniş aralık, yüksek x-yüksekliği
• Tahoma — Verdana'ya benzer, daha kompakt
• Comic Sans MS — disleksi topluluğunda yaygın tercih (tasarım eleştirisine rağmen)

Kaçınılması gereken fontlar

• Times New Roman (serif, sıkışık)
• Georgia (serif, dekoratif)
• Courier (monospace, yapay aralıklar)
• Italic / Kursif varyantlar (harf ekseni eğik)

Satır, harf ve kelime aralığı

WCAG 2.1 başarı kriteri 1.4.12 Text Spacing disleksili + düşük görüşlü kullanıcılar için özel olarak hazırlanmıştır:

Paragraf genişliği

Bir satırın maksimum 80 karakter (en iyisi 66) olması okuma kolaylığını artırır. CSS'te:

p { max-width: 66ch; }

ch birimi, geçerli fontun "0" karakteri genişliğine eşittir — font değişse bile orantı korunur.

Renk ve kontrast — sarı/krem zemin neden işe yarar?

Tam beyaz arka plan üzerinde tam siyah metin (#000 / #fff) maksimum kontrast olsa da disleksili birçok kullanıcı için göz kamaşması + glare etkisi yaratır. Bu da harfleri "titriyormuş" gibi gösterebilir (Scotopic Sensitivity / Meares-Irlen Syndrome).

Önerilen renk kombinasyonları

• Krem zemin + koyu metin: #fdf6e3 / #333 — kontrast 11.6:1 (AAA)
• Açık sarı zemin + koyu mavi metin: #fffacd / #1a1a4f — kontrast 14.2:1 (AAA)
• Pastel mavi zemin + koyu metin: #e3f2fd / #1a237e — kontrast 9.4:1 (AAA)
• Açık gri zemin + koyu metin: #f5f5f5 / #2b2b2b — kontrast 11.1:1 (AAA)

Kullanıcı tercihine bırakın

En iyisi varsayılan beyaz zemin + kullanıcının seçebileceği renk profilleri sunmak. Erişilebilir Çerez widget'ı 5 hazır profil + 4 renk filtresi sunar.

Animasyon ve dikkat dağıtıcı içerikler

Disleksili kullanıcılar için dikkat dağıtıcı animasyonlar okuma sürecini kesintiye uğratır:

• Otomatik oynatılan video / GIF
• Kayan haber bantı (ticker)
• Yanıp sönen reklam
• Parallax scroll
• Sürekli dönen carousel

prefers-reduced-motion

WCAG 2.3.3 ve CSS media query ile sistem ayarını saygılayın:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Erişilebilir Çerez widget'ında "Animasyon Durdur" özelliği bu kuralı tek tıkla aktif eder.

CSS örnekleri — pratik uygulama

Tüm site için disleksi-dostu varsayılan

:root {
  --dyslexia-font: 'Arial', 'Verdana', sans-serif;
  --dyslexia-bg: #fdf6e3;
  --dyslexia-text: #2b2b2b;
}

body {
  font-family: var(--dyslexia-font);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  word-spacing: 0.16em;
  background: var(--dyslexia-bg);
  color: var(--dyslexia-text);
}

p {
  max-width: 66ch;
  margin-bottom: 1.5em;
}

h1, h2, h3 {
  line-height: 1.3;
  letter-spacing: 0;
}

a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

Kullanıcı tercihi (toggle ile)

body.dyslexia-mode {
  font-family: 'OpenDyslexic', 'Arial', sans-serif;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.12em;
  word-spacing: 0.20em;
  background: #fffacd;
  color: #1a1a4f;
}

// Tek tıkla aktif
document.getElementById('dyslexia-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dyslexia-mode');
  localStorage.setItem('dyslexia', document.body.classList.contains('dyslexia-mode'));
});

// Sayfa yüklendiğinde tercih varsa uygula
if (localStorage.getItem('dyslexia') === 'true') {
  document.body.classList.add('dyslexia-mode');
}

Erişilebilir Çerez "Disleksi Profili"

Erişilebilir Çerez erişilebilirlik widget'ında "Disleksi Profili" tek tıkla aşağıdaki ayarları aktif eder:

• Font ailesi → OpenDyslexic (otomatik yükleme)
• Font boyutu → +%20
• Satır aralığı → 2.0
• Harf aralığı → 0.15em
• Kelime aralığı → 0.20em
• Arka plan → krem (#fdf6e3)
• Metin rengi → koyu kahve (#3e2723)
• Animasyonlar → durduruldu
• Link altı çizgi → kalın (3px)

Kullanıcı tercihi LocalStorage'da saklanır; sonraki ziyaretinde otomatik uygulanır. Site sahibinin admin panelden açması yeterli — kod ekleme gerektirmez. Demo sayfasında inceleyebilirsiniz.

Sıkça Sorulan Sorular

OpenDyslexic gerçekten işe yarıyor mu, yoksa pseudoscience mi?

Akademik tartışma sürüyor. Bazı çalışmalar (Wery & Diliberto, 2017) anlamlı fark bulamadı; bazıları (Kuster et al., 2018) kullanıcı tercihinde net iyileşme buldu. Pratik gerçek: Çok kullanıcı OpenDyslexic'in okumayı kolaylaştırdığını subjektif olarak rapor eder. Erişilebilirlik = tercih sunmak, zorlamak değil.

Comic Sans MS'i ciddi sitede kullanabilir miyim?

Tüm site için önerilmez (tasarım eleştirisi haklı). Ancak disleksi profili içinde opsiyon olarak sunmak makul. Birçok disleksi topluluğu Comic Sans'ı tercih ettiğini belirtir.

Türkçe karakterler OpenDyslexic'te düzgün görünüyor mu?

Evet, son sürümler (v0.91+) tam Türkçe karakter desteği sunar (ı, İ, ş, ğ, ü, ö, ç). Kendi sitenizde test ederek doğrulayın.

Disleksi-dostu tasarım SEO'ya zarar verir mi?

Hayır — tam tersi. Daha okunabilir metin, daha düşük bounce rate, daha uzun session, daha iyi Core Web Vitals. Google Core Web Vitals + Accessibility skoru SEO rankinglerini doğrudan etkiler.

Tüm kullanıcıya disleksi profili açık göstermeli miyim?

Hayır — varsayılan tasarımınızı koruyun, kullanıcıya seçim sunan widget kullanın. Zorla aktif etmek tasarım dengenizi bozar + UX tasarımcısı geri bildirimi alır.

Sitenizi disleksili kullanıcılar için 30 saniyede iyileştirin. Erişilebilir Çerez erişilebilirlik widget'ı Disleksi Profili dahil 11 profil + 35 özellik sunar. Ücretsiz başlayın.

Kaynaklar:

• British Dyslexia Association Style Guide
• OpenDyslexic — opendyslexic.org
• WCAG 2.1 SC 1.4.12 Text Spacing
• prefers-reduced-motion MDN