Pemeriksa Aksesibilitas Warna
Masukkan warna teks dan latar belakang (kode hex) untuk memeriksa rasio kontras dan kesesuaian dengan WCAG.
Ini adalah teks tebal berukuran besar.
Ini adalah teks ukuran normal.
21.00:1
Rasio Kontras
Teks Normal (AA)
Teks Besar (AA)
18pt+ or 14pt+ bold
Komponen UI (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
Cara menggunakan Pemeriksa Aksesibilitas Warna
- 1
Masukkan dua warna
Sediakan warna latar depan (teks) dan warna latar belakang sebagai kode hex, misalnya #1a1a1a dan #ffffff.
- 2
Periksa kontras
Klik Check Accessibility untuk menghitung rasio kontras antara kedua warna.
- 3
Tinjau hasil WCAG
Lihat lencana lulus atau gagal untuk AA dan AAA pada level teks normal, teks besar, dan komponen UI, serta lihat pratinjau langsungnya.
- 4
Sesuaikan seperlunya
Tukar warna atau ubah nilai hex hingga kombinasi memenuhi level WCAG yang dibutuhkan proyek Anda.
Kontras Warna WCAG, Diperjelas
Apa arti rasio kontras
Kontras warna dinyatakan sebagai rasio antara warna yang lebih terang dan yang lebih gelap dari dua warna, berkisar dari 1:1 hingga 21:1. Rasio 1:1 berarti kedua warna identik, sehingga teks akan sepenuhnya tak terlihat di atas latar belakangnya, sedangkan 21:1 adalah maksimum, yaitu kontras antara hitam murni dan putih murni. Setiap pasangan lainnya berada di suatu titik di antaranya. Rasio ini bukan tentang warna apa yang Anda gunakan atau seberapa berbeda corak warnanya; ia murni tentang perbedaan tingkat kecerahannya, dan itulah sebabnya dua warna yang tampak berbeda bagi Anda masih bisa gagal.
Satu angka tunggal ini adalah tulang punggung warna yang aksesibel, karena ia memprediksi apakah teks akan terbaca bagi rentang orang dan kondisi seluas mungkin. Pemeriksa ini menghitungnya untuk pasangan warna latar depan dan latar belakang apa pun yang Anda masukkan dan membandingkan hasilnya dengan ambang yang telah ditetapkan.
Ambang AA yang harus Anda capai
WCAG level AA adalah standar yang ditargetkan sebagian besar situs web dan yang dirujuk banyak undang-undang aksesibilitas serta aturan pengadaan, jadi perlakukan ini sebagai dasar Anda. AA mensyaratkan rasio kontras minimal 4.5:1 untuk teks tubuh normal dan minimal 3:1 untuk teks besar. Dua angka itu mencakup sebagian besar keputusan desain sehari-hari, dan lencana di alat ini langsung memberi tahu Anda apakah suatu pasangan melewati masing-masingnya.
Jika sebuah kombinasi lulus AA untuk teks normal maupun teks besar, Anda memiliki fondasi yang kokoh dan dapat dipertahankan. Jika gagal pada teks normal tetapi lulus pada teks besar, Anda masih bisa menggunakannya, tetapi hanya pada ukuran besar, yang merupakan batasan yang layak diputuskan secara sengaja alih-alih ditemukan belakangan.
AAA dan apa arti teks besar
Level AAA adalah tingkat yang lebih tinggi, ditujukan untuk keterbacaan maksimal, dan ia menaikkan persyaratan menjadi 7:1 untuk teks normal dan 4.5:1 untuk teks besar. AAA tidak diharapkan untuk keseluruhan situs dan sering kali tidak praktis untuk palet merek, tetapi ia adalah sasaran yang layak untuk bacaan panjang, konten kritis, dan audiens dengan penglihatan rendah. Pemeriksa ini melaporkan AAA berdampingan dengan AA sehingga Anda dapat melihat seberapa besar ruang lebih yang dimiliki sebuah pasangan.
Teks besar memiliki definisi yang presisi yang mengejutkan orang: ia berarti kira-kira 18pt ke atas, atau 14pt ke atas bila tebal, yang setara dengan sekitar 24px reguler atau 18.66px tebal. Alasan ambangnya lebih rendah hanyalah karena bentuk huruf yang lebih besar dan lebih tebal tetap terbaca pada kontras yang lebih kecil. Apa pun yang lebih kecil dari batas itu harus memenuhi rasio teks normal yang lebih ketat, jadi jangan berasumsi sebuah judul yang tampak besar memenuhi syarat tanpa memeriksa ukuran dan ketebalan yang sebenarnya.
Mengapa kontras penting bagi pengguna nyata
Kontras yang memadai bukanlah sekadar mencentang kotak; ia menentukan apakah orang nyata dapat menggunakan antarmuka Anda. Pengguna dengan penglihatan rendah, yang menjadi lebih umum seiring bertambahnya usia, mengandalkannya secara langsung, begitu pula siapa pun yang membaca layar di bawah sinar matahari terik, pada layar yang redup atau murah, atau saat lelah. Kontras juga berinteraksi dengan defisiensi penglihatan warna: karena rasio ini didasarkan pada kecerahan alih-alih corak, pasangan yang bergantung pada perbedaan merah-versus-hijau bisa runtuh bagi seseorang yang tak dapat membedakan corak-corak itu, sementara perbedaan kecerahan yang kuat tetap terbaca.
Poin terakhir itu membawa satu akibat yang layak dinyatakan secara jelas: jangan pernah mengandalkan warna saja untuk menyampaikan makna. Padukan warna dengan teks, ikon, garis bawah, atau bentuk agar informasi tetap bertahan baik di kontras rendah maupun pada kebutaan warna.
Cara rasio dihitung
Matematika di balik lencana ini dimulai dengan luminans relatif, sebuah ukuran seberapa terang tiap warna tampak bagi mata manusia. Ia bukan rata-rata datar dari kanal merah, hijau, dan biru, karena mata jauh lebih peka terhadap hijau daripada biru, sehingga hijau diberi bobot paling besar dan biru paling kecil. Tiap kanal juga melewati koreksi gamma kecil terlebih dahulu agar hasilnya mengikuti persepsi alih-alih sinyal mentah.
Begitu kedua warna memiliki nilai luminans, rasio kontras adalah luminans yang lebih terang ditambah sebuah konstanta kecil, dibagi luminans yang lebih gelap ditambah konstanta yang sama. Konstanta itu menjaga rumusnya tetap berperilaku baik di dekat hitam. Anda tidak perlu menjalankan ini secara manual, tetapi mengetahui bahwa luminans, bukan corak, yang menggerakkan hasilnya menjelaskan mengapa sekadar memilih warna yang tampak berbeda saja tidak cukup.
Kontras non-teks dan UI
Aturan kontras tidak terbatas pada teks. WCAG juga menetapkan minimum 3:1 untuk batas visual komponen interaktif dan grafik bermakna, yang ditandai pemeriksa ini di bawah komponen UI. Itu mencakup garis tepi sebuah kolom masukan teks, garis luar sebuah tombol, tanda centang di dalam kotak centang, indikator fokus, dan bagian-bagian dari ikon atau bagan yang harus dipahami pengguna untuk mengerti maknanya. Garis tepi masukan abu-abu pudar pada kartu putih adalah kegagalan klasik dari aturan ini, bahkan ketika teks label di dalamnya lulus dengan mudah.
Merancang kontrol agar melewati 3:1 terhadap sekelilingnya berarti orang benar-benar bisa menemukan dan mengoperasikannya, bukan hanya membaca kata-kata di sebelahnya. Uji tepi dan keadaan komponennya, bukan hanya teksnya.
Kegagalan umum dan cara memperbaikinya
Ada beberapa pola yang gagal berulang kali. Teks placeholder atau teks sekunder abu-abu muda pada putih adalah yang paling umum; nilai seperti abu-abu sedang di sekitar #999999 pada putih jatuh di bawah 4.5:1 dan perlu digelapkan. Warna merek adalah pelanggar berulang lainnya, terutama biru, hijau, dan oranye nada sedang yang dipakai untuk teks tubuh atau untuk teks putih pada tombol berwarna, di mana pasangannya sering jatuh sedikit kurang dari AA. Garis tepi tipis berwarna muda pada latar belakang muda juga rutin meleset dari ambang 3:1 untuk UI.
Perbaikannya biasanya kecil. Gelapkan latar depan atau terangkan latar belakang sampai rasionya melewati garis batas, yang dalam istilah HSL sering berarti menyesuaikan tingkat kecerahan secukupnya sambil menjaga corak tetap utuh agar merek tetap terbaca. Untuk teks pada gambar atau gradien yang ramai, tambahkan lapisan tirai padat atau semitransparan di belakangnya agar area kasus terburuknya tetap lulus. Masukkan warna sesungguhnya Anda di sini, amati rasio serta lencana AA dan AAA diperbarui, dan ubah nilainya sedikit demi sedikit hingga setiap level yang dibutuhkan proyek Anda berubah menjadi hijau.
Pertanyaan yang sering diajukan
Apa itu rasio kontras dan apa yang dianggap baik?
Apa perbedaan antara AA dan AAA?
Mengapa teks besar lulus sementara teks normal gagal?
Format warna apa yang harus saya masukkan?
Apakah pemeriksa ini gratis dan apakah mengirim warna saya ke mana pun?
Alat terkait
Lanjutkan dengan alat praktis ini