DevBentoKaranlık Mod Renk Kontrastı Erişilebilirlik
Karanlık mod renklerinizin WCAG AA kontrast gereksinimlerini karşılayıp karşılamadığını kontrol edin. Ön plan ve arka plan çiftlerini test edin.
Pijamalı hasta yağız şoföre çabucak güvendi
Pijamalı hasta yağız şoföre çabucak güvendi
Pijamalı hasta yağız şoföre çabucak güvendi
Karanlık Mod Renk Kontrastını Kontrol Edin
Karanlık mod, renk paletinizi ters çevirmek değildir. Metin ile arka plan arasındaki kontrast ilişkisi tamamen değişir ve ışık modda çalışan birçok renk çifti, erişilebilirlik standartlarında başarısız olur. Bu örnek, yaygın bir karanlık mod eşleştirmesini test eder: açık gri metin (#e2e8f0) ve karanlık slate arka planı (#1e293b).
Karanlık Mod Kontrastı Neden Farklıdır
Işık modda koyu metni açık arka plan üzerinde kullanırsınız. Karanlık modda ise koyu arka plan üzerinde açık metin kullanırsınız. Sorun, insan gözünün karanlık arka planlarda kontrastı farklı algılamasıdır. İzolasyonda okunabilir görünen açık gri, aslında siyah olmayan karanlık bir arka plana yeterli kontrast sağlamayabilir.
WCAG kontrast formülü renk farkı yerine göreli parlaklık kullanır. Karanlık arka planlar çok düşük parlaklık değerlerine sahip olduğu için, metin parlaklığındaki küçük artışlar bile oranın %4.5:1 eşiğinin üzerine veya altına geçebilir. Bu da karanlık modu ışık modundan daha hassas kılar.
Yaygın Karanlık Mod Renk Hataları
| Hata | Örnek | Sorun |
|---|---|---|
| Saf beyaz ve saf siyah kullanma | #ffffff ve #000000 | %21:1 oranı geçer ancak OLED ekranlarda halo etkisi ve göz yorgunluğu oluşturur |
| Koyu arka plan üzerinde orta gri metin | #9ca3af ve #1e293b | %3.93:1 oranı, normal metin için WCAG AA’yı başarısız olur |
| Düşük doygunluklu koyu arka planlar | #2d2d2d ve #cccccc | %8.59:1 ile geçer ancak birçok ekranda soluk görünür |
| Aşırı kontrast | #ffffff ve #0a0a0a | %20.35:1 oranı, uzun okuma için aşırıdır |
İdeal Karanlık Mod Aralığı
Karanlık modda gövde metni için %7:1 ile %12:1 arasında bir kontrast oranı hedefleyin. Bu aralık, saf beyaz ve saf siyahın göz yorgunluğu olmadan mükemmel okunabilirlik sağlar:
| Öğe | Ön plan | Arka plan | Oran | WCAG |
|---|---|---|---|---|
| Gövde metni | #e2e8f0 | #1e293b | %11.56:1 | AAA |
| Soluk metin | #94a3b8 | #1e293b | %6.49:1 | AA |
| Başlıklar | #f1f5f9 | #0f172a | %17.35:1 | AAA |
| Bağlantılar | #60a5fa | #1e293b | %6.15:1 | AA |
| Devre dışı metin | #64748b | #1e293b | %3.39:1 | AA’yı başarısız olur |
Nasıl Kullanılır
- Karanlık mod metin renginizi ön plan alanına girin
- Karanlık mod arka plan renginizi arka plan alanına girin
- Oranın %4.5:1 (gövde metni) veya %3:1 (büyük metin) karşılayıp karşılamadığını kontrol edin
- Başarısız çiftleri düzeltmek için erişilebilir renk önerilerini kullanın
- Karanlık temanız için CSS değişkenlerini kopyalayın
Işık Moddan Karanlık Moda Geçiş
En güvenilir yaklaşım, ışık mod renklerinizi ters çevirmeye çalışmak yerine sabit parlaklık hedefleri kullanarak sıfırdan bir karanlık palet oluşturmaktır. Her ön plan/arka plan çiftini test edin ve hangi çiftlerin hangi WCAG seviyelerini geçtiğini belgeleyin. Renk Dönüştürücü HSL değerlerini sistematik olarak ayarlamanıza yardımcı olabilir.
Nothing you paste leaves this tab. Every tool runs entirely in your browser — no upload, no server, no account.