Pemeriksa Kontras Warna Online
Periksa kontras warna terhadap WCAG 2.1. Verifikasi kepatuhan aksesibilitas AA dan AAA secara instan.
Sample Text
This is a normal text paragraph to verify readability.
#1a1a1f
#f8f6f3
Mengapa menggunakannya
Aksesibilitas web tanpa menebak rasio kontras
WCAG 2.1 resmi
Menggunakan rumus luminans relatif W3C yang tepat. Hasil yang presisi dan sesuai.
AA dan AAA sekilas
Langsung lihat apakah kombinasi Anda memenuhi level minimum yang diwajibkan secara hukum.
Instan
Kalkulasi real time saat Anda mengubah warna.
Tanpa registrasi
Periksa warna Anda tanpa akun atau instalasi.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Masukkan warna Anda
Pilih warna teks dan warna latar belakang menggunakan pemilih warna atau dengan memasukkan nilai hex, RGB, atau HSL secara langsung.
Dapatkan rasio kontras
Rasio kontras dihitung secara instan menggunakan rumus luminans relatif WCAG 2.1. Lihat apakah memenuhi level AA dan AAA.
Sesuaikan hingga memenuhi syarat
Jika kontras tidak memenuhi persyaratan, sesuaikan warnanya. Pemeriksa memberi tahu Anda level kesesuaian mana yang dicapai kombinasi warna Anda.
FAQ
Ada pertanyaan?
WCAG (Web Content Accessibility Guidelines) adalah panduan aksesibilitas konten web yang dikembangkan oleh W3C (World Wide Web Consortium). Ini adalah standar referensi internasional untuk membuat konten web dapat diakses oleh orang dengan disabilitas visual, pendengaran, motorik, dan kognitif. Versi saat ini adalah WCAG 2.1 (diterbitkan Juni 2018); WCAG 2.2 diterbitkan pada Oktober 2023 dengan kriteria sukses tambahan. WCAG 3.0 sedang dalam pengembangan dan mengusulkan model kontras baru berdasarkan APCA (Advanced Perceptual Contrast Algorithm).
WCAG mendefinisikan tiga level kesesuaian. Level A: persyaratan dasar yang jika tidak terpenuhi membuat konten tidak dapat diakses. Level AA: standar yang direkomendasikan untuk sebagian besar situs web; diwajibkan oleh hukum di banyak negara. Level AAA: tingkat aksesibilitas tertinggi, tidak selalu dapat dicapai untuk semua konten. Untuk kontras warna: AA mengharuskan 4,5:1 untuk teks normal dan 3:1 untuk teks besar. AAA mengharuskan 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Undang-undang aksesibilitas web (ADA di AS, EAA di Eropa) umumnya mengharuskan level AA.
Rasio kontras adalah angka antara 1:1 (tanpa kontras, warna identik) dan 21:1 (kontras maksimum, hitam di atas putih). Dihitung sebagai (L1 + 0,05) / (L2 + 0,05), di mana L1 adalah luminans relatif warna yang lebih terang dan L2 adalah warna yang lebih gelap. Luminans relatif warna sRGB dihitung dengan mengubah setiap saluran (R, G, B) dari gamma ke linier: jika nilai yang dinormalisasi kurang dari atau sama dengan 0,03928, gunakan nilai/12,92; jika tidak, gunakan rumus eksponen. Luminans akhir adalah 0,2126xR + 0,7152xG + 0,0722xB.
Di Amerika Serikat, Americans with Disabilities Act (ADA) berlaku untuk situs web entitas yang tercakup dan pengadilan telah menetapkan WCAG 2.1 level AA sebagai standar yang berlaku. Di Eropa, European Accessibility Act (Direktif 2019/882) mulai berlaku pada 28 Juni 2025, mengharuskan produk dan layanan digital memenuhi standar aksesibilitas yang setara dengan WCAG 2.1 AA. Mengabaikan persyaratan ini dapat mengakibatkan litigasi dan denda.
WCAG 2.1 mendefinisikan teks besar sebagai teks minimal 18 poin (sekitar 24px) dengan bobot normal, atau minimal 14 poin (sekitar 18,67px) dalam tebal (font-weight 700 atau lebih). Teks ini memiliki persyaratan kontras yang lebih rendah (3:1 untuk AA alih-alih 4,5:1) karena ukurannya yang lebih besar membantu keterbacaan bahkan dengan kontras yang lebih rendah. Logo dan teks yang murni dekoratif dikecualikan dari persyaratan kontras. Komponen UI (tombol, input) memerlukan minimum 3:1 untuk bagian aktifnya (kriteria 1.4.11 Non-text Contrast).
Kontras warna WCAG: aksesibilitas web, undang-undang, dan algoritma
Web Content Accessibility Guidelines (WCAG) berasal dari Web Accessibility Initiative (WAI) W3C, yang diluncurkan pada tahun 1997. WCAG 1.0 diterbitkan pada Mei 1999. WCAG 2.0 hadir pada Desember 2008, memperkenalkan model empat prinsip: Perceivable, Operable, Understandable, dan Robust (POUR). WCAG 2.1 (Juni 2018) menambahkan 17 kriteria sukses baru, terutama untuk pengguna mobile, orang dengan penglihatan rendah, dan pengguna dengan disabilitas kognitif. Kriteria 1.4.3 (Minimum Contrast) menetapkan persyaratan rasio kontras yang membuat alat ini diperlukan. Section 508 dari US Rehabilitation Act (diperbarui pada 2017) menginkorporasi dengan referensi WCAG 2.0 level AA untuk teknologi informasi federal.
Rumus luminans relatif WCAG didasarkan pada ruang warna sRGB (IEC 61966-2-1), standar untuk monitor komputer sejak 1999. Transformasi gamma-ke-linier sRGB memperkirakan kurva gamma aktual dari standar sRGB. Koefisien luminositas (0,2126 untuk merah, 0,7152 untuk hijau, 0,0722 untuk biru) mencerminkan sensitivitas mata manusia terhadap setiap panjang gelombang, berdasarkan karya International Commission on Illumination (CIE). Lea Verou, peneliti MIT dan anggota W3C CSS Working Group, mengembangkan implementasi referensi yang banyak dikutip dan membuat alat contrast-ratio.com pada tahun 2012.
WCAG 3.0 (saat ini dalam draf) mengusulkan mengganti rumus kontras saat ini dengan APCA (Advanced Perceptual Contrast Algorithm), yang dikembangkan oleh Andrew Somers. APCA lebih baik memodelkan persepsi visual manusia dengan memperhitungkan polaritas kontras (teks gelap di atas latar terang vs. teks terang di atas latar gelap dipersepsi secara berbeda), ukuran dan bobot font, serta adaptasi sistem visual. Skala APCA berjalan dari 0 hingga 106 Lc (Lightness Contrast), dan ambang batasnya berbeda secara signifikan dari rasio WCAG 2.x. Transisi ke WCAG 3.0 akan bertahap dan versi finalnya tidak diharapkan sebelum tahun 2026.