TR

Renk kontrastı kontrolü (WCAG 2.2)

Bir metin rengi ve bir arka plan rengi girin veya seçin. Araç iki rengin göreli parlaklığını ve kontrast oranını tam olarak W3C tanımına göre hesaplar ve hangi WCAG 2.2 başarı ölçütlerinin karşılandığını gösterir. Kontrast yetersizse ölçütü geçen en yakın metin rengini önerir.

HEX, rgb(), hsl() … – saydamlık da çalışır
Girdileriniz yalnızca bu tarayıcıda saklanır.

Önizleme

Normal metin: 16 piksel yazı boyutunda bir paragraf böyle okunur.

24 px’ten büyük metin

18,67 px’ten kalın metin

Düğme

Renklerinizle önizleme: 16 px normal, 24 px normal ve 18,67 px kalın (= 14 pt kalın, büyük metin), ardından arayüz örneği olarak bir çerçeve ve bir simge.

Sonuç

Kontrast oranı
4,48 : 1
WCAG 2.2 değerlendirmesi
ÖlçütEn azSonuç
Normal metin – AA (SC 1.4.3)4,5 : 1✗ kaldı
Normal metin – AAA (SC 1.4.6)7 : 1✗ kaldı
Büyük metin – AA (SC 1.4.3)3 : 1✓ geçti
Büyük metin – AAA (SC 1.4.6)4,5 : 1✗ kaldı
Arayüz öğeleri ve grafikler – AA (SC 1.4.11)3 : 1✓ geçti
AA için en yakın metin rengi (4,5:1)
#767676 (4,54 : 1)
AAA için en yakın metin rengi (7:1)
#595959 (7,00 : 1)
Göreli parlaklık, metin rengi
0,1845 (#777777)
Göreli parlaklık, arka plan
1,0000 (#FFFFFF)

Nasıl hesaplanır?

Kontrast nasıl hesaplanır?

WCAG 2.2 kontrast oranını (L1 + 0,05) ÷ (L2 + 0,05) olarak tanımlar; L1 açık rengin, L2 koyu rengin göreli parlaklığıdır. Sonuç 1:1 (aynı renkler) ile 21:1 (beyaz üzerine siyah) arasındadır.

Araç göreli parlaklığı tam olarak W3C tanımına göre hesaplar: her sRGB kanalı 255’e bölünür ve doğrusallaştırılır – 0,04045’e kadar olan değerler 12,92’ye bölünür, daha büyük değerler ((değer + 0,055) ÷ 1,055)2,4 olur. Ardından L = 0,2126 × R + 0,7152 × G + 0,0722 × B.

Örnek: beyaz üzerinde #777777: 0x77 = 119, 119 ÷ 255 = 0,4667 → ((0,4667 + 0,055) ÷ 1,055)2,4 = 0,1845. Üç kanal da eşit olduğundan L = 0,1845. Beyazın L değeri 1’dir. Kontrast = (1 + 0,05) ÷ (0,1845 + 0,05) = 4,48:1. Bu, büyük metin (3:1) için yeterli, normal metin (4,5:1) için ise az farkla yetersizdir. Önerilen #767676, 4,54:1’e ulaşır.

WCAG 2.2 gereksinimleri

Başarı ölçütüDüzeyNormal metinBüyük metin
1.4.3 Kontrast (en az)AA4,5:13:1
1.4.6 Kontrast (geliştirilmiş)AAA7:14,5:1
1.4.11 Metin dışı kontrast (arayüz öğeleri, grafikler)AA3:1

WCAG’ye göre büyük metin en az 18 punto ya da kalın yazıda en az 14 puntodur – tarayıcıda yaklaşık 24 px ve 18,67 px. İstisnalar arasında logolar, yalnızca süsleme amaçlı metinler ve etkin olmayan kontroller bulunur.

Yuvarlama yok

WCAG tam değeri karşılaştırır: 4,499:1, 4,5:1 eşiğini karşılamaz. Bu yüzden araç yuvarlanmamış oranı değerlendirir ve iki ondalık basamak gösterir; yuvarlama bir eşiğe ulaşılmış gibi gösterecekse değer kesilir (4,50 yerine 4,49).

Saydam renkler

Alfa değeri olan renkler (ör. rgba(0, 0, 0, 0.6) veya #00000099) tarayıcının çizdiği gibi üst üste konur: saydam arka plan beyazın üzerine, saydam metin rengi arka planın üzerine. Sayfanız farklı bir zeminin üzerindeyse o opak rengi arka plan olarak girin.

Sıkça sorulan sorular

Erişilebilirlik için hangi kontrast oranı gerekir?

Normal metin için en az 4,5:1 (WCAG AA düzeyi, SC 1.4.3), büyük metin için 3:1. Daha sıkı AAA düzeyi sırasıyla 7:1 ve 4,5:1 ister. Giriş alanı çerçeveleri ve simgeler gibi kontroller 3:1 gerektirir (SC 1.4.11).

Beyaz üzerinde hangi griler AA’yı geçer?

#767676, beyaz üzerinde en az 4,5:1 sağlayan en açık gridir (4,54:1). #777777 ise 4,48:1 ile az farkla kalır.

Renk kontrastı nedir?

Web erişilebilirliğinde renk kontrastı, metin ile arka plan arasındaki parlaklık farkıdır ve 1:1 ile 21:1 arasında bir oran olarak ifade edilir. Oran ne kadar yüksekse metin, görme güçlüğü olan kişiler için de o kadar okunaklıdır.

Araç önerilen rengi nasıl buluyor?

Metin renginizin tonunu ve doygunluğunu korur, yalnızca HSL açıklığını küçük adımlarla hem açık hem koyu yönde değiştirir. Yuvarlanmış rengi hedefe güvenle ulaşan en küçük değişikliği önerir.

Bu kontrast değerlerine hangi düzenlemeler atıfta bulunur?

Avrupa Birliği’nde erişilebilirlik düzenlemelerinin – Avrupa Erişilebilirlik Yasası (EAA) dahil – dayandığı uyumlaştırılmış standart EN 301 549, WCAG 2.1 AA’ya atıfta bulunur. Kontrast ölçütleri WCAG 2.0, 2.1 ve 2.2’de aynıdır: metin için 4,5:1, büyük metin için 3:1, WCAG 2.1’den itibaren arayüz öğeleri için de 3:1.

Kaynaklar ve yasal dayanak

Güncelleme:

Benzer araçlar