Pemeriksa Kontras Warna
Periksa kontras warna teks dan latar belakang sesuai WCAG 2.1 AA dan AAA — rasio kontras seketika, pratinjau langsung, dan lencana lulus/gagal.
Warna
4.48:1Makin tinggi makin baik. WCAG menuntut minimal 4,5:1 untuk teks normal.Aa teks normal — rubah cokelat cepat melompat
Aa teks besar
Tentang alat ini
Pemeriksa kontras warna ini mengukur seberapa terbaca teks terhadap latar belakangnya menggunakan rumus kontras WCAG 2.1. Masukkan warna teks dan warna latar belakang sebagai nilai HEX, atau pilih secara visual, dan alat ini langsung menampilkan rasio kontras (misalnya 4,52:1) beserta lencana lulus atau gagal untuk tingkat AA dan AAA dari Pedoman Aksesibilitas Konten Web. Pratinjau langsung menampilkan contoh teks dalam warna pilihan Anda agar Anda bisa menilai hasilnya sekilas, dan tombol tukar membalik latar depan dan latar belakang. Semuanya berjalan di peramban Anda, sehingga cepat, privat, dan dapat dipakai luring setelah dimuat — ideal untuk desainer, pengembang, dan siapa pun yang membangun antarmuka yang aksesibel.
Cara memakai
- 1 Masukkan warna teks (latar depan) Anda sebagai nilai HEX atau pilih dengan pemilih warna.
- 2 Masukkan warna latar belakang dengan cara yang sama; #rgb dan #rrggbb sama-sama didukung.
- 3 Baca rasio kontras dan lencana AA/AAA untuk teks normal dan besar.
- 4 Gunakan tombol tukar dan sesuaikan hingga mencapai setidaknya 4,5:1.
Cara kerjanya
Setiap warna pertama-tama dikonversi dari sRGB ke cahaya linear: setiap kanal dibagi 255, dan nilai di atas 0,03928 dipangkatkan mengikuti kurva gama. Luminans relatif kemudian L = 0,2126·R + 0,7152·G + 0,0722·B, dengan bobot terbesar pada hijau karena mata paling peka terhadapnya. Rasio kontras antara dua warna adalah (L1 + 0,05) / (L2 + 0,05), dengan L1 warna yang lebih terang dan L2 yang lebih gelap. Ini memberi nilai dari 1:1 (warna identik) hingga 21:1 (hitam murni di atas putih murni). WCAG 2.1 menuntut rasio minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar pada tingkat AA, naik menjadi 7:1 dan 4,5:1 untuk AAA. Teks besar berarti kira-kira 18,66px tebal atau 24px normal ke atas.
Pertanyaan umum
Rasio kontras berapa yang diperlukan untuk lolos WCAG?
Untuk WCAG 2.1 Tingkat AA Anda perlu minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Tingkat AAA lebih ketat, menuntut 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Sebagian besar situs menargetkan AA sebagai dasar hukum dan praktis.
Apa yang dihitung sebagai teks besar?
WCAG mendefinisikan teks besar sebagai minimal 18,66px (sekitar 14pt) dan tebal, atau minimal 24px (sekitar 18pt) pada ketebalan apa pun. Teks besar lebih mudah dibaca, sehingga diizinkan ambang kontras lebih rendah (3:1 untuk AA, 4,5:1 untuk AAA).
Bagaimana rasio kontras dihitung?
Luminans relatif tiap warna dihitung dari kanal merah, hijau, dan biru yang telah dilinearkan (L = 0,2126R + 0,7152G + 0,0722B). Rasionya kemudian (lebih terang + 0,05) / (lebih gelap + 0,05), memberi nilai dari 1:1 hingga 21:1 untuk hitam di atas putih.
Mengapa hitam murni di atas putih bernilai 21:1?
Hitam memiliki luminans relatif 0 dan putih 1. Memasukkannya ke (1 + 0,05) / (0 + 0,05) menghasilkan 21, rasio kontras maksimum yang mungkin. Itulah sebabnya #000000 di atas #ffffff lolos setiap tingkat WCAG.
Apakah kontras warna memengaruhi SEO dan hukum aksesibilitas?
Ya. Kontras yang memadai adalah bagian dari standar aksesibilitas yang dirujuk oleh hukum seperti ADA, Section 508, dan Undang-Undang Aksesibilitas Eropa, dan keterbacaan yang baik meningkatkan metrik kegunaan. Memenuhi WCAG AA mengurangi risiko hukum dan membuat konten Anda dapat dipakai oleh penyandang gangguan penglihatan atau buta warna.
Alat dan penggunaan terkait
Pemeriksa kontras penting untuk desain web dan aplikasi yang aksesibel. Padukan dengan konverter warna untuk berpindah antara HEX, RGB, dan HSL saat menyetel palet Anda, dan dengan kalkulator persentase saat menskalakan jarak atau opasitas. Desainer, pengembang front-end, dan pembuat konten memakainya agar tombol, label, dan teks isi tetap terbaca bagi semua orang.