Renk Kontrast Denetleyicisi

Renk Kontrast Denetleyicisi Nasıl Kullanılır

1. 1. İki rengi girin. Her birini HEX (#777777), rgb(), hsl() ya da bir CSS adı olarak yazın ya da seçiciyi kullanın. Değiştir ikisini yer değiştirir; açık zeminde koyu metni ve koyu zeminde açık metni karşılaştırmak için kullanışlıdır.
2. 2. Oranı ve tabloyu okuyun. Oran 1:1'den (aynı renkler) 21:1'e (siyah üzerine beyaz) kadar uzanır. Tablo oranı her WCAG gereksinimiyle karşılaştırır ve yalnızca renkle değil, kelimelerle Geçti ya da Kaldı yazar.
3. 3. Boyutu belirleyin. Büyük metnin gereksinimleri daha düşüktür. Önizleme normal metni, büyük metni, kalın büyük metni ve kenarlıklı bir kontrolü gösterir; böylece kendi durumunuzu değerlendirebilirsiniz.
4. 4. Başarısız bir çifti düzeltin. Hedeflediğiniz düzeyi seçin ve önerilen metin rengini ya da arka planı kullanın. Araç tonu ve doygunluğu korur; yalnızca parlaklığı geçecek en küçük adımla değiştirir.

WCAG 2.2 Neyi Gerektirir

Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.2, üç başarı ölçütünde minimum kontrast oranlarını belirler. Oran (L₁ + 0,05) ÷ (L₂ + 0,05) biçimindedir; burada L₁ daha açık rengin, L₂ ise daha koyu rengin göreli parlaklığıdır.

Büyük metin, ekranda 96 dpi'da 24 piksel (en az 18 punto) normal ya da yaklaşık 18,7 piksel (14 punto) kalın metindir. Logolar, yalnızca süs amacı taşıyan metinler ve etkin olmayan kontroller 1.4.3'ten muaftır. 1.4.11'deki 3:1 kuralı, bir kontrolü bulmak için gereken kısımları (bir düğmenin kenarlığı, bir onay kutusunun çerçevesi), odak gibi durumlarını ve bir okurun içeriği anlamak için ihtiyaç duyduğu grafikleri — örneğin bir grafikteki çizgileri — kapsar.

Oran Nasıl Hesaplanır

Her sRGB kanalı 0–1 aralığına ölçeklenir ve doğrusallaştırılır: c ≤ 0,04045 ise c ÷ 12,92, aksi hâlde ((c + 0,055) ÷ 1,055)^2,4. Göreli parlaklık ardından 0,2126 R + 0,7152 G + 0,0722 B'dir. Yeşil en çok sayılır, çünkü göz ona en duyarlıdır.

WCAG yuvarlama yapmaz: 4,4999 oranı 4,5 gereksinimini karşılamaz. Bu nedenle denetleyici oranı iki ondalığa aşağı yuvarlanmış olarak gösterir; böylece yakın bir ıska asla geçer gibi görünmez.

Slaytları, Posterleri ve Şekilleri Denetlemek

• Slaytlar ve posterler web sayfası değildir, ama WCAG oranları onlar için de kabul görmüş ölçüttür. Slayttaki gövde metni genellikle büyüktür (24 piksel 18 punto eder); başlıklar, dipnotlar ve eksen etiketleri ise değildir — bunları normal metin gibi denetleyin.
• Yansıtma için minimumun üzerini hedefleyin. Aydınlık bir odada yansıtılan projeksiyon herkes için kontrastı düşürür. Parlak bir odada göstereceğiniz bir slayttaki metin için AAA (7:1) seçin.
• Bir fotoğrafın ya da geçişin üzerindeki metnin tek bir arka planı yoktur. Metnin arkasındaki en açık ve en koyu alanları denetleyin ya da metni düz bir panele yerleştirin.
• Grafikler ve şekiller 1.4.11 kapsamına girer: çizgilerin, çubukların ve işaretçilerin arka plana karşı 3:1 olması gerekir. Anlam yalnızca renkle taşınmamalıdır — Renk Körlüğü Simülatörü'ne bakın.
• Yarı saydam renkler ölçülmeden önce düzleştirilir: arka plan beyazın üzerine, sonra metin arka planın üzerine konur. Arkasında başka bir şey olan bir sayfa için rengi doğrudan girmeniz gerekir.

APCA Hakkında Not

Erişilebilir Algısal Kontrast Algoritması (APCA), metin boyutunu, kalınlığını ve polariteyi hesaba katan WCAG 3'ün çalışma taslağında bir aday yöntemdir. Bu bir taslaktır, bir gereklilik değildir ve şu anda hiçbir yasa ya da standart bunu istemez. WCAG 2.x oranları — bu aracın kullandığı oranlar — uygunluk iddialarının temelinde kalmaya devam eder.

Sık sorulan sorular

İyi bir kontrast oranı nedir?

Normal metin için 4,5:1 ya da üzeri WCAG AA'yı, 7:1 ise AAA'yı karşılar. Büyük metin için AA 3:1, AAA 4,5:1 gerektirir. Siyah üzerine beyaz maksimumdur: 21:1. 3:1'in altındaki her şey, iyi görüşe sahip birçok kişi için bile okunması zordur.

WCAG'de büyük metin neye denir?

Normal kalınlıkta en az 18 punto (24 piksel) ya da kalın olarak en az 14 punto (yaklaşık 18,7 piksel) olan metin. Boyut ekranda görüntülendiği gibi ölçülür; bu nedenle bir dağıtım materyalinde küçük görünen bir slayt yazısı, yansıtıldığında hâlâ büyük olabilir.

Kontrast gereksinimi simgeler ve grafik çizgileri için de geçerli mi?

Evet; 1.4.11 Metin Dışı Kontrast başarı ölçütü üzerinden: içeriği anlamak için gerekli olan kullanıcı arayüzü bileşenleri ve grafikler, bitişik renklere karşı en az 3:1 olmalıdır. Süs amaçlı grafikler ve etkin olmayan bileşenler muaftır.

Oran neredeyse 4,5 olmasına rağmen neden renk 4,49 gösteriyor?

Çünkü WCAG tam oranı karşılaştırır ve yuvarlamaya hiçbir kredi vermez. 4,4999:1 olan bir çift 4,5:1 gereksinimini geçemez; bu nedenle araç değeri 4,50 yerine iki ondalığa aşağı yuvarlanmış olarak gösterir.

Önerilen renkler nasıl çalışır?

Araç, renginizin tonunu ve doygunluğunu korur, HSL parlaklığını küçük adımlarla yukarı ya da aşağı taşır ve hedef oranı karşılayan en yakın değeri 8 bitlik bir HEX kodu olarak döndürür. Hiçbir parlaklık bunu karşılayamazsa — örneğin orta bir griye karşı 7:1 — bunu söyler ve diğer rengi değiştirmenizi önerir.

APCA, WCAG oranından daha iyi mi?

APCA algıyı özellikle koyu mod ve ince metin için daha yakından modeller, ama WCAG 3'ün bir taslağının parçasıdır, kabul görmüş bir gereklilik değildir. WCAG 2.x'e atıfta bulunan erişilebilirlik yasaları ve satın alma standartları burada hesaplanan oranı kullanır.