Metin Rengi Kontrastını Güncelleştirme

Herkes metninizi okuyabilmelidir

Metnin görülebilmesi ve okunaklı olması önemlidir. Ziyaretçilerinizin metni anlayabilmeleri için öncelikle okuyabilmeleri gerekir.

Doğru bir metin kontrastı, metnin, yer aldığı arka planda herkes tarafından görülebilmesini sağlar.

Herkes, renkleri aynı şekilde görmez. WCAG, metnin herkes tarafından okunabilmesi için WCAG 2.1 AA kılavuzunda belirli kontrast gereksinimlerini tanımlamıştır. Kontrast sorunlarını düzeltmek veya önlemek için bu gereksinimleri ve kontrastla ilgili en iyi uygulamalarımızı takip edin.

Ally, metin rengi ile arka plan rengi arasında yeterli kontrast olduğunu doğrulamak için kontrast gereksinimlerini takip eder. Zayıf metin kontrastı, büyük bir sorundur. Büyük sorunlar, erişilebilirliği olumsuz etkiler. Bunlar ciddi sorunlar olmasa bile dikkat gerektirir.

Zayıf kontrastlı metinleri bulmak için Ally'ı kullanma

Sitenizdeki erişilebilirlik sorunlarını keşfetmek ve düzeltmek için Ally'ın erişilebilirlik raporunu kullanın. Rapor için sağlanan bağlantıyı kullanın ve oturum açın. Raporu açın ve Erişilebilirlik Sorunları tablosundaki sorunlar listesine bakın.

Erişilebilirlik Sorunları tablosu, hem Genel Bakış hem de Etki Alanı sekmelerinde yer alır. Bir etki alanına özgü sorunları görmek için Etki Alanı sekmesinden başlayın. 

Zayıf kontrastlı metnin varlığı, büyük bir sorundur. Büyük sorunların listesini görüntülemek için Erişilebilirlik Sorunları tablosundaki Büyük sekmesini kullanın. Kontrastla ilgili sorunları seçin.

Genel Bakış sekmesinden başlıyorsanız sorunu ve ardından sorunun yaşandığı etki alanını seçin.

Listede kontrast sorunları Belge veya HTML ile başlayabilir.

Etki alanındaki kontrast sorunları listesinden, sorunlu bir ögenin yanındaki puan göstergesini seçin. İçerik düzenleyicisi geri bildirim paneli açılır.

Zayıf kontrastlı metni ön izleyin

Ally'ın geri bildirim paneli, erişilebilirlik sorunlarını çözmenize yardımcı olmak için içeriğin ön izlemesini göstermenin yanı sıra ayrıntılı geri bildirim ve destek de sunar. Zayıf kontrastlı metinleri görmek için ön izlemeyi kullanın.

Ön izleme, belirli erişilebilirlik sorunlarının belgede bulunabileceği yerleri vurgular. Vurgulamalar, bir sorun türünün yinelendiği tüm noktaları tek seferde gösterir. Örneğin, metninizde kontrast zayıfsa vurgulamalar bu sorunun ortaya çıktığı her yeri gösterir.

Ön izleme araçları

Belgenizdeki sorunları keşfetmek için ön izleme araçlarını kullanın.

  • Ön izleme sayfaları arasında gezinin.
  • Belirli bir sorunun kaç kez göründüğüne bakın.
  • Sorun vurgulamaları arasında gezinin.
  • Vurgulamaları gizleyin veya gösterin.
  • Ön izleme içeriğini yakınlaştırıp uzaklaştırın.
  • Sorun ekli bir belgede ise orijinal dosyayı indirin.

Zayıf kontrast durumlarını düzeltmek için Ally'ın yol gösterici adımlarını takip edin

Ally, temel seviyede HTML bilgisine sahip olduğunuzu ve İçerik Yönetim Sisteminizi (CMS) kullanmayı bildiğinizi varsayar. Yol gösterici adımları takip etmek için, web sayfasının HTML veya kaynak kodunu CMS'nizde nasıl düzenleyeceğinizi bilmeniz gerekir.

Ally ayrıca web sitenizde renkleri güncelleştirme iznine sahip olduğunuzu da varsayar. Renkler genellikle bir sitenin stil kılavuzunda tanımlanır ve markayı yansıtabilir. Herhangi bir değişiklik yapmadan önce sitenizin stil kılavuzuna bakın. 

Ally, ön izlemenin yanı sıra sorunun çözümü konusunda size adım adım rehberlik de sağlar. Ally, bu geri bildirimi bir karar ağacında düzenler.Bunun için talimatları okumanız ve istemlere yanıt vermeniz yeterlidir. Sorunun ne olduğunu, niçin önemli olduğunu ve gerektiği şekilde nasıl düzeltileceğini öğrenin.

Kontrastı düzeltme ögesini seçin ve yol gösterici adımları takip edin.

Kontrast sorunlarını çözmenin yolları

Metnin kontrastı zayıfsa bu, metin ile üzerine yerleştiği arka plan arasında yeterli renk kontrastı yok demektir.

Metnin renginin nasıl değiştirileceği, Ally'ın yol gösterici adımlarında açıklanır. Dilerseniz arka plan rengini de değiştirebilirsiniz. 

Herhangi bir değişiklik yapmadan önce sitenizin stil kılavuzuna bakın. Renkler genellikle markayla ilişkilidir ve dikkatli bir şekilde değiştirilmelidir.

Tek tek web sayfalarının kaynak HTML kodunda güncelleştirmelerin nasıl yapılacağı da Ally'ın yol gösterici adımlarında açıklanır. CMS'ler değişebilir. Bazı CMS'lerde, metnin stilini düzenlemeniz için kolay anlaşılır yollar sağlayabilecek bir Zengin Metin Düzenleyicisi (RTE) vardır. Zengin Metin Düzenleyicileri (RTE) sayesinde; başlıklar, renkler, yazı tipleri, görüntüler vb. için önceden ayarlanmış stili seçebilirsiniz. Ancak her CMS'de RTE yoktur ve bu durum, HTML ile kaynak kodunda düzenlemeler yapılmasını gerektirir. Bazen hem HTML hem de RTE bir arada mevcuttur.

Yinelenen kontrast sorunları için bunun yerine şablonu güncelleştirmek isteyebilirsiniz. Şablon güncelleştirmeleri belirli düzeyde HTML ve CSS bilgisi gerektirir ve sitenizin markasına göre değişebilir. 

w3schools'u ziyaret ederek HTML ve CSS ile ilgili daha fazla bilgi edinin

Renkli HEX veya RGB

HEX ve RGB, renk tanımlamanın farklı yollarıdır.

  • RGB, rengi kullanılan kırmızı (R), yeşil (G) ve mavi (B) miktarına göre tanımlar. Örneğin, kırmızı bir ton RGB (253, 2, 2) olarak tanımlanabilir.
  • HEX, altı harf ve rakamdan oluşan bir kombinasyonla kırmızı, yeşil ve mavi değerlerle bir rengi tanımlayan onaltılık bir biçimdir. Onaltılık biçim, rakam veya hashtag (#) simgesi ile başlar. Örneğin, kırmızının aynı tonu #fd0202 olarak tanımlanır.

Onaltılık biçim, web sayfalarında renkleri tanımlamanın en yaygın yoludur.

Metin kontrastı ile ilgili en iyi uygulamalar

Metnin okunabilirliğini iyileştirmek için kolaylıkla yapılabilecek pek çok ayar vardır.

  • Geniş karakterli yazı tipleri kullanın.
  • Yazı tipi boyutunu en az 12 piksel olacak şekilde ayarlayın. İnce karakterli bir yazı tipi kullanıyorsanız yazı tipi boyutunun en az 16 piksel olması gerekir.
  • "İnce" yazı tiplerini yalnızca koyu renkli arka planlarda kullanın.
  • Koyu renkli arka planlarda açık renkli bir metin kullanın.
  • Açık renkli arka planlarda koyu renkli metin kullanın.
  • Şu renk kombinasyonlarını kullanmaktan kaçının:
    • Yeşil ve kırmızı
    • Yeşil ve kahverengi
    • Mavi ve mor
    • Yeşil ve mavi
    • Açık yeşil ve sarı
    • Mavi ve gri
    • Yeşil ve gri
    • Yeşil ve siyah

Metninizde yeterince kontrast olup olmadığına emin değil misiniz?İçeriğinizi kontrol etmek için Paciello Group'un Renk Kontrastı Analiz Aracı'nı kullanın.

Metin kontrastı neden önemlidir?

Düşük kontrastlı metinlerin okunması çoğu zaman zor olabilir.

  • Sınıfta projektörle yansıtıldığında
  • Renk körlüğü olan öğrenciler için
  • Parlak ışıklı veya ekranı yansıma yapan bir mobil cihazda
  • Düşük kaliteli monitörlerde

Düşük kontrast göz yorgunluğu yapabilir, içeriğin aranıp bulunmasını zorlaştırabilir ve bıkkınlık yaratabilir.

İyi bir kontrast, herkesin metni net şekilde görebilmesini sağlar ve içeriğinizi okuma deneyimini genel olarak daha keyifli hâle getirir.