About
Menampilkan dalam Bahasa Indonesia Ganti ke Inggris

Konverter Warna & Pemeriksa Kontras

Konversi antara HEX, RGB, dan HSL, dan periksa kontras aksesibilitas WCAG antara dua warna mana pun. Semuanya berjalan di browser Anda.

Konverter warna

Pemeriksa kontras WCAG

Teks normal (16 px)

Teks besar (24 px / tebal 18.66)

Rasio kontras —
WCAG AA Teks normal— Teks besar—
WCAG AAA Teks normal— Teks besar—
  1. Pilih warna dengan swatch atau ketik nilai HEX, RGB, atau HSL — yang lain akan diperbarui otomatis.
  2. Gulir ke bawah ke Pemeriksa kontras dan atur warna latar depan dan latar belakang.
  3. Baca rasio yang dihitung dan lencana lulus-gagal AA / AAA untuk teks normal dan besar.
  4. Sesuaikan salah satu warna hingga rasio melewati ambang yang dibutuhkan desain Anda.
Apa fungsinya?

Konverter menerjemahkan satu warna antara HEX (#rrggbb), RGB (rgb(r, g, b)), dan HSL (hsl(h, s%, l%)) secara real-time, sehingga Anda bisa menempel format apa pun yang digunakan sistem desain Anda dan mendapatkan dua lainnya. Pemeriksa kontras mengambil latar depan dan latar belakang, melinearkan keduanya melalui kurva gamma sRGB, dan melaporkan rasio kontras WCAG 2.x bersama dengan putusan AA / AAA untuk ukuran teks normal dan besar.

Contoh

Input — biru merek yang khas:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

Dipasangkan dengan putih (#ffffff) sebagai latar belakang:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

Mengapa WCAG AAA gagal untuk pasangan warna ini?

Ini adalah jebakan kontras dan konversi paling umum yang perlu diperhatikan:

  • Mengacaukan AA large dengan AA normal. Teks besar hanya butuh 3:1, jadi tautan yang terbaca baik di H1 masih bisa gagal di ukuran body. Jika pasangan mencapai 3.5:1, itu lulus untuk judul tetapi gagal untuk paragraf.
  • Menggunakan lightness HSL sebagai proksi kontras. hsl(0, 100%, 50%) (merah) dan hsl(240, 100%, 50%) (biru) keduanya memiliki L=50% tetapi luminansi sangat berbeda. Selalu hitung kontras dari nilai RGB, bukan dari lightness HSL.
  • Lupa kompositing alpha. Teks pada rgba(0, 0, 0, 0.6) di atas putih secara efektif adalah #666666. Periksa HEX yang diratakan, bukan nilai semi-transparan.
  • Panjang hex salah. #fff berkembang menjadi #ffffff, tetapi #ffff adalah bentuk pendek 4-digit dengan byte alpha. Periksa kembali jumlah digit ketika field HEX menolak input diam-diam.
  • Mencampur display-P3 dan sRGB. Warna yang diambil dari alat desain seperti Figma dalam mode wide-gamut bisa berada di luar rentang sRGB, dan browser akan memotongnya. Konversi ke sRGB di alat sumber sebelum menyalin HEX.
  • Menguji kontras hanya terhadap putih murni. Jika tata letak nyata menaruh teks di #f3f4f6 atau di foto, kontras yang terlihat lebih rendah. Uji dengan latar belakang sebenarnya.
Pertanyaan yang sering diajukan

Rasio kontras apa yang saya butuhkan untuk lulus WCAG AA?

WCAG 2.1 AA membutuhkan 4.5:1 untuk teks body normal dan 3:1 untuk teks besar, di mana besar berarti setidaknya 18 pt (24 px) reguler atau 14 pt (18.66 px) tebal. Komponen UI dan objek grafis membutuhkan 3:1 terhadap latar belakangnya. AAA menaikkan bar ke 7:1 untuk teks normal dan 4.5:1 untuk teks besar.

Mengapa HSL yang saya ketik kembali memberikan nilai RGB sedikit berbeda?

HSL disimpan sebagai persentase integer di sebagian besar alat, sehingga round-trip RGB ke HSL ke RGB bisa bergeser satu unit di setiap saluran. Pergeseran itu dalam batas JND dan tidak terlihat di layar, tetapi jika Anda perlu ketepatan round-trip yang presisi, jaga nilai HEX atau RGB sebagai sumber kebenaran dan perlakukan HSL sebagai tampilan.

Apakah alat ini menggunakan koreksi gamma sRGB untuk kontras?

Ya. Perhitungan kontras mengikuti rumus WCAG 2.x, yang melinearkan setiap saluran sRGB dengan kurva gamma, menghitung luminansi relatif, dan mengambil (L1 + 0.05) / (L2 + 0.05). Rata-rata saluran sederhana atau lightness HSL naif memberikan angka menyesatkan dan tidak akan cocok dengan hasil WCAG.

Bagaimana cara menangani warna alpha atau semi-transparan?

Kontras WCAG didefinisikan terhadap latar belakang solid, jadi ratakan alpha apa pun dengan mengkomposit latar depan di atas latar belakang nyata terlebih dahulu. Misalnya, blok teks hitam 50% di halaman putih efektifnya adalah #808080 di #ffffff. Lewatkan HEX yang diratakan itu ke pemeriksa alih-alih nilai semi-transparan.

Apakah HEX #rgb sama dengan #rrggbb?

Ya. Bentuk pendek 3-digit mengembangkan setiap nibble dengan mengulangnya, jadi #f0c menjadi #ff00cc. Bentuk 4-digit dan 8-digit menambahkan saluran alpha. Alat ini menerima HEX 3-digit, 6-digit, dan 8-digit, dan memperlakukan byte alpha hanya sebagai informasi untuk kontras karena WCAG memerlukan warna komposit solid.

Apakah Anda menyimpan warna yang saya ketik atau pilih?

Tidak. Kami tidak menyimpan catatan warna apa pun yang Anda uji, konversi, atau periksa kontrasnya. Semua yang Anda ketik atau seret ke picker dibuang saat Anda menutup tab — tidak ada logging, tidak ada analitik pada nilai warna Anda. Intip developer tools browser Anda jika ingin melihat sendiri.