Apa itu rasio kontras?

Dengan menggunakan Framer, Anda dapat merancang desain situs web Anda dan pengalaman penggunanya. Namun, sebelum meluncurkan situs, sangat disarankan untuk memastikan rasio kontras memenuhi standar aksesibilitas web.

Rasio kontras mengukur perbedaan kecerahan antara dua warna, biasanya antara latar depan (teks atau grafik) dan latar belakang. Rasio ini diukur dalam skala dari 1:1 hingga 21:1, dan semakin tinggi angka, semakin tinggi rasio kontrasnya. Rasio kontras yang cukup menjamin keterbacaan dan visibilitas konten. Ini sangat penting bagi pengguna dengan gangguan visual, buta warna, atau masalah kognitif lainnya.

Panduan WCAG tentang rasio kontras

Web Content Accessibility Guidelines (WCAG) memberikan rekomendasi rasio kontras khusus untuk mendukung pengalaman digital yang lebih aksesibel.

Menurut WCAG 2.1, untuk mematuhi Level AA, rasio kontras minimum berikut harus dipenuhi.

• Teks umum: Minimum 4.5:1

• Teks besar 18pt atau 14pt: Minimum 3:1

Sebelum mempublikasikan situs web Anda, pastikan untuk memeriksa rasio kontras menggunakan salah satu alat pemeriksa kontras berikut.

• WebAIM Contrast Checker

• Use Contrast website

• Colour Contrast Checker

Memahami aksesibilitas WCAG

WCAG membagi panduan aksesibilitas web menjadi tiga tingkat (Level A, AA, AAA). Tingkat ini menunjukkan intensitas kriteria dalam menjamin aksesibilitas konten. Pastikan tingkat mana yang ingin Anda capai saat mendesain dengan FramerFramer.

Tiga tingkatan aksesibilitas WCAG

• Level A: Memenuhi aksesibilitas dasar. Misalnya, menyediakan teks alternatif untuk gambar, termasuk salah satu persyaratan paling dasar.

• Level AA: Sebagian besar pengguna dapat mengaksesnya, dan sebagian besar layanan digital mematoknya sebagai standar. Rasio kontras yang ditekankan (teks umum 4.5:1, teks besar 3:1) adalah standar Level AA.

• Level AAA: Menyediakan akses untuk semua pengguna dengan kriteria yang sangat ketat. Persyaratan tinggi termasuk menyediakan bahasa isyarat untuk video atau menyetel rasio kontras teks menjadi 7:1 yang sangat tinggi. Standar ini mungkin sulit diterapkan pada semua situs web.

Kriteria utama Level AA

Di antara berbagai elemen aksesibilitas web, rasio kontras adalah faktor penting yang membantu pengguna membaca konten dengan mudah. Pertimbangkan kembali panduan Level AA yang mempertimbangkan sebagian besar pengguna.

• Rasio kontras teks umum: Rasio kontras antara teks dan latar belakang harus dipertahankan minimal 4.5:1. Ini adalah standar untuk memastikan keterbacaan teks umum.

• Rasio kontras teks besar: Rasio antara teks dan latar belakang harus dipertahankan minimal 3:1. Teks besar (ukuran 18pt atau teks tebal lebih dari 14pt) bisa jadi memiliki kontras yang kurang penting karena ukurannya, namun standar ini harus dipenuhi untuk memastikan keterbacaan cukup.

Mengikuti standar rasio kontras akan meningkatkan aksesibilitas visual sehingga berbagai pengguna dapat membaca konten Anda dengan lebih mudah. Capai standar tersebut untuk memberikan aksesibilitas yang lebih tinggi pada pengguna.

Pertanyaan yang Sering Diajukan (FAQ)

P. Apakah Framer memiliki fitur otomatis untuk memeriksa rasio kontras?

• Tidak. Framer sendiri tidak memiliki pemeriksa rasio kontras real-time bawaan. FramerFramer lebih fokus pada desain dan pembangunan situs web, sehingga Anda perlu menggunakan alat eksternal seperti WebAIM Contrast Checker yang disebutkan dalam tulisan ini untuk memeriksa palet warna dan kombinasi teks.

P. Apakah memenuhi standar Level AAA akan membuat situs web lebih baik?

• Ya, Level AAA menyediakan aksesibilitas tertinggi, namun standar ini sangat ketat sehingga bisa jadi pembatas dalam desain situs web atau implementasi fungsi tertentu. Oleh karena itu, Level AA lebih umum dijadikan standar.

P. Apakah standar rasio kontras harus diterapkan pada elemen seperti logo atau gambar di Framer?

• Tidak. Standar rasio kontras dirancang terutama untuk menjamin keterbacaan teks. Tidak wajib menerapkan standar rasio kontras pada elemen non-teks yang tidak memiliki tujuan informasi.

Artikel ini adalah adaptasi dari ‘Understanding contrast ratio’ di blog resmi Framer.