Web sitenizi daha okunabilir hale getirin

Düşük kontrastlı metinler web sitenizin tüm kullanıcılar için okunabilirliğini azaltır. Bu durum, görme bozukluğu olan kullanıcılar için daha da fazladır. Geliştirici Araçları, düşük kontrast sorunlarını otomatik olarak bulabilir ve düzeltmenize yardımcı olmak için daha iyi renkler önerebilir.

Geliştirici Araçları'nı kullanarak şunları yapabilirsiniz:

• Kontrast sorunlarını keşfedin. Tüm sorunların listesini almak için CSS'ye Genel Bakış panelini, (önizleme) Sorunlar sekmesini veya Lighthouse raporunu kullanın.
• Kontrast sorunlarını düzeltin. İnceleyici modunda bir ipucu ile sorunları 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. Sitenize kullanıcılarınızın gördüğü şekilde bakın.

Düşük kontrastlı metni keşfedin

Düşük kontrastlı metni keşfetmek için:

1. Sayfanızda Geliştirici Araçları'nı açın. Bu eğitimde bu demo sayfasını kullanabilirsiniz.

2. Üç panelden birini kullanarak tüm kontrast sorunlarının listesini alın:

   • CSS'ye Genel Bakış
   • (Önizleme) Sorunlar
   • Lighthouse

CSS'ye Genel Bakış panelindeki kontrast sorunları

Genel bilgi edinmek için:

1. CSS'ye Genel Bakış'ı açın.
2. Genel bakış yakalayın.
3. Renkler bölümünü açın, Kontrast sorunları bölümüne ilerleyin ve varsa bir sorunu tıklayın.

4. Kontrast sorunları tablosunda fareyle bir öğenin üzerine gelin ve yanındaki bağlantıyı tıklayın.

   

5. Sorunu Düşük kontrastlı metni düzeltme bölümünde açıklandığı şekilde düzeltin.

(Önizleme) Sorunlar sekmesinde kontrast sorunları

Sorunların listesine ulaşmak için:

1. Sorunlar sekmesinde kontrast sorunları raporlamasını etkinleştirin:
   1. Ayarlar > Deneysel'i açın.
   2. Filtre çubuğunda contrast issue araması yapın.
   3. Sorunlar paneli aracılığıyla otomatik kontrast sorunu raporlamasını etkinleştir'i işaretleyin.
   4. Üstteki istemde Geliştirici Araçları'nı yeniden yükle'yi tıklayın.
2. Sorunlar sekmesini açın.

3. Geliştirici Araçları'nın bulduğu kontrast sorunlarını genişletin, ardından öğeler tablosunu genişletin ve öğenin yanındaki bağlantıyı tıklayın.

   

4. 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:

1. Geliştirici Araçları'nda Diğer sekmeler > Lighthouse'u açın.
2. Aşağıdaki ayarlarla bir Lighthouse raporu oluşturun:
   • Mod: Gezinme (varsayılan)
   • Kategoriler: Erişilebilirlik
   • Cihaz: Masaüstü
3. Sayfa yüklemeyi analiz et'i tıklayın ve Lighthouse'un raporu oluşturmasını bekleyin.
4. Kontrast bölümüne ilerleyin ve öğeler listesinde etkilenen öğenin bağlantısını tıklayın.
5. Sorunu Düşük kontrastlı metni düzeltme bölümünde açıklandığı şekilde düzeltin.

Düşük kontrastlı metni düzeltme

Düşük kontrast sorununu düzeltmek için:

1. Kontrast sorunu bulun ve CSS'ye Genel Bakış paneli, Sorunlar sekmesi veya Lighthouse raporunda etkilenen bir öğeye ait bağlantıyı 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'tir.

2. Geliştirici Araçları'nın sağ üst köşesindeki İ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.

   

   İpucunda kontrast oranı değerinin yanındaki uyarı işaretine dikkat edin. Kontrast oranı, ön plan (metin rengi) ve arka plan renkleri arasındaki parlaklık farkını ölçer.

3. Öğenin 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 düzeylerine uymadığını bildirir.

4. AAA seviyesinin yanındaki Önerilen rengi kullan düğmesini tıklayın. Renk Seçici, kontrast oranı yönergelerine uygun olan metin rengini uygular.

   

5. Alternatif olarak, rengi manuel olarak seçmek için daireyi gölge önizlemesinde sürükleyebilirsiniz. AA veya AAA düzeyi içinde kalmak için üst veya alt çizginin altında sırasıyla bir renk seçin.

   

6. Benzer şekilde, CSS'ye Genel Bakış paneli, Sorunlar sekmesi veya Lighthouse raporunda bulduğunuz tüm kontrast sorunlarını düzeltin.

Değişiklikleri kaydet

Geliştirici Araçları'nda yaptığınız değişiklikleri kaydetmek için:

• Tüm CSS değişikliklerini bir defada kopyalayıp kodunuza yapıştırın
• Geliştirici Araçları'nın dosyaları doğrudan kaynaklarınıza kaydetmesine olanak tanıyan bir Workspace kurulumu yapabilirsiniz.

Sonraki adım

Daha fazla bilgi:

• Genel olarak erişilebilirliği öğrenme
• Özellikle renk ve kontrast erişilebilirliği