⇄ Tukar warna

Cara menggunakan

1. Pilih warna latar depan (teks) dan warna latar belakang.
2. Rasio kontras diperbarui seketika.
3. Periksa peringkat WCAG (AA/AAA) untuk teks normal dan besar.
4. Klik Tukar untuk membalik warna.

Pertanyaan umum

Apa itu WCAG?

WCAG (Web Content Accessibility Guidelines) adalah standar internasional untuk membuat konten web dapat diakses. Tingkat AA adalah standar yang paling umum diperlukan. Tingkat AAA adalah yang tertinggi.

Apa yang termasuk "teks besar"?

Teks besar didefinisikan sebagai setidaknya 18 pt (24 px) atau 14 pt (18,66 px) tebal. Ini memiliki persyaratan kontras yang lebih rendah karena lebih mudah dibaca.

Rasio kontras berapa yang harus dituju?

Untuk teks isi, targetkan setidaknya 4,5:1 (AA). Untuk aksesibilitas terbaik, targetkan 7:1 (AAA). Heading dan teks besar membutuhkan setidaknya 3:1.

Apa yang sebenarnya diukur WCAG

«Kontras» dalam aksesibilitas web bukanlah «seberapa berbeda tampilan warna», melainkan rasio luminans relatif yang tepat antara dua warna. Luminans adalah perkiraan perseptual tentang seberapa terang suatu warna tampak bagi pengamat yang memiliki penglihatan normal. Rasionya berkisar dari 1:1 (dua warna dengan luminans yang sama, tidak terlihat satu sama lain) hingga 21:1 (hitam murni #000000 terhadap putih murni #ffffff). Tiga kriteria keberhasilan normatif WCAG menggunakan rasio ini:

• 1.4.3 Contrast (Minimum), Level AA: setidaknya 4.5:1 untuk teks normal, 3:1 untuk teks besar.
• 1.4.6 Contrast (Enhanced), Level AAA: setidaknya 7:1 normal, 4.5:1 besar.
• 1.4.11 Non-text Contrast, Level AA (ditambahkan di WCAG 2.1), setidaknya 3:1 untuk komponen UI dan objek grafis bermakna terhadap warna yang berdekatan.

Ambang batas 4.5:1 bukan sewenang-wenang. Turunan WCAG sendiri menggunakan baseline ANSI 3:1 untuk penglihatan normal dikalikan 1.5 untuk pengguna dengan ketajaman 20/40 (ambang batas yang sering digunakan untuk mendefinisikan «low vision» secara hukum). 4,5 = 3 × 1,5. Ambang batas AAA 7:1 memperpanjang logika yang sama hingga sekitar ketajaman 20/80. Logo, nama merek, dan teks insidental atau dekoratif dikecualikan, tetapi semua yang lain tunduk pada aturan ini.

Rumusnya

Rumus kontras dalam teknik WCAG G18 memiliki tiga langkah. Inputnya adalah nilai saluran sRGB 8-bit (0-255), masing-masing pertama dikonversi ke rentang 0-1:

1. Linearisasi sRGB (batalkan kurva gamma). Untuk setiap saluran V: jika V ≤ 0.04045, V_linear = V ÷ 12.92; jika tidak V_linear = ((V + 0.055) ÷ 1.055)^2.4. (Dokumen WCAG lama menggunakan 0.03928; errata W3C diperbarui ke 0.04045 agar sesuai dengan spesifikasi sRGB formal, perbedaan numeriknya tidak signifikan.)
2. Hitung luminans relatif: L = 0.2126·R + 0.7152·G + 0.0722·B (dilinearisasi). Bobot berasal dari fungsi luminositas fotopik pengamat standar CIE 1931, mata manusia paling sensitif terhadap hijau (~71%), kemudian merah (~21%), kemudian biru (~7%). Inilah mengapa teks biru murni di atas putih bisa gagal kontras meskipun warnanya terlihat sangat berbeda.
3. Ambil rasionya: (L1 + 0.05) ÷ (L2 + 0.05), di mana L1 adalah warna lebih terang dan L2 adalah warna lebih gelap. Offset 0.05 memodelkan silau ambient pada tampilan tipikal, dan mencegah rasio membludak ketika salah satu warna mendekati hitam.

Contoh untuk hitam di atas putih: putih memiliki L = 1.0, hitam memiliki L = 0, sehingga rasionya adalah (1 + 0.05) ÷ (0 + 0.05) = 21. Itulah kontras maksimum yang mungkin dalam sRGB.

Apa yang dihitung sebagai «teks besar»?

WCAG mendefinisikan teks skala besar sebagai setidaknya 18 point (berat reguler) atau 14 point bold. Dikonversi ke piksel CSS dengan 1pt = 1.333px versi W3C:

• 18pt = 24px reguler
• 14pt bold = 18.66px bold

Sebagian besar browser menggunakan teks isi default 16px / 12pt, bukan besar. Kesalahan umum adalah memperlakukan semua heading sebagai besar; elemen <h3> yang diberi gaya 18px reguler tetap tunduk pada aturan teks normal 4.5:1.

Kasus tepi yang terkenal: #767676 di atas putih

Desainer yang mengejar minimalisme sering memilih abu-abu tengah untuk teks isi. Dua nilai yang terlihat identik di mata berada di sisi yang berlawanan dari garis WCAG:

Foreground	Background	Rasio	AA Normal
#000000	#ffffff	21.00	Lulus (maks)
#595959	#ffffff	~7.0	Lulus + AAA
#767676	#ffffff	4.54	Lulus (batas)
#777777	#ffffff	4.48	Gagal
#959595	#ffffff	3.00	Gagal (hanya teks besar)
#ffff00	#ffffff	1.07	Gagal

Pergeseran satu karakter hex, perbedaan antara #767676 dan #777777: membalik abu-abu yang terlihat sama dari lulus menjadi gagal, karena WCAG secara eksplisit melarang pembulatan rasio ke atas. WebAIM secara khusus menyebut #777777 sebagai «warna abu-abu yang umum digunakan» yang tidak memenuhi AA. Satu jebakan ini mendorong porsi terukur dari kegagalan audit otomatis dalam pemindaian situs dunia nyata.

Di mana rumus ini kurang

Rumus luminans relatif cepat dan deterministik, tetapi ia memiliki kelemahan perseptual yang terdokumentasi dengan baik:

• Simetri. WCAG 2 mengembalikan rasio yang sama apakah Anda meletakkan teks terang di latar belakang gelap atau teks gelap di latar belakang terang. Studi membaca empiris menunjukkan cahaya-pada-gelap membutuhkan kontras lebih daripada gelap-pada-terang agar terasa sama mudah dibaca, sebagian karena dilatasi pupil dan «halation» pada glyph terang terhadap bidang gelap. UI dark-mode yang lulus WCAG 2 AA masih bisa terasa pudar.
• Kebutaan spasial. Rumus mengabaikan bobot font, ketebalan stroke, dan ukuran font di luar ambang batas Teks Besar. Font 18px hairline dan font 18px berbobot 900 diperlakukan identik.
• Over-pass dark mode. Menurut dokumentasi APCA, rumus secara sistematis melebih-lebihkan kontras untuk warna gelap. Dua abu-abu gelap yang lulus WCAG 2 secara matematis bisa tidak dapat dibedakan secara visual di monitor sungguhan.

APCA (Accessible Perceptual Contrast Algorithm) adalah pengganti kandidat yang diprototipekan untuk WCAG 3. Ia mengembalikan nilai Lc bertanda tunggal dari sekitar −108 hingga +106, sadar polaritas, dan menyertakan pencarian bobot font/ukuran. APCA saat ini adalah referensi non-komersial beta, bukan target kesesuaian hukum (situs produksi masih harus menargetkan WCAG 2.1 / 2.2 AA) tetapi ini adalah pemeriksaan keterbacaan yang lebih akurat, terutama untuk dark mode. Chrome DevTools memiliki pratinjau APCA yang terintegrasi dalam color picker-nya.

Mengapa ini penting secara hukum

WCAG 2.2 menjadi Rekomendasi W3C pada 5 Oktober 2023, tetapi kriteria kontras tetap tidak berubah dari 2.1. Kontras warna adalah salah satu isu yang paling sering dikutip dalam gugatan aksesibilitas digital, dan beberapa yurisdiksi secara efektif membuatnya wajib:

• Amerika Serikat, Section 508 (diperbarui 2017) diselaraskan dengan WCAG 2.0 AA, sehingga 4.5:1 mengikat untuk pengadaan federal. Putusan pengadilan ADA Title III telah berulang kali mengutip WCAG AA sebagai standar de-facto untuk situs komersial yang menghadap publik. DOJ mengadopsi aturan Title II pada April 2024 yang mewajibkan konten web pemerintah negara bagian dan lokal memenuhi WCAG 2.1 AA, dengan tenggat waktu bertahap pada dekade ini.
• Uni Eropa, EN 301 549 menyematkan WCAG 2.1 AA. Tenggat kepatuhan European Accessibility Act (Directive 2019/882) adalah 28 Juni 2025, mencakup situs web, aplikasi mobile, e-commerce, perbankan, e-book dan lainnya. Usaha mikro dikecualikan untuk layanan. Denda negara anggota bervariasi.
• Inggris Raya, Equality Act 2010 kewajiban «penyesuaian yang wajar» berlaku untuk sektor swasta dan publik. Badan sektor publik terikat oleh regulasi aksesibilitas 2018 yang memasukkan EN 301 549 / WCAG 2.1 AA.
• Kanada, AODA (Ontario) dan Undang-Undang Kanada yang Dapat Diakses federal mewajibkan WCAG 2.0 AA, dengan tenggat waktu bertahap AODA yang telah lama lewat.

Kontras warna vs buta warna

Poin kebingungan umum: rasio WCAG berbasis luminans dan tetap berguna untuk sebagian besar pengguna buta warna, rasio 4.5:1 yang diturunkan dari luminans sesuai dengan sinyal perseptual yang kuat bahkan ketika isyarat rona hilang. Itulah mengapa kriteria kontras berdampingan dengan kriteria terpisah, 1.4.1 Use of Color, yang melarang mengandalkan warna saja untuk menyampaikan informasi. Kontras tidak memberi tahu Anda apakah grafik merah-vs-hijau dapat dibaca oleh seorang deuteranope, hanya apakah setiap warna secara individual kontras dengan latar belakang grafik. Grafik dan UI berbasis status membutuhkan pola, label, atau bentuk yang dilapisi di atas warna.

Daftar periksa praktis

• Teks isi di atas putih: tetap di #595959 atau lebih gelap untuk AAA; #767676 adalah abu-abu paling terang yang masih lulus AA Normal.
• Biru merek: banyak yang jatuh di kisaran 3-4.5. #1976d2 adalah biru Material tipikal dengan sekitar 4.59:1, ia lulus tipis untuk AA Normal di atas putih. #42a5f5 dengan sekitar 2.6:1 gagal.
• Border formulir: border 1px solid #ccc di atas putih sekitar 2.13:1, ia gagal 1.4.11. Gunakan #767676 atau lebih gelap.
• Indikator fokus harus mencapai 3:1 terhadap latar belakang. Outline default browser sering dioverride oleh reset CSS tanpa pengganti yang memenuhi ambang batas.
• Teks placeholder secara teknis bersifat insidental tetapi pengguna tetap membacanya, perlakukan seolah 4.5:1 berlaku.
• Jangan percaya mata untuk dark mode. Rasio WCAG 2 secara sistematis over-pass latar belakang gelap. Cross-check dengan APCA di Chrome DevTools.

Pertanyaan lainnya

Mengapa kuning murni di atas putih gagal meskipun tampak terang?

Kuning (#ffff00) di atas putih adalah 1.07:1, hampir tidak ada kontras sama sekali. Rumus luminans memberi bobot hijau 71% dan merah 21%, sehingga kuning (R+G) memiliki luminans yang sangat mendekati putih. Kuning di atas hitam, sebaliknya, adalah 19.56:1, salah satu kombinasi paling mudah dibaca yang diketahui, itulah mengapa digunakan untuk rambu jalan dan peringatan helm keselamatan.

Haruskah saya selalu menargetkan AAA?

Tidak. WCAG sendiri mengatakan: «Tidak direkomendasikan bahwa kesesuaian Level AAA diwajibkan sebagai kebijakan umum untuk seluruh situs karena tidak mungkin memenuhi semua Kriteria Keberhasilan Level AAA untuk beberapa konten.» AA adalah target hukum di hampir semua tempat; AAA adalah untuk pembacaan informasional berisiko tinggi (konten panjang, dokumen pemerintah yang ditujukan untuk masyarakat umum, publikasi yang mengutamakan aksesibilitas).

Bisakah alat otomatis menangkap setiap kegagalan kontras?

Tidak. axe-core, Lighthouse, dan audit serupa menandai kegagalan teks-pada-warna-datar dengan andal, tetapi mereka tidak dapat menguji teks yang dilapisi pada gambar latar belakang, gradien CSS, latar belakang pseudo-element, atau warna border CSS, hal-hal tersebut ditandai «tidak lengkap» dan memerlukan tinjauan manual. Picker langsung seperti ini secara independen berguna untuk mengambil sampel warna latar belakang dominan dari gambar dan memeriksa hanya pasangan teks/latar belakang sebelum diluncurkan.

Apakah alat ini mendukung transparansi/alpha?

Halaman ini memeriksa pasangan hex yang buram. Jika teks atau latar belakang Anda menggunakan alpha, kontras aktual bergantung pada apa pun yang ada di belakangnya, Anda perlu menghitung foreground yang dikomposit terlebih dahulu dan memeriksa warna buram yang dihasilkan.

Apakah ada yang dikirim ke server?

Tidak. Rumus luminans dan rasio dihitung di browser Anda; warna tidak pernah meninggalkan perangkat Anda. Halaman berfungsi secara offline setelah dimuat.

Alat terkait