Laporan Kepatuhan WCAG

Masukkan warna dari palet desain Anda - teks, latar belakang, aksen, tautan, dan lainnya - dan dapatkan laporan kepatuhan aksesibilitas WCAG 2.1 yang komprehensif secara instan. Setiap pasangan latar depan-latar belakang dievaluasi berdasarkan kriteria kontras AA dan AAA untuk teks normal, teks besar, dan komponen UI. Laporan ini menunjukkan skor kepatuhan Anda secara keseluruhan, peringkat per pasangan dengan detail lulus/gagal, dan rekomendasi penggunaan untuk kombinasi yang tidak lulus. Sempurna untuk validasi sistem desain, audit aksesibilitas, dan dokumentasi kepatuhan. Sepenuhnya pribadi, 100% gratis, dan tidak perlu mendaftar.

WCAG Compliance Report

Enter the colours from your design palette and get a comprehensive WCAG 2.1 compliance report. The tool checks every foreground-background pair for normal text (AA/AAA), large text (AA/AAA), and UI component contrast criteria - all processed entirely in your browser.

Sample Palettes

Palette Colors

Text / Foreground

Background

Accent

Link

33%

Compliance Score

12Total Pairs

4Pass AA

2Pass AAA

2Failures

Pair	Colors	Ratio	Rating	Normal Text
on	Text / Foreground on Background	17.06:1	AAA	AA AAA	AA AAA
on	Background on Text / Foreground	17.06:1	AAA	AA AAA	AA AAA
on	Text / Foreground on Accent	5.10:1	AA	AA AAA	AA AAA
on	Accent on Text / Foreground	5.10:1	AA	AA AAA	AA AAA
on	Text / Foreground on Link	4.30:1	AA Large	AA AAA	AA AAA
on	Link on Text / Foreground	4.30:1	AA Large	AA AAA	AA AAA
on	Background on Link	3.97:1	AA Large	AA AAA	AA AAA
on	Link on Background	3.97:1	AA Large	AA AAA	AA AAA
on	Background on Accent	3.34:1	AA Large	AA AAA	AA AAA
on	Accent on Background	3.34:1	AA Large	AA AAA	AA AAA
on	Accent on Link	1.19:1	Fail	AA AAA	AA AAA
on	Link on Accent	1.19:1	Fail	AA AAA	AA AAA

Pair Recommendations

Text / Foreground on Accent

Safe for body text and large text at AA level

Accent on Text / Foreground

Safe for body text and large text at AA level

Text / Foreground on Link

Safe for large text (≥18pt or ≥14pt bold) and UI components only

Link on Text / Foreground

Safe for large text (≥18pt or ≥14pt bold) and UI components only

Mengapa Menggunakan Laporan Kepatuhan WCAG Kami?

Laporan Kepatuhan Palet Penuh Instan: Laporan kepatuhan WCAG menghitung rasio kontras untuk setiap pasangan latar depan-latar belakang di palet Anda secara instan saat Anda mengetik. Tidak ada tombol untuk ditekan - menambah atau mengubah warna apa pun dan seluruh laporan diperbarui secara real time, menunjukkan lulus/gagal untuk semua kriteria WCAG 2.1.
Cakupan Kriteria Komprehensif: Setiap pasangan warna dievaluasi berdasarkan WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum - AA), 1.4.6 (Contrast Enhanced - AAA), dan 1.4.11 (Non-text Contrast - AA). Hasil ditampilkan untuk teks normal, teks besar, dan komponen UI dengan indikator lulus/gagal yang jelas untuk masing-masing komponen.
100% Pemrosesan Browser Pribadi: Semua penghitungan kontras dilakukan secara lokal di browser Anda menggunakan JavaScript. Nilai palet warna Anda tidak pernah meninggalkan perangkat Anda dan tidak pernah dikirim ke server mana pun - sepenuhnya aman untuk warna merek dan proyek klien.
Gratis & Tidak Perlu Mendaftar: Hasilkan laporan kepatuhan WCAG tanpa batas tanpa pendaftaran, tanpa langganan, dan tanpa batasan penggunaan. Alat ini sepenuhnya gratis selamanya tanpa iklan yang memblokir antarmuka.

Kasus Penggunaan Umum untuk Laporan Kepatuhan WCAG

Validasi Sistem Desain: Pengelola sistem desain menggunakan laporan kepatuhan WCAG untuk memvalidasi bahwa setiap token warna dalam sistem memenuhi standar aksesibilitas. Masukkan palet lengkap - teks, latar belakang, aksen, tautan, sukses, kesalahan, dan peringatan - dan dapatkan matriks kepatuhan lengkap untuk semua kombinasi.
Pengembangan Tema CSS: Pengembang frontend menggunakan laporan kepatuhan WCAG untuk memverifikasi bahwa palet warna tema terang dan gelap memenuhi persyaratan aksesibilitas sebelum penerapan. Laporan ini mendeteksi masalah kontras sejak dini, sehingga mencegah regresi aksesibilitas dalam produksi.
Audit Aksesibilitas: Auditor aksesibilitas menggunakan laporan kepatuhan WCAG untuk mengevaluasi kontras warna dengan cepat dari keseluruhan sistem desain. Analisis pasangan demi pasangan yang komprehensif mengidentifikasi dengan tepat kombinasi warna mana yang gagal dan pada tingkat apa, sehingga menyederhanakan proses remediasi.
Dokumentasi Kepatuhan: Konsultan aksesibilitas menggunakan laporan kepatuhan WCAG untuk menghasilkan dokumentasi untuk laporan VPAT (Templat Aksesibilitas Produk Sukarela) dan pernyataan kesesuaian aksesibilitas. Fungsi copy-to-clipboard memudahkan untuk memasukkan hasil dalam dokumentasi formal.
Desain Merek & Pemasaran: Desainer merek menggunakan laporan kepatuhan WCAG untuk memastikan bahwa materi pemasaran, halaman arahan, dan pedoman merek menggunakan kombinasi warna yang memenuhi standar aksesibilitas tanpa mengorbankan identitas merek.
Platform SaaS & E-niaga: Tim produk menggunakan laporan kepatuhan WCAG untuk memvalidasi bahwa seluruh sistem warna UI mereka - mulai dari tombol dan tautan hingga status formulir dan peringatan - memberikan kontras yang memadai untuk semua pengguna, mengurangi risiko hukum, dan meningkatkan tingkat konversi bagi pengguna dengan gangguan penglihatan.

Apa Itu Laporan Kepatuhan WCAG?

Laporan kepatuhan WCAG mengevaluasi apakah kombinasi warna dalam palet desain memenuhi persyaratan kontras yang ditentukan dalam Pedoman Aksesibilitas Konten Web (WCAG) 2.1 . Mengingat serangkaian warna - biasanya teks, latar belakang, aksen, tautan, dan warna UI lainnya - laporan menghitung rasio kontras untuk setiap pasangan latar depan-latar belakang yang bermakna dan memeriksanya terhadap ambang batas WCAG untuk teks normal (AA: 4.5:1, AAA: 7:1), teks besar (AA: 3:1, AAA: 4.5:1), dan komponen UI (AA: 3:1). Hasilnya adalah matriks komprehensif yang menunjukkan dengan tepat kombinasi warna mana yang lolos atau gagal dalam setiap kriteria.

Cara Kerja Laporan Kepatuhan WCAG Kami

Masukkan palet warna Anda: Mulailah dengan empat warna penting - teks, latar belakang, aksen, dan tautan - dengan mengetikkan nilai HEX atau menggunakan pemilih warna. Tambahkan warna opsional seperti judul, batas, sukses, kesalahan, dan peringatan sesuai kebutuhan. Anda juga dapat memuat palet sampel untuk melihat cara kerja laporan.
Rasio kontras dihitung: Alat ini mengubah setiap warna menjadi komponen sRGB dan menghitung pencahayaan relatif menggunakan rumus WCAG 2.1. Untuk setiap pasangan latar depan-latar belakang yang unik, rasio kontras dihitung sebagai (L₁ + 0,05) / (L₂ + 0,05) dengan L₁ adalah luminansi yang lebih terang. Hasilnya adalah nilai antara 1:1 (tanpa kontras) dan 21:1 (kontras maksimum).
Laporan dihasilkan secara instan: Setiap pasangan warna dievaluasi berdasarkan kelima kriteria WCAG (teks normal AA dan AAA, teks besar AA dan AAA, komponen UI AA). Laporan tersebut menunjukkan skor kepatuhan keseluruhan, peringkat per pasangan, dan rekomendasi penggunaan untuk pasangan yang tidak memenuhi semua kriteria. Semua pemrosesan terjadi sepenuhnya di browser Anda - tidak ada data yang diunggah.

Kriteria Kontras WCAG Dijelaskan

Teks Normal - AA (4,5:1): Rasio kontras minimum yang diperlukan untuk isi teks di bawah 18pt (atau 14pt tebal). Ini adalah persyaratan aksesibilitas yang paling umum dan diamanatkan oleh sebagian besar undang-undang aksesibilitas di seluruh dunia, termasuk ADA, EN 301 549, dan AODA.
Teks Normal - AAA (7:1): Rasio kontras yang ditingkatkan untuk teks normal yang memberikan keterbacaan lebih baik bagi pengguna dengan gangguan penglihatan. AAA direkomendasikan untuk konten penting tetapi tidak diperlukan untuk kepatuhan WCAG secara umum.
Teks Besar - AA (3:1): Pengurangan persyaratan kontras untuk teks yang setidaknya berukuran 18pt atau 14pt tebal, karena karakter yang lebih besar lebih mudah dibedakan. Teks besar yang melewati 3:1 dianggap dapat diterima untuk kepatuhan AA.
Teks Besar - AAA (4.5:1): Persyaratan kontras yang ditingkatkan untuk teks besar. Teks besar dengan rasio 4,5:1 memenuhi standar AAA.
Komponen UI - AA (3:1): Berlaku untuk objek grafis dan komponen UI (tombol, bidang formulir, ikon) yang memerlukan informasi visual yang dapat dibedakan. Hal ini didefinisikan dalam Kriteria Keberhasilan WCAG 2.1 1.4.11.

Membaca Laporan Kepatuhan Anda

Skor kepatuhan keseluruhan menunjukkan persentase pasangan warna yang lolos WCAG AA untuk teks normal - ini mewakili kriteria umum yang paling ketat. Skor 100% berarti setiap kombinasi warna dalam palet Anda aman untuk penggunaan teks isi. Tabel per pasangan memberi Anda rasio kontras yang tepat dan status lulus/gagal untuk setiap kriteria. Pasangan bertanda AA Besar dapat digunakan untuk teks besar dan elemen UI tetapi tidak untuk teks isi. Pasangan yang ditandai Gagal tidak boleh digunakan bersama untuk teks atau elemen interaktif apa pun. Gunakan bagian rekomendasi untuk memahami batasan setiap pasangan yang tidak lolos dan merencanakan penyesuaian warna Anda.

Pertanyaan yang Sering Diajukan

Laporan kepatuhan WCAG mengevaluasi kontras warna palet desain terhadap Pedoman Aksesibilitas Konten Web (WCAG) 2.1. Ia memeriksa setiap kombinasi warna latar depan-latar belakang berdasarkan lima kriteria kontras dan menghasilkan matriks lulus/gagal yang komprehensif.

Rasio kontras dihitung menggunakan rumus pencahayaan relatif WCAG 2.1. Setiap warna dikonversi ke nilai sRGB yang dilinearisasi, dan pencahayaan relatif dihitung sebagai L = 0,2126R + 0,7152G + 0,0722B. Rasio kontrasnya adalah (L₁ + 0,05) / (L₂ + 0,05) dengan L₁ adalah luminansi yang lebih terang. Hasil berkisar dari 1:1 hingga 21:1.

Minimal, sertakan warna teks utama dan warna latar belakang Anda. Untuk laporan yang komprehensif, tambahkan aksen/warna utama, warna tautan, warna judul, warna batas, dan warna status apa pun (berhasil, kesalahan, peringatan). Semakin banyak warna yang Anda sertakan, analisis kepatuhannya akan semakin menyeluruh.

Ya. Semua penghitungan kontras dan evaluasi kepatuhan terjadi 100% di sisi klien di browser Anda. Nilai palet warna Anda tidak pernah dikirim ke server mana pun, tidak pernah disimpan, dan tidak pernah dikirim ke mana pun.

WCAG AA adalah tingkat kepatuhan standar yang diwajibkan oleh sebagian besar undang-undang aksesibilitas. AA memerlukan 4,5:1 untuk teks normal dan 3:1 untuk teks besar. WCAG AAA adalah level yang ditingkatkan - 7:1 untuk teks normal dan 4,5:1 untuk teks besar. AAA direkomendasikan untuk konten penting tetapi tidak diperlukan untuk kepatuhan umum.

Pasangan yang diberi peringkat "AA Besar" melewati ambang batas WCAG AA untuk teks besar (3:1) dan komponen UI (3:1) tetapi gagal memenuhi persyaratan teks normal yang lebih ketat (4,5:1). Ini berarti kombinasi warna dapat digunakan dengan aman untuk judul, tombol, dan elemen besar lainnya - namun tidak untuk teks isi atau keterangan.

Ya. Gunakan tombol "Salin Laporan sebagai Teks" untuk menyalin laporan lengkap termasuk skor keseluruhan, rasio kontras per pasangan, dan status lulus/gagal untuk setiap kriteria. Output ini dapat dimasukkan dalam laporan VPAT dan pernyataan kesesuaian aksesibilitas.

Ya. Alat ini 100% gratis tanpa perlu mendaftar, tanpa fitur premium, dan tanpa batasan penggunaan. Hasilkan laporan kepatuhan tanpa batas tanpa batasan atau biaya tersembunyi apa pun.