Pangertosan Rasio Kontras WCAG 2.1 / 2.2
Pemeriksa Kontras minangka piranti kangge ngukur rasio kontras antawisipun warni teks lan warni latar wingking miturut standar WCAG 2.1 / 2.2. Standar punika dados acuan utama ingkang dipunginakaken dening para desainer, pangembang web, sarta tim konten kangge mesthekaken bilih sedaya materi digital saged dipunwaos kanthi gampil dening sedaya pangguna, kalebet pangguna ingkang nggadhahi keterbatasan visual.
Rasio kontras dipunpetang ngginakaken rumus matematika resmi saking WCAG 2.1 / 2.2. Asil petangan punika awujud angka rasio ingkang nggadhahi rentang saking 1:1 ngantos 21:1. Rasio 1:1 tegesipun boten wonten kontras babar pisan (umpaminipun teks pethak ing nginggilipun latar wingking pethak), dene rasio 21:1 minangka kontras paling inggil (teks cemeng ing nginggilipun latar wingking pethak). Piranti punika ngginakaken warni awal #4f46e5 kangge teks lan #ffffff kangge latar wingking, ingkang ngasilaken rasio kontras 6.29.
Saben pamriksan dipunproses wonten ing browser panjenengan. Boten wonten data ingkang dipununggah dhateng BroBroGo. Hal punika njamin bilih sedaya pakaryan panjenengan tetep wonten ing komputer panjenengan piyambak tanpa wonten proses pangiriman data dhateng server njawi.
Format Input lan Cara Ngginakaken
Kangge miwiti pamriksan, panjenengan kedah nglebaken kalih nilai warni ingkang badhe dipunuji:
- Warni teks: Nilai warni ingkang dipunginakaken kangge karakter utawi tulisan.
- Warni latar wingking: Nilai warni ingkang dados dhasar utawi latar wingking teks kasebat.
Piranti punika saged nampi macem-macem format warni standar ingkang umum dipunginakaken ing desain web:
- Format Hex: Nilai hex kados
#1a1a1autawi#ffffff. - Format RGB: Nilai
rgb()kadosrgb(26, 26, 26)utawirgb(255, 255, 255). - Format HSL: Nilai
hsl().
Yen panjenengan nglebaken format ingkang boten trep utawi salah, sistem badhe nampilaken pesen kesalahan. Menawi warni teks boten valid, badhe muncul pesen: "Lebaken warni teks ingkang valid, kados #1a1a1a or rgb(26, 26, 26).". Menawi warni latar wingking ingkang salah, badhe muncul pesen: "Lebaken warni latar wingking ingkang valid, kados #ffffff utawi rgb(255, 255, 255).".
Piranti punika ugi nggadhahi tombol swap ingkang saged dipunginakaken kangge ngijolaken warni teks lan latar wingking kanthi cepet, saengga nggampilaken analisis kombinasi warni saking kalih arah.
Aturan Kelulusan AA lan AAA
WCAG mbagi tingkat aksesibilitas dados sawetara undhakan, inggih punika AA lan AAA. Saben undhakan nggadhahi syarat minimal rasio kontras ingkang benten-benten gumantung saking ukuran teks sarta jinis komponen visual:
| Jinis Elemen | Tingkat AA | Tingkat AAA |
|---|---|---|
| Teks normal | Minimal 4.5:1 | Minimal 7:1 |
| Teks ageng | Minimal 3:1 | Minimal 4.5:1 |
| UI & grafis | Minimal 3:1 (Tanpa AA/AAA) | Minimal 3:1 (Tanpa AA/AAA) |
Teks normal mbetahaken rasio kontras ingkang langkung inggil amargi ukuranipun ingkang alit saengga langkung sesisih dipunwaos. Kosok balinipun, teks ageng nggadhahi kelonggaran rasio kontras ingkang langkung asor amargi ukuran karakteripun ingkang sampun cekap nggampilaken pangguna. Kangge komponen UI & grafis, aturan WCAG namung nemtokaken wates tunggal inggih punika 3:1, tanpa mbedakaken antawisipun tingkat AA lan AAA.
Bedanipun Teks Normal lan Teks Ageng
Ing njeron aturan aksesibilitas web, ukuran teks dipunukur ngginakaken satuan poin (pt) utawi piksel (px). Bentenipun teks normal lan teks ageng dipunatur kanthi rincian kados mekaten:
- Teks ageng: Dipun-definisikaken minangka teks ingkang nggadhahi ukuran minimal 18pt (udakara 24px), utawi minimal 14pt (udakara 18.5px) menawi seratipun kandel (bold).
- Teks normal: Sedaya teks ingkang ukuranipun wonten ing ngandhapipun wates minimal teks ageng kasebat.
Pangertosan punika wigati sanget amargi nemtokaken target rasio kontras ingkang kedah dipungayuh. Desainer saged ngginakaken kontras ingkang langkung asor (umpaminipun 3:1) menawi saged mesthekaken bilih ukuran teks ingkang dipunginakaken ing kaca web tansah kalebet kategori teks ageng.
Komponen UI lan Elemen Grafis
Kontras boten namung wigati kangge teks wae, nanging ugi kangge komponen antarmuka pangguna (UI) lan elemen grafis liyane. Komponen kados tombol, kothak input, lambang (icon), sarta wates-wates penting saking elemen aktif kedah saged dipunbédakaken kanthi cetha saking latar wingkingipun.
Kangge baris UI & grafis, piranti punika namung nampilaken asil adhedhasar wates tunggal 3:1. Yen rasio kontras saking warni ingkang dipunlebaken nggayuh angka 3:1 utawi langkung, asilipun badhe nedahaken "Lulus", dene yen wonten ing ngandhapipun 3:1 badhe nedahaken "Gagal". Boten wonten pambedan tingkat AA utawi AAA kangge kategori komponen UI & grafis punika.
Pesen Ringkesan Kelulusan (Verdict)
Saben panjenengan nglebaken kombinasi warni, piranti punika badhe nampilaken pesen ringkesan utawi verdict ingkang nedahaken tingkat kelulusan paling inggil ingkang saged dipungayuh dening kombinasi kasebat:
- "Lulus AA lan AAA kangge teks normal." – Kombinasi warni nggadhahi rasio minimal 7:1, saengga lulus sedaya tingkat kangge teks normal lan teks ageng.
- "Lulus AA kangge teks normal." – Kombinasi warni nggadhahi rasio antawisipun 4.5:1 ngantos 6.9:1.
- "Namung lulus AA kangge teks ageng." – Kombinasi warni nggadhahi rasio antawisipun 3:1 ngantos 4.4:1.
- "Wonten ing ngandhapipun batas minimal AA — mindhakaken kontrasipun." – Kombinasi warni nggadhahi rasio ing ngandhapipun 3:1, saengga boten lulus standar aksesibilitas minimal.
Pitakonan ingkang Asring Dipunajokaken (FAQ)
Menapa tegesipun asil AA lan AAA? AA minangka tingkat ingkang dads target umum: mbetahaken rasio minimal 4.5:1 kangge teks normal lan 3:1 kangge teks ageng. AAA langkung ketat — 7:1 kangge teks normal lan 4.5:1 kangge teks ageng. Rasio punika antawisipun 1:1 (tanpa kontras) ngantos 21:1 (cemeng ing nginggilipun pethak).
Menapa ingkang kalebet teks ageng? Teks kanthi ukuran minimal 18pt (udakara 24px), utawi 14pt (udakara 18.5px) yen kandel. Teks ingkang langkung ageng tetep gampil dipunwaos sanajan kontrasipun asor, saengga saged lulus AA ing rasio 3:1 lan AAA ing rasio 4.5:1.
Format warni menapa kemawon ingkang saged dipunlebaken? Serat nilai hex kados #1a1a1a, nilai rgb() kados rgb(26, 26, 26), utawi nilai hsl() — utawi klik kothak warni kangge milih warni. Ginakaken tombol swap kangge ngijolaken warni teks lan latar wingking.
Menapa punika ngginakaken WCAG 2 utawi metode APCA ingkang enggal? Alat punika ngginakaken rumus WCAG 2.1 / 2.2, ingkang dados acuan aturan aksesibilitas lan audit wektu punika. APCA minangka metode enggal ingkang taksih dipunrancang kangge WCAG 3 — sae, nanging dereng dados standar resmi, saengga asil kelulusan ing mriki boten ngginakaken metode kasebat.