Color Contrast Checker

Periksa rasio kontras WCAG AA dan AAA antara warna teks dan latar belakang

Coba contoh

Warna teks (latar depan)

Warna latar belakang

Sampel Teks Besar (18px tebal)

Sampel teks normal โ€” beginilah tampilan teks utama Anda terhadap warna latar belakang yang telah dipilih.

Rasio kontras

14.63:1

Kepatuhan WCAG

Lulus

Normal AA

Lulus

Normal AAA

Lulus

Besar AA

Lulus

Besar AAA

WCAG AA โ€” Teks normal: 4.5:1, Teks besar (18px+ atau 14px tebal): 3:1

WCAG AAA โ€” Teks normal: 7:1, Teks besar (18px+ atau 14px tebal): 4.5:1

Apa Itu Pemeriksaan Kontras Warna?

Pemeriksaan kontras warna mengukur perbedaan luminansi antara warna latar depan (biasanya teks) dan warna latar belakang, lalu menyatakan hasilnya sebagai rasio. Rasio 1:1 berarti kedua warna identik; 21:1 adalah nilai maksimum, mewakili hitam pada putih atau sebaliknya. Web Content Accessibility Guidelines (WCAG) yang diterbitkan oleh W3C mendefinisikan rasio kontras minimum yang harus dipenuhi teks agar dapat dibaca oleh orang dengan gangguan penglihatan rendah atau defisiensi warna.

Rumus rasio kontras berasal dari WCAG 2.x dan mengandalkan luminansi relatif, yaitu ukuran seberapa terang suatu warna tampak bagi mata manusia. Luminansi relatif dihitung dengan melinearkan setiap kanal sRGB (menghilangkan gamma) dan memberi bobot pada kanal-kanal tersebut sesuai koefisien ITU-R BT.709: 0,2126 untuk merah, 0,7152 untuk hijau, dan 0,0722 untuk biru. Hijau berkontribusi paling besar karena mata manusia paling sensitif terhadap cahaya hijau. Rasionya adalah (L1 + 0,05) / (L2 + 0,05), di mana L1 adalah luminansi warna yang lebih terang.

WCAG mendefinisikan dua tingkat kesesuaian. Level AA mensyaratkan rasio kontras minimal 4,5:1 untuk teks berukuran normal dan 3:1 untuk teks besar (18px ke atas, atau 14px tebal). Level AAA menaikkan standar menjadi 7:1 dan 4,5:1. WCAG 2.1 juga memperkenalkan Success Criterion 1.4.11, yang mensyaratkan rasio 3:1 untuk komponen UI non-teks seperti border, ikon, dan indikator fokus.

Mengapa Menggunakan Contrast Checker Ini?

Memeriksa kontras secara visual tidak dapat diandalkan. Warna yang tampak berbeda pada layar yang terkalibrasi mungkin menyatu di layar laptop berkualitas rendah, di bawah sinar matahari langsung, atau bagi seseorang dengan deuteranopia. Rasio numerik menghilangkan praduga dan memberikan hasil lulus/gagal berdasarkan standar WCAG.

โšก
Perhitungan Rasio Instan
Pilih atau ketik dua warna dan lihat rasio kontras diperbarui secara real time. Tidak ada formulir yang perlu dikirim, tidak ada pemuatan ulang halaman.
๐Ÿ”’
Pemrosesan Mengutamakan Privasi
Perhitungan luminansi berjalan sepenuhnya di browser Anda. Tidak ada nilai warna yang meninggalkan perangkat Anda, dan tidak ada cookie atau analitik yang melacak pilihan Anda.
๐ŸŽฏ
Hasil AA dan AAA
Hasil menampilkan status lulus/gagal untuk WCAG AA dan AAA, untuk ukuran teks normal maupun besar, sehingga Anda tahu persis ambang batas mana yang terpenuhi.
๐Ÿ“‹
Tanpa Akun
Buka halaman dan mulai pengujian. Tidak perlu mendaftar, tidak ada batasan penggunaan. Alat ini bekerja secara offline setelah halaman dimuat.

Kasus Penggunaan Contrast Checker

Pengembangan Frontend
Sebelum merilis perubahan antarmuka, tempelkan warna teks dan latar belakang dari CSS Anda ke dalam checker untuk memastikan pasangan tersebut memenuhi WCAG AA. Ini mendeteksi kegagalan kontras sebelum mencapai code review atau audit otomatis.
Serah Terima Desain
Desainer dapat memverifikasi bahwa setiap pasangan warna dalam file Figma memenuhi level WCAG yang dipersyaratkan sebelum menyerahkan spesifikasi kepada engineer. Memperbaiki kontras di tahap desain jauh lebih murah daripada memperbaikinya setelah implementasi.
Audit Aksesibilitas
Engineer QA yang menjalankan audit WCAG dapat memeriksa kombinasi warna tertentu yang ditandai oleh alat otomatis seperti Lighthouse atau axe. Checker mengonfirmasi rasio persis dan level mana yang lulus atau gagal.
Token Design System
Saat mendefinisikan token warna untuk design system, uji setiap pasangan latar depan/latar belakang untuk memastikan palet token memenuhi AA minimal. Dokumentasikan rasionya bersama token agar tim hilir dapat mempercayai pilihan tersebut.
Pengujian Template Email
Klien email menghilangkan fitur CSS seperti opacity dan blend mode, sehingga warna yang dirender aktual mungkin berbeda dari sumber Anda. Uji nilai latar depan dan latar belakang akhir yang sampai ke kotak masuk untuk memverifikasi keterbacaan.
Mempelajari Standar Aksesibilitas
Mahasiswa yang mempelajari WCAG dapat bereksperimen dengan berbagai pasangan warna dan langsung melihat bagaimana rasio berubah. Menyesuaikan satu kanal sekaligus membangun pemahaman praktis tentang bagaimana luminansi berkaitan dengan kontras yang dirasakan.

Persyaratan Rasio Kontras WCAG

Tabel di bawah ini merangkum rasio kontras minimum yang dipersyaratkan oleh WCAG 2.1 untuk berbagai jenis konten dan level kesesuaian. Teks besar didefinisikan sebagai 18px (24 CSS pixel) ke atas dengan bobot normal, atau 14px (18,66 CSS pixel) ke atas dengan bobot tebal.

LevelRasio minimumBerlaku untukCatatan
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminansi, AA, dan AAA Dijelaskan

Perhitungan rasio kontras memiliki tiga tahap: hitung luminansi untuk setiap warna, turunkan rasionya, dan bandingkan dengan ambang batas WCAG.

Luminansi Relatif
Angka tunggal dari 0 (hitam) hingga 1 (putih) yang mewakili seberapa terang suatu warna tampak. Angka ini memperhitungkan kurva gamma sRGB yang tidak linear dan sensitivitas mata manusia yang tidak sama terhadap merah, hijau, dan biru. Hijau murni (#00FF00) memiliki luminansi 0,7152, sedangkan biru murni (#0000FF) hanya 0,0722.
WCAG AA
Level aksesibilitas dasar yang dipersyaratkan oleh sebagian besar standar hukum, termasuk European Accessibility Act (EAA) milik Uni Eropa dan Section 508 di Amerika Serikat. AA mensyaratkan rasio 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Sebagian besar design system menargetkan AA sebagai standar minimum untuk semua elemen teks.
WCAG AAA
Level yang ditingkatkan, ditujukan untuk konten yang harus dapat dibaca oleh audiens seluas mungkin, termasuk pengguna dengan gangguan penglihatan signifikan. AAA mensyaratkan 7:1 untuk teks normal dan 4,5:1 untuk teks besar. Hanya sedikit situs yang mencapai AAA di seluruh halaman, tetapi konten kritis seperti pemberitahuan hukum dan informasi medis sering menargetkannya.

Contoh Kode

Hitung rasio kontras WCAG secara terprogram. Setiap contoh mengimplementasikan rumus luminansi relatif dari WCAG 2.x dan perhitungan rasio kontras. Pasangan hitam-pada-putih dan indigo-pada-putih yang sama diuji untuk perbandingan.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} โ€” {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 โ€” AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs โ€” tested contrast ratios */

/* 12.63:1 โ€” passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 โ€” passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 โ€” passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 โ€” fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Pertanyaan yang Sering Diajukan

Berapa rasio kontras yang baik untuk teks?
Untuk teks utama di web, targetkan minimal 4,5:1 (WCAG AA). Rasio di atas 7:1 memenuhi WCAG AAA dan lebih nyaman untuk membaca dalam waktu lama. Hitam pada putih menghasilkan rasio maksimum 21:1, tetapi abu-abu sangat gelap (#1e293b) pada putih masih memberikan sekitar 12,6:1, jauh di atas AAA.
Apa yang dimaksud dengan teks besar dalam WCAG?
WCAG mendefinisikan teks besar sebagai 18px (24 CSS pixel) dengan bobot normal, atau 14px (18,66 CSS pixel) dengan bobot tebal. Teks besar mendapatkan ambang kontras yang lebih rendah karena bentuk huruf yang lebih besar lebih mudah dikenali. Dalam CSS, 1px sama dengan 0,75pt, sehingga 18pt sama dengan 24px.
Apakah WCAG AA diwajibkan secara hukum?
Di banyak yurisdiksi, ya. European Accessibility Act (EAA), yang berlaku mulai Juni 2025, mereferensikan WCAG 2.1 AA. Section 508 dari US Rehabilitation Act mewajibkan lembaga federal memenuhi WCAG 2.0 AA. Americans with Disabilities Act (ADA) telah ditafsirkan oleh pengadilan AS untuk mewajibkan situs web yang aksesibel, dengan WCAG AA sebagai standarnya. Kanada, Australia, dan Inggris memiliki mandat serupa.
Bagaimana luminansi relatif dihitung?
Setiap nilai kanal sRGB (0-255) dibagi 255, lalu dilinearkan: nilai 0,04045 ke bawah dibagi 12,92, dan nilai di atasnya ditransformasi dengan ((c + 0,055) / 1,055) ^ 2,4. Ketiga kanal yang telah dilinearkan diberi bobot dengan koefisien ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) dan dijumlahkan. Hasilnya adalah angka antara 0 dan 1.
Mengapa WCAG menggunakan offset 0,05 dalam rumus kontras?
Offset 0,05 mencegah pembagian dengan nol ketika salah satu warna adalah hitam murni (luminansi = 0). Offset ini juga memperhitungkan cahaya ambien dan pantulan layar yang sedikit meningkatkan luminansi yang dirasakan bahkan pada piksel paling gelap sekalipun. Tanpa offset ini, hitam pada warna gelap apa pun akan menghasilkan rasio tak terbatas atau sangat tinggi yang menyesatkan.
Bisakah dua warna lulus AA tetapi tetap sulit dibaca?
Ya. Rasio kontras WCAG mengukur perbedaan luminansi, bukan perbedaan hue. Merah jenuh pada hijau jenuh secara teknis dapat melewati ambang rasio, tetapi tidak nyaman dibaca bagi sebagian orang, terutama mereka yang memiliki defisiensi penglihatan warna merah-hijau. Memadukan warna yang berbeda baik dalam luminansi maupun hue cenderung menghasilkan hasil yang lebih nyaman.
Apa perbedaan antara kontras WCAG 2.x dan APCA?
WCAG 2.x menggunakan rasio luminansi sederhana yang memperlakukan latar depan dan latar belakang secara simetris. APCA (Advanced Perceptual Contrast Algorithm), yang diusulkan untuk WCAG 3.0, menggunakan model kecerahan perseptual yang memperhitungkan polaritas: teks gelap pada latar terang memiliki kontras yang dirasakan berbeda dari teks terang pada latar gelap dengan perbedaan luminansi yang sama. APCA masih berupa draf kerja dan belum menggantikan metode WCAG 2.x dalam regulasi mana pun.