Periksa rasio kontras antara dua warna dan lihat apakah lolos WCAG AA dan AAA, langsung di browser Anda.
Rasio kontras adalah angka yang dipakai WCAG untuk menentukan apakah sebuah teks terbaca. Angka ini membandingkan luminansi relatif dua warna pada skala dari 1:1 (identik) hingga 21:1 (hitam pekat di atas putih murni). Pada level AA, WCAG meminta setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar; level AAA menaikkannya menjadi 7:1 dan 4.5:1. Komponen antarmuka — tombol ikon, garis tepi input, cincin fokus — membutuhkan 3:1 terhadap apa pun yang ada di sebelahnya.
Perhitungannya bukan sekadar selisih kecerahan. Setiap kanal sRGB dilinearkan terlebih dahulu: dibagi 12.92 bila berada di bawah ambang 0.03928, selebihnya dinormalisasi lalu dipangkatkan 2.4. Langkah ini ada karena nilai layar disandikan dengan gamma dan tidak sebanding dengan cahaya yang dipancarkan. Kanal linear itu kemudian diberi bobot 0.2126 untuk merah, 0.7152 untuk hijau dan 0.0722 untuk biru, mencerminkan seberapa besar sumbangan tiap warna primer terhadap kecerahan yang kita rasakan — hijau mendominasi dengan selisih yang jauh. Terakhir, kedua luminansi itu dimasukkan ke (L1 + 0.05) / (L2 + 0.05), di mana suku 0.05 memodelkan cahaya yang tetap dipantulkan layar sungguhan bahkan saat sedang menampilkan hitam. Konstanta itulah yang membuat hitam di atas putih tepat 21:1 dan bukan tak hingga.
Gunakan sebelum rilis, karena palet merek lebih sering gagal daripada yang diduga orang. Abu-abu sedang seperti #777777 di atas putih mendarat di 4.48:1 — nyaman di monitor yang terang, hanya seperseratus di bawah ambang AA, dan benar-benar bermasalah di ponsel saat terkena sinar matahari. Tombol saran menyasar tepat kasus itu: tombol tersebut menaik-turunkan lightness HSL warna teks dalam langkah setengah persen dan berhenti pada nilai pertama yang mencapai 4.5:1, sambil mempertahankan rona dan saturasi pilihan Anda. Satu batasan yang perlu jujur disebut: rasio ini hanya mengukur luminansi, jadi ia tidak berkata apa pun tentang kebingungan rona bagi pembaca buta warna dan tidak pula tentang ketebalan huruf di luar aturan teks besar. Semuanya berjalan secara lokal di browser Anda.
Luminansi relatif: untuk setiap kanal sRGB c yang dinormalisasi ke 0–1, pakai c / 12.92 bila c ≤ 0.03928 dan ((c + 0.055) / 1.055)^2.4 bila tidak; lalu L = 0.2126·R + 0.7152·G + 0.0722·B. Rasio kontras = (L1 + 0.05) / (L2 + 0.05), di mana L1 adalah yang lebih terang dari kedua warna. Ambangnya: 4.5:1 teks normal AA, 7:1 teks normal AAA, 3:1 teks besar AA dan komponen UI, 4.5:1 teks besar AAA.
Teks berukuran 18pt (24px) ke atas, atau 14pt (sekitar 18.7px) ke atas bila tebal. Teks besar hanya butuh 3:1 pada AA dan 4.5:1 pada AAA, karena bentuk huruf yang lebih besar dan lebih tebal tetap terbaca pada kontras yang lebih rendah.
Karena ambangnya adalah batas mati. #777777 di atas putih menghasilkan 4.48:1 sedangkan AA menuntut 4.5:1, jadi gagalnya hanya dua perseratus. Menggelapkannya satu langkah menjadi #767676 mencapai 4.54:1 dan lolos — dan itulah persis yang dilakukan tombol saran.
Ya. Kriteria keberhasilan WCAG 1.4.11 menuntut 3:1 antara sebuah komponen antarmuka pengguna atau grafik bermakna dengan warna di sekitarnya. Garis tepi input, status sakelar, indikator fokus dan tombol khusus ikon semuanya termasuk di dalamnya.
Alat ini menerapkan rasio WCAG 2.x, yang saat ini menjadi acuan undang-undang aksesibilitas, audit dan sistem desain. APCA adalah algoritma perseptual yang diusulkan untuk WCAG 3; angkanya berbeda dan belum menjadi syarat kepatuhan.
Tidak. Luminansi dan rasionya dihitung dengan JavaScript di perangkat Anda. Tidak ada yang dikirim ke server mana pun atau disimpan di mana pun.
Vai.la mengubah URL apa pun menjadi tautan pendek dengan statistik klik, QR Code, dan biolink Anda sendiri.
Vai.la tidak bertanggung jawab atas cara alat-alat ini digunakan maupun atas keputusan yang diambil berdasarkan hasilnya.