1:1 – 21:1 · AA · AAA
Kontrast denetleyici
Beyaz üzerine siyahın WCAG kontrast oranı mümkün olan en yüksek değer olan 21:1'dir; #0060fd üzerine beyazın oranı ise 5.13:1'dir. Kendi renklerini denetlemek için bir metin rengi ve bir arka plan gir.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
Oran ve beş denetim yazdıkça güncellenir. Oran iki ondalığa kesilir, asla yukarı yuvarlanmaz; bu yüzden 4.499, 4.49:1 olarak görünür ve 4.5:1 denetiminden geçemez.
Scanned by 
NortonTM Safe Web
Bir bakışta
- Fiyat
- Ücret yok
- Hesap
- Gerekmez
- Yükleme
- Geçerli değil — renkleri yazarsın, hiçbir şey bir yere gönderilmez
- Formül
- (açık aydınlık + 0.05) ÷ (koyu aydınlık + 0.05)
- Eşikler
- AA: normal metin 4.5:1, büyük metin 3:1; AAA: normal metin 7:1, büyük metin 4.5:1; arayüz parçaları için 3:1
- Standart
- WCAG 2.2'nin bağıl aydınlık ve kontrast oranı tanımları
Bilinen çiftlerin kontrast oranları
Bu satırlar denetleyiciyle aynı kodla üretildi. Onay işareti çiftin gereksinimi karşıladığını, çarpı karşılamadığını gösterir.
| Metin rengi | Arka plan | Oran | AA normal | AA büyük | AAA normal | AAA büyük | Arayüz parçaları |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Denetim | En düşük oran |
|---|---|
| AA, normal metin | 4.5:1 |
| AA, büyük metin | 3:1 |
| AAA, normal metin | 7:1 |
| AAA, büyük metin | 4.5:1 |
| AA, arayüz parçaları ve grafikler | 3:1 |
Renk çifti nasıl denetlenir
İki rengi de gir
Metin rengini ve arka plan rengini herhangi bir CSS gösteriminde yaz ya da seçicileri kullan. Değiştir düğmesi ikisinin yerini değiştirir; bu, koyu zemin üzerinde açık metin için işe yarar.
Oranı oku
Oran 1:1 (aynı renkler) ile 21:1 (beyaz üzerine siyah) arasındadır. Alanların altındaki örnek, çifti 16 px ve 24 px'te göstererek sonucu kendi gözünle değerlendirmeni sağlar.
Beş denetime bak
Her kutucuk bir WCAG gereksinimi için Geçti veya Kaldı der: normal metin için AA ve AAA, büyük metin için AA ve AAA, arayüz parçaları için AA. Normal metin AA'dan geçemezse sayfa, geçen en yakın metin rengini önerir.
Kontrast oranı nasıl hesaplanır
WCAG kontrastı, bir rengin 0 (siyah) ile 1 (beyaz) arasındaki parlaklığı olan bağıl aydınlıkla ölçer. Kırmızı, yeşil ve mavi kanalların her biri 255'e bölünür; 0.04045'e kadar olan bir değer 12.92'ye bölünür, daha büyük bir değerin ise üssü alınır: (değer + 0.055) bölü 1.055, sonra 2.4'üncü kuvvet. Aydınlık sonra 0.2126 çarpı kırmızı artı 0.7152 çarpı yeşil artı 0.0722 çarpı mavidir; bu, gözün her birine ne kadar güçlü yanıt verdiğini yansıtır. Kontrast oranı, açık rengin aydınlığı artı 0.05'in koyu rengin aydınlığı artı 0.05'e bölünmesidir.
WCAG 2, AA düzeyinde normal metin için en az 4.5:1, büyük metin için 3:1; AAA düzeyinde ise 7:1 ve 4.5:1 ister. Büyük metin en az 18 punto, yani 24 CSS pikseli ya da kalınsa en az 14 puntodur, yaklaşık 18.66 piksel. 1.4.11 başarı ölçütü, bir okuyucunun görmesi gereken arayüz parçaları ve grafikler için, örneğin bir alan kenarlığı veya grafik çizgisi, 3:1 ister. Oran her eşikle yuvarlanmadan karşılaştırılır. Bir renk saydamsa ölçümden önce saydam bir arka plan beyazın, saydam bir metin rengi de arka planın üzerine yerleştirilir. Bu sayfa yalnızca WCAG 2.x'i uygular; yönergelerin sonraki bir sürümü için tartışılan APCA'yı hesaplamaz.
Kontrast soruları
WCAG metin için hangi kontrast oranını ister?
AA düzeyinde normal metin en az 4.5:1, büyük metin en az 3:1 ister. AAA düzeyinde değerler normal metin için 7:1, büyük metin için 4.5:1'dir. Oran, metin rengi ile hemen arkasındaki renk arasında ölçülür.
Büyük metin ne sayılır?
WCAG büyük metni en az 18 punto, yani 24 CSS pikseli ya da kalınsa en az 14 punto, yani yaklaşık 18.66 CSS pikseli olarak tanımlar. Bundan küçük her şey normal metin sayılır ve daha yüksek oran gerektirir.
Beyaz üzerinde AA'dan geçen en açık gri hangisi?
Beyaz üzerinde #767676'nın oranı 4.54:1'dir ve normal metin için 4.5:1 denetiminden geçer. Bir sonraki açık gri #777777 ise 4.47:1 alır ve kalır. 7:1 (AAA) için en açık gri 7.00:1 alan #595959'dur.
4.5'e benzeyen 4.49 neden kalıyor?
Denetimler tam oranı eşikle karşılaştırır. 4.499 oranı 4.5'in altındadır, bu yüzden kalır; sayfa onu yukarı yuvarlamak yerine 4.49:1 olarak yazar. Gerçek bir örnek: beyaz üzerinde saf kırmızı 3.99:1 alır ve yakın olmasına rağmen normal metin için 4.5:1 denetiminden geçemez.
Simgeler, kenarlıklar ve form alanları için hangi kontrast gerekir?
WCAG 2.1 ile eklenen 1.4.11 Metin Dışı Kontrast başarı ölçütü, bir okuyucunun görmesi gereken arayüz parçaları veya grafikler, örneğin bir alan kenarlığı, odak halkası ya da grafik çizgisi ile yanındaki renkler arasında en az 3:1 ister. Devre dışı denetimler ve salt süsleme amaçlı grafikler kapsam dışıdır.
Oranın geçmesi sayfayı erişilebilir yapar mı?
Hayır. Kontrast pek çok gereksinimden yalnızca biridir. Yazı tipi boyutu ve kalınlığı, satır aralığı, anlamı yalnızca renkle iletme, odağın görünürlüğü, görsellerin ve gradyanların üzerindeki metin ve farklı renk görme biçimlerine sahip kişilerin bir sayfayı nasıl gördüğü de önemlidir. Bu sonucu girdilerden biri olarak kullan ve sayfayı gerçek içerikle dene.