Düşük kontrastlı metinler web sitenizi tüm kullanıcılar için daha az okunabilir hale getirir. Görme bozukluğu olan kullanıcılar içinse daha fazla okunabilir. Geliştirici Araçları, düşük kontrast sorunlarını otomatik olarak bulup düzeltmenize yardımcı olmak için daha iyi renkler önerir.
Geliştirici Araçları'nı kullanarak şunları yapabilirsiniz:
- Kontrast sorunlarını keşfetme. Tüm sorunların listesini almak için CSS'ye Genel Bakış panelini, (önizleme) Sorunlar sekmesini veya bir Lighthouse raporunu kullanın.
- Kontrast sorunlarını düzeltme. İpucuyla ilgili sorunları denetleyici modunda görüntüleyin ve kontrast oranını düzeltmek için Renk Seçici'nin önerdiği renkleri seçin.
- Görme bozukluklarını simüle edin. Sitenizi kullanıcılarınıza nasıl göründüğüne bakın.
Düşük kontrastlı metni keşfedin
Düşük kontrastlı metni keşfetmek için:
- Sayfanızda Geliştirici Araçları'nı açın. Bu eğitimde bu demo sayfasını kullanabilirsiniz.
Üç panelden birini kullanarak tüm kontrast sorunlarının listesini alın:
CSS'ye Genel Bakış panelindeki kontrast sorunları
Genel bakış için:
- CSS'ye Genel Bakış'ı açın.
- Genel bakış alın.
- Renkler bölümünü açın, Kontrast sorunları bölümüne gidin ve varsa bir sorunu tıklayın.
Kontrast sorunları tablosunda fareyle bir öğenin üzerine gelin ve yanındaki bağlantıyı tıklayın.
Sorunu Düşük kontrastlı metni düzeltme bölümünde açıklandığı şekilde düzeltin.
(Önizleme) Sorunlar sekmesindeki kontrast sorunları
Sorunların listesini almak için:
- Sorunlar sekmesinde kontrast sorunlarının bildirilmesini etkinleştirin:
- Ayarlar > Deneysel'i açın.
- Filtre çubuğunda
contrast issuearaması yapın. - Sorunlar paneli aracılığıyla otomatik kontrast sorunu raporlamasını etkinleştir'i işaretleyin.
- Üstteki istemde Geliştirici Araçları'nı yeniden yükle'yi tıklayın.
- Sorunlar sekmesini açın.
Geliştirici Araçları'nın bulduğu kontrast sorunlarını, ardından öğeler tablosunu genişletin ve öğenin yanındaki bağlantıyı tıklayın.
Sorunu Düşük kontrastlı metni düzeltme bölümünde açıklandığı şekilde düzeltin.
Lighthouse raporundaki kontrast sorunları
Bir rapor çalıştırmak için:
- Geliştirici Araçları'nda
Diğer sekmeler > Lighthouse'u açın. - Aşağıdaki ayarlarla bir Lighthouse raporu oluşturun:
- Mod: Gezinme (varsayılan)
- Kategoriler: Erişilebilirlik
- Cihaz: Masaüstü
- Sayfa yüklemeyi analiz et'i tıklayın ve Lighthouse'un raporu oluşturmasını bekleyin.
- Kontrast bölümüne ilerleyin ve öğe listesinde, etkilenen bir öğenin bağlantısını tıklayın.
- Sorunu Düşük kontrastlı metni düzeltme bölümünde açıklandığı şekilde düzeltin.
Düşük kontrastlı metni düzeltme
Düşük kontrastla ilgili bir sorunu düzeltmek için:
- Bir kontrast sorunu bulun ve CSS'ye Genel Bakış panelinde, Sorunlar sekmesinde veya Lighthouse raporunda etkilenen bir öğenin bağlantısını tıklayın. Geliştirici Araçları sizi Öğeler paneline yönlendirir ve ilgili öğeyi seçer.
Örneğin, bu demo sayfasında etkilenen ilk öğe h1.line1. Geliştirici Araçları'nın sağ üst köşesinde
İncele'yi tıklayın ve fareyle görüntü alanındaki öğenin üzerine gelin. Geliştirici Araçları, bu öğe için bir ipucu gösterir.
İpucundaki kontrast oranı değerinin yanında
uyarı işaretine dikkat edin. Kontrast oranı, ön plan (metin rengi) ile arka plan renkleri arasındaki parlaklık farkını ölçer.Öğe metninin renk beyanının yanındaki Renk Seçici'yi açın ve Renk Seçici'de Kontrast oranı bölümünü genişletin.
Renk Seçici, kontrast oranının WebAIM yönergelerinin AA veya AAA seviyelerine uymadığını belirtir.
AAA seviyesinin yanındaki
Önerilen rengi kullan düğmesini tıklayın. Renk Seçici, kontrast oranı yönergelerine uygun metin rengini uygular.
Alternatif olarak, rengi manuel olarak seçmek için gölgeler önizlemesinde daireyi sürükleyebilirsiniz. AA veya AAA seviyesinde kalmak için sırasıyla üst veya alt çizginin altından bir renk seç.
Benzer şekilde, CSS'ye Genel Bakış paneli, Sorunlar sekmesi veya Lighthouse raporunda bulduğunuz tüm kontrast sorunlarını düzeltin.
Değişiklikleri kaydedin
Geliştirici Araçları'nda yaptığınız değişiklikleri kaydetmek için:
- Tüm CSS değişikliklerini tek seferde kopyalayın ve kodunuza yapıştırın
- Geliştirici Araçları'nın dosyaları doğrudan kaynaklarınıza kaydetmesine olanak tanıyan bir Çalışma Alanı oluşturmayı düşünün.
Sonraki adım
Daha fazla bilgi:
- Genel olarak erişilebilirliği öğrenin
- Özellikle renk ve kontrast erişilebilirliği