Hiçbir şey yüklemeden renk kontrastı nasıl denetlenir

Renk kontrastı denetimleri çoğu zaman uzmanlık gerektiren bir erişilebilirlik işi gibi ele alınır: bir tasarım dosyasını aç, eklenti yükle, ekran görüntüleri dışa aktar, rapor çalıştır, marka renkleri üzerine tartış. Bunlar yararlı olabilir, ancak çoğu ekibin başlaması gereken yer burası değildir.

Canlı bir web sitesi için en hızlı güvenilir denetim genellikle zaten açık olan tarayıcıda yapılır. Modern tarayıcı DevTools araçları hesaplanmış renkleri inceleyebilir, kontrast oranlarını gösterebilir, durum stillerini ortaya çıkarabilir ve otomatik raporların kaçırdığı zor durumları test etmenize yardımcı olabilir.

Bu rehber hiçbir şey yüklemediğinizi varsayar. Tarayıcı uzantısı yok. Tasarım eklentisi yok. Ücretli denetim paketi yok. Yalnızca sayfa, tarayıcı ve basit bir yöntem.

Gerçekten ihtiyaç duyduğunuz kontrast kuralları

Çoğu web işi için WCAG kontrastı birkaç eşikten ibarettir:

• Normal metin: arka planına karşı en az 4.5:1 kontrast.
• Büyük metin: en az 3:1. WCAG bunu yaklaşık 24 CSS pikseli ya da kalınsa yaklaşık 18.66 CSS pikseli olarak tanımlar.
• UI bileşenleri ve grafik nesneleri: arayüzü anlamak için gerekli anlamlı sınırlar, ikonlar, durumlar ve grafik parçaları için en az 3:1.
• Gelişmiş kontrast: temel seviyenin ötesini hedefliyorsanız normal metin için 7:1, büyük metin için 4.5:1.

Etkin olmayan kontroller, dekoratif öğeler ve logolar gibi istisnalar vardır. Bu istisnaları ölçülü kullanın. “Markanın bir parçası” bir istisna değildir; bir tasarım kısıtıdır.

Kontrastın erişilebilir renk kullanımının yalnızca bir parçası olduğunu da unutmayın. Kırmızı bir hata durumu yeterli kontrasta sahip olsa bile metin, ikon etiketi veya programatik bir gösterge yoksa kırmızıyı yakın renklerden ayırt edemeyen kullanıcılar için yine de başarısız olabilir.

Tasarım dosyasıyla değil, render edilmiş sayfayla başlayın

Tasarım dosyaları yararlıdır, ancak her gerçek dünya değişkenini içermez: CSS geçersiz kılmaları, opaklık, hover durumları, tarayıcı yazı tipi render işlemesi, kullanıcı yakınlaştırması, koyu mod, kalıtılan stiller, CMS içeriği ve pazarlama gömüleri.

Sayfayı kullanıcıların aldığı hâliyle denetleyin.

Sayfayı güncel bir masaüstü tarayıcıda açın. Chrome, Edge, Firefox ve Safari’nin tümünde yararlı inceleme araçları vardır. Tam etiketler farklılık gösterir, ancak iş akışı aynıdır:

1. Metne veya UI öğesine sağ tıklayın.
2. İncele seçeneğini seçin.
3. Hesaplanmış color ve background-color değerlerini bulun.
4. Kontrast oranını okumak için tarayıcının renk örneğini veya erişilebilirlik panelini kullanın.
5. Geçti, kaldı ve belirsiz durumlarını kaydedin.

Chromium tabanlı tarayıcılarda renk seçici çoğu zaman metin için kontrast oranı ve WCAG geçti/kaldı yönlendirmesi gösterir. Firefox DevTools da erişilebilirlik bilgilerini ve renk araçlarını sunar. Safari’nin Web Inspector aracı, iş akışı biraz farklı olsa da hesaplanmış stilleri ve erişilebilirlik bilgilerini gösterebilir.

Önemli olan belirli tarayıcı değildir. Önemli olan, bileşenin kullandığı düşünülen değeri değil hesaplanmış sonucu okumaktır.

Önce küçük bir denetim listesi oluşturun

Yorulana kadar rastgele metinleri incelemeyin. Kısa bir kalıp envanteri çıkarın:

• Ana sayfa arka planındaki gövde metni.
• Soluk metin, açıklamalar, meta veriler ve placeholder’lar.
• Normal, hover, ziyaret edilmiş ve odak durumlarındaki bağlantılar.
• Birincil, ikincil ve yıkıcı düğmeler.
• Form etiketleri, yardım metni, hatalar ve başarı mesajları.
• Navigasyon öğeleri, breadcrumb’lar ve sekmeler.
• Kartlar, rozetler, pill’ler ve etiketler.
• Anlam ileten ikonlar.
• Grafikler, haritalar, ilerleme çubukları ve durum renkleri.
• Görseller, video, gradyanlar veya yarı saydam bindirmeler üzerindeki metin.

Bu, tipik bir sitedeki çoğu hatayı bulmak için yeterlidir. Ayrıca denetimi tek seferlik piksellere değil bileşenlere bağlı tutar.

Denetiminiz düğmeleri içeriyorsa kontrast kontrolünü erişilebilir web düğmeleri kontrol listemizdeki temel noktalarla eşleştirin. Düğme kontrast sorunları çoğu zaman eksik odak durumlarının, belirsiz etiketlerin veya bozuk klavye davranışının hemen yanında bulunur.

DevTools’ta metin kontrastını inceleyin

Düz bir arka plan üzerindeki sade metin için tarayıcı genellikle kontrastı sizin için hesaplayabilir.

Öğeyi inceleyin ve color özelliğini arayın. Renk örneğinden renk seçiciyi açın. Tarayıcı arka planı belirleyebiliyorsa bir kontrast oranı gösterir. Bazı araçlar renk seçicide rengin 3:1, 4.5:1 veya 7:1 eşiğini nerede geçeceğini gösteren bir çizgi de çizer.

Tarayıcı başarısızlık bildiriyorsa aksini kanıtlayana kadar buna inanın. Geçtiğini bildiriyorsa yine de muhakeme kullanın. Küçük ince yazı, düşük kaliteli ekranlar, yoğun anti-aliasing ve hareketli arka planlar teknik olarak geçen metni zayıf hissettirebilir.

Pratik bir kural: gövde metni 4.55:1 ile ancak geçiyorsa kutlama yapmayın. Daha fazla pay bırakın. Kontrast gereksinimleri minimumlardır, ideal hedefler değildir.

Tipografi de önemlidir. Daha büyük ve daha net bir yazı sistemi, renk ayarlarına uzanmadan önce bile zorlanmayı azaltır. Sayfa kontrastı geçmesine rağmen okunması zor geliyorsa satır uzunluğu, boyut, ağırlık ve aralıkları modern web’de okunabilir yazı için bu pratik rehber gibi daha geniş bir okunabilirlik merceğiyle yeniden değerlendirin.

Opaklık dahil gerçek arka planı kontrol edin

Pek çok kontrast hatası, görünen arka planın bildirilen arka plan olmamasından kaynaklanır.

Yaygın tuzaklar şunlardır:

• Yarı saydam bir kartın içindeki metin.
• opacity uygulanmış bir üst öğedeki metin.
• rgba() veya color-mix() kullanan bindirmeler.
• Başlıkların arkasındaki gradyanlar.
• Metin alanı boyunca değişen arka plan görselleri.
• Koyu modda değişen tema değişkenleri.

DevTools kontrastı güvenle hesaplayamıyorsa render edilmiş ön plan ve arka plan renklerini manuel olarak belirleyin. Hesaplanmış stiller panelini kullanın, katmanları geçici olarak devre dışı bırakın veya tarayıcınız destekliyorsa yerleşik renk seçiciyle görünen rengi örnekleyin.

Görseller üzerindeki metinler için görselin en iyi kısmından örnek almayın. Metnin arkasındaki makul en kötü alandan örnek alın. Görsel CMS yüklemeleri, carousel’ler veya responsive kırpmalarla değişiyorsa bu kararlı bir kontrast sistemi değildir. Görsel ne olursa olsun metni koruyan güvenilir bir bindirme, metin gölgesi, düz kapsayıcı veya gradyan uygulaması ekleyin.

İyi bir görsel bindirme sistemi sıkıcıdır: aynı bindirme gücü, öngörülebilir kırpma alanı, parlak fotoğraflarda bile yeterli kontrast. Sıkıcı olması sorun değil. Kullanıcılar okumaya çalışıyor.

Durumları unutmayın

Statik ekran görüntüleri birçok kontrast hatasını kaçırır. Etkileşim durumlarını doğrudan tarayıcıda denetleyin.

DevTools’ta şu pseudo-class’ları zorlayın:

• :hover
• :focus
• :focus-visible
• :active
• :visited
• :disabled
• :checked
• :invalid

Ardından hesaplanmış renkleri yeniden inceleyin.

Odak göstergeleri özel dikkat gerektirir. WCAG 2.2 odak görünümüyle ilgili beklentileri güçlendirdi ve açık gri bir kart üzerindeki soluk mavi outline hâlâ yaygın bir hatadır. Odak göstergesinin bitişik renklere karşı yeterli kontrasta ve fark edilecek kadar alana ihtiyacı vardır.

Devre dışı kontroller için WCAG kontrast kurallarında etkin olmayan bileşenlere yönelik bir istisna vardır. Bu, devre dışı kontrollerin varsayılan olarak okunaksız olması gerektiği anlamına gelmez. Devre dışı durum yararlı bilgi taşıyorsa okunabilir yapın. Taşımıyorsa hiç mevcut olması gerekip gerekmediğini düşünün.

Lighthouse kullanın, ama muhakemeyi ona devretmeyin

Lighthouse gibi tarayıcı denetimleri bazı kontrast hatalarını hızlıca yakalayabilir. Tarayıcınız sunuyorsa yerleşik denetimi çalıştırın, ardından sonuçları bir başlangıç noktası olarak ele alın.

Otomatik kontroller, belirgin hesaplanmış kontrast hataları olan metin düğümlerini bulmakta iyidir. Şu konularda daha zayıftırlar:

• Görsellere gömülü metin.
• Canvas ile render edilen etiketler.
• SVG uç durumları.
• Yalnızca hover durumunda ortaya çıkan hatalar.
• Odak göstergesi kalitesi.
• Renk ilişkilerinin anlam taşıdığı grafikler.
• Kimlik doğrulama, menüler veya form adımlarının arkasında gizli bileşenler.

Bir rapor yeşil gelirse yine de temsili bileşenleri incelemeniz gerekir. Bir rapor kırmızı gelirse paniğe kapılmayın ve hataları kullanıcı etkisine göre önceliklendirin. Aynı ilke performans ve erişilebilirlik raporları için genel olarak da geçerlidir: araç çıktısını bir hüküm değil, kanıt olarak okuyun. Bu yaklaşımı paniğe kapılmadan Lighthouse raporu okuma rehberimizde kullanıyoruz ve burada da doğrudan geçerlidir.

Metin dışı kontrastı da denetleyin

Dikkatin çoğunu metin çeker, ancak WCAG arayüzü anlamak veya kullanmak için gereken metin dışı içeriği de kapsar.

En az şu durumları kontrol edin:

• Sayfa arka planına karşı input sınırları.
• Checkbox ve radio outline’ları.
• Toggle durumları.
• Yalnızca ikon içeren düğmeler.
• Hata ikonları ve uyarı sembolleri.
• Grafik çizgileri, çubukları ve etiketleri.
• İlerleme göstergeleri.
• Seçili sekme veya aktif navigasyon göstergeleri.

Hedef genellikle bitişik renklere karşı 3:1’dir. Örneğin, beyaz arka plan üzerindeki açık gri bir input sınırı neredeyse görünmez olabilir. Beş pastel çizgili bir grafik zarif görünebilir ve yine de kullanılamaz olabilir.

Grafikler için kontrast tek başına yeterli değildir. Bilginin yalnızca renge bağlı kalmaması için etiketler, desenler, çizgi stilleri, doğrudan açıklamalar veya boşluk kullanın. Bu; renk körü kullanıcılara, az gören kullanıcılara, parlamada görüntüleyen kişilere ve bir belgedeki ekran görüntüsünü okuyan herkese yardımcı olur.

Bulguları geliştiricilerin kullanabileceği bir formatta kaydedin

Yararlı bir kontrast denetimi “bazı griler başarısız” demez. Bileşeni, durumu, mevcut değerleri, beklenen eşiği ve önerilen düzeltmeyi tanımlar.

Kompakt bir format iyi çalışır:

| Bileşen | Durum | Ön plan | Arka plan | Oran | Hedef | Sonuç | Önerilen düzeltme | |---|---:|---:|---:|---:|---:|---|---| | Kart meta verisi | Varsayılan | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Başarısız | --color-text-muted-strong kullanın | | Birincil düğme | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Başarılı | Koru | | Input sınırı | Varsayılan | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Başarısız | Sınır token’ını koyulaştırın |

Sitede tasarım token’ları varsa düzeltmeleri bunlara bağlayın. Asıl sorun tek bir zayıf token ise yirmi ayrı bileşeni yamamayın.

Düzeltmeleri minimumdan biraz daha güçlü yapın

Kontrast hatalarını kötü biçimde düzeltmek çoğu zaman kolaydır. Ekipler renk denetleyici 4.51:1 diyene kadar rengi hafifçe değiştirir, sonra devam eder. Bu; yazı tipi render işlemesi, saydamlık, tarayıcı farkları, tema kullanımı, görsel değişkenliği veya gelecekteki marka düzenlemeleri için hiç pay bırakmaz.

Rahat hedefleri tercih edin:

• Gövde metni: pratik olduğunda 7:1’e daha yakın.
• Soluk metin: gerçek içerikse yine de 4.5:1’in üzerinde.
• UI sınırları ve ikonlar: rahatça 3:1’in üzerinde.
• Görseller üzerindeki metin: görsel başına tahmin yapmak yerine kontrollü bir bindirme kullanın.

Web ucuz dizüstü bilgisayarlarda, loş telefonlarda, parlak kaldırımlarda, tonlanmış monitörlerde ve yaşlanan ekranlarda görüntülenir. Minimum uyumluluk, rahat okuma ile aynı şey değildir.

<!-- tool-cta:start -->

💡 Bunu deneyin: DevTools’tan aldığınız kontrast çiftlerini kontrol ederken Color Converter, değerlerin denetim notlarınızla eşleşmesi için hex, RGB ve HSL arasında dönüştürmeye yardımcı olur.

<!-- tool-cta:end -->

Kurulumsuz kontrast denetimi kontrol listesi

Hızlı ama güvenilir bir denetime ihtiyaç duyduğunuzda şu sırayı kullanın:

1. Canlı sayfayı modern bir tarayıcıda açın.
2. Ana metin, UI ve durum kalıplarını listeleyin.
3. DevTools’ta hesaplanmış ön plan ve arka plan renklerini inceleyin.
4. Kontrastı okumak için yerleşik renk seçiciyi veya erişilebilirlik panelini kullanın.
5. Hover, focus, active, visited ve invalid durumlarını zorlayın.
6. Görseller ve gradyanlar üzerindeki metni makul en kötü arka plana göre kontrol edin.
7. Metin dışı UI parçalarını 3:1 gereksinimine göre kontrol edin.
8. Yerleşik otomatik denetimi tüm denetim olarak değil, güvenlik ağı olarak çalıştırın.
9. Hataları bileşen ve token bazında kaydedin.
10. Eşiği ancak geçerek değil, pay bırakarak düzeltin.

Bu, yığınınıza başka bir araç eklemeden kontrast sorunlarının çoğunu yakalamak için yeterlidir. Daha gelişmiş denetimlerin, özellikle büyük tasarım sistemleri, regüle ürünler veya karmaşık veri görselleştirmeleri için hâlâ yeri vardır. Ancak birçok web sitesi için tarayıcı zaten ihtiyacınız olan kanıtı verir. Zor olan, onu kullanacak kadar sistematik olmaktır.