Kontrast Izgarası

Tüm paletinizi tek bir N×N denetim tablosuna yerleştirin — her ön plan × arka plan çifti için WCAG oranları ve APCA Lc, bir bakışta karar verin.

Her hücre WCAG oranını ve APCA Lc değerini gösterir


Ag1.0Lc0	Ag4.2Lc+35	Ag3.8Lc+31	Ag5.2Lc+42	Ag8.4Lc+62	Ag1.2Lc0	Ag17.4Lc+104
Ag4.2Lc-33	Ag1.0Lc0	Ag1.1Lc0	Ag1.3Lc0	Ag2.0Lc+25	Ag5.0Lc-34	Ag4.2Lc+67
Ag3.8Lc-29	Ag1.1Lc0	Ag1.0Lc0	Ag1.4Lc+10	Ag2.2Lc+30	Ag4.6Lc-30	Ag4.6Lc+72
Ag5.2Lc-40	Ag1.3Lc0	Ag1.4Lc-11	Ag1.0Lc0	Ag1.6Lc+18	Ag6.3Lc-41	Ag3.3Lc+60
Ag8.4Lc-61	Ag2.0Lc-27	Ag2.2Lc-32	Ag1.6Lc-20	Ag1.0Lc0	Ag10.2Lc-62	Ag2.1Lc+40

WCAG AA gövde geçişi Sadece AA büyük metin Başarısız

Satırlar = metin rengi (ön plan), sütunlar = arka plan. Her hücre, gerçek ön plan-arka plan çiftini iki erişilebilirlik metriğiyle gösterir: WCAG oranı (AA gövde ≥ 4.5, AA büyük ≥ 3.0) ve APCA Lc (gövde metni için 75+, büyük metin için 60+).

Tüm palet nasıl denetlenir - ekle, oku, karar ver.

Tüm aday renkler N×N matrisinde - aynı anda her ön plan × arka plan çifti için erişilebilirlik.

01
Renkleri ekle
Marka renkleri, anlamsal renkler ve nötrleri getirin (en fazla 10). Satırlar ön plan, sütunlar arka plandır.
02
Tabloyu oku
Her hücre WCAG oranını ve APCA Lc değerini gösterir. Noktalar şu şekilde yanar: gövde metni için Lc 75+, büyük metin için 60+.
03
Karar Verin
Düğme çiftlerini ve gövde çiftlerini tasarım spesifikasyonunuza kaydedin; gönderilmeden önce başarısız olan kombinasyonları ortadan kaldırın.

Kontrast Izgarası SSS

Tam matris denetimlerinde üç sık sorulan soru.

Neden kontrast aracında çiftleri tek tek kontrol etmiyorsunuz?: 5 renk 30 yönlendirilmiş çift yapar - tek tek kontrol etmek kaçırmalara yol açar. Izgarası her şeyi aynı anda gösterir ve yansıyan ilişkileri ortaya çıkarır.
WCAG mi APCA mı - hangisi sayılır?: WCAG 2.1 bugün düzenlemelerin referans aldığı standarttır; APCA, WCAG 3 adayıdır ve karanlık modu ve düşük kontrastlı metni daha doğru okur. WCAG'ye uyun, APCA ile değerlendirin.
Neden siyah ve beyaz sütunlar her zaman orada?: Siyah veya beyaz metin evrensel geri dönüş yoludur - bir rengin her ikisine karşı nasıl performans gösterdiği, anlamsal renkleri tanımlamak için temel oluşturur.

Denetimden Sonra

Geçen çiftleri anlamsal paletinize ve spesifikasyonunuza ekleyin.

Kontrast Denetleyici

Herhangi bir ön plan ve arka plan rengi arasında WCAG 2.1 kontrast doğrulaması.

Renk Körlüğü Simülatörü

Erişilebilirliği denetlemek için 8 tür renk görüşü eksikliği simüle edin.

Renk Körü Dostu Paletler

Akademik yayınların fiili standartları — Okabe-Ito (Nature Methods tarafından önerilir), Paul Tol serisi, Nature NPG dergi paleti ve algısal olarak tekdüzen Viridis. Her renk örneği bir APCA kontrast notu ile gelir ve aşağıdaki 8 tür renk görüşü simülatörü her paleti canlı olarak doğrular.

Anlamsal UI Paleti

Bir marka rengi girin, birincil / ikincil / başarı / uyarı / tehlike elde edin — Tailwind yapılandırması ve CSS değişkenleri olarak dışa aktarılır.

fg ↓ / bg →

Ag1.0Lc0

Ag4.2Lc+35

Ag3.8Lc+31

Ag5.2Lc+42

Ag8.4Lc+62

Ag1.2Lc0

Ag17.4Lc+104

Ag4.2Lc-33

Ag1.0Lc0

Ag1.1Lc0

Ag1.3Lc0

Ag2.0Lc+25

Ag5.0Lc-34

Ag4.2Lc+67

Ag3.8Lc-29

Ag1.1Lc0

Ag1.0Lc0

Ag1.4Lc+10

Ag2.2Lc+30

Ag4.6Lc-30

Ag4.6Lc+72

Ag5.2Lc-40

Ag1.3Lc0

Ag1.4Lc-11

Ag1.0Lc0

Ag1.6Lc+18

Ag6.3Lc-41

Ag3.3Lc+60

Ag8.4Lc-61

Ag2.0Lc-27

Ag2.2Lc-32

Ag1.6Lc-20

Ag1.0Lc0

Ag10.2Lc-62

Ag2.1Lc+40

Tüm palet nasıl denetlenir - ekle, oku, karar ver.

Tüm aday renkler N×N matrisinde - aynı anda her ön plan × arka plan çifti için erişilebilirlik.

Renkleri ekle

Marka renkleri, anlamsal renkler ve nötrleri getirin (en fazla 10). Satırlar ön plan, sütunlar arka plandır.

Tabloyu oku

Her hücre WCAG oranını ve APCA Lc değerini gösterir. Noktalar şu şekilde yanar: gövde metni için Lc 75+, büyük metin için 60+.

Karar Verin

Düğme çiftlerini ve gövde çiftlerini tasarım spesifikasyonunuza kaydedin; gönderilmeden önce başarısız olan kombinasyonları ortadan kaldırın.

Kontrast Izgarası SSS

Tam matris denetimlerinde üç sık sorulan soru.

Neden kontrast aracında çiftleri tek tek kontrol etmiyorsunuz?

5 renk 30 yönlendirilmiş çift yapar - tek tek kontrol etmek kaçırmalara yol açar. Izgarası her şeyi aynı anda gösterir ve yansıyan ilişkileri ortaya çıkarır.

WCAG mi APCA mı - hangisi sayılır?

WCAG 2.1 bugün düzenlemelerin referans aldığı standarttır; APCA, WCAG 3 adayıdır ve karanlık modu ve düşük kontrastlı metni daha doğru okur. WCAG'ye uyun, APCA ile değerlendirin.

Neden siyah ve beyaz sütunlar her zaman orada?

Siyah veya beyaz metin evrensel geri dönüş yoludur - bir rengin her ikisine karşı nasıl performans gösterdiği, anlamsal renkleri tanımlamak için temel oluşturur.