Warna

Warna yang aksesibel

Jangan hanya menggunakan warna untuk menunjukkan keberadaan komponen antarmuka pengguna atau statusnya: Gunakan ikonografi dan/atau bentuk untuk membantu membedakan. Jangan menunjukkan keberhasilan/error HANYA dengan warna. Gunakan ikon atau teks.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Kontras

• Standar kontras minimum: Pertahankan 4,5:1 untuk teks normal dan 3:1 untuk teks atau ikon besar.
• Pastikan standar kontras non-teks: Pertahankan rasio kontras minimum 3:1 untuk batas dan status komponen antarmuka pengguna.
  • Hal ini mencakup elemen visual (batas, latar belakang, bayangan kotak, garis bawah) yang membentuk batas atau menunjukkan keberadaan komponen UI (misalnya, batas kolom input).
  • Hal ini juga mencakup elemen visual yang menunjukkan status aktif dalam komponen (misalnya, tanda centang kotak atau tombol beralih).
  • Peringatan: Memenuhi kontras non-teks 3:1 dapat menjadi tantangan bagi desain minimalis. Gradien lembut atau bayangan inset/outset yang halus dapat melembutkan batas visual sekaligus memenuhi persyaratan aksesibilitas.
• Gunakan prefers-contrast hanya jika diperlukan: Gunakan @media (prefers-contrast: more) jika desain menggunakan aksen kontras rendah (misalnya, batas tipis, teks sekunder redup) yang perlu diperkuat; sebagian besar situs yang sudah memenuhi kontras dasar tidak akan memerlukannya.

Skema warna terang dan gelap

• Mendukung skema warna terang dan gelap: Hormati @media (prefers-color-scheme: dark) dan pasangkan dengan properti CSS color-scheme agar kontrol formulir, scrollbar, dan platform lain yang dirender UA cocok. Lihat Mode gelap untuk mengetahui detail selengkapnya.

Mode Warna Paksa

• Mendukung Mode Warna Paksa: Dalam Mode Warna Paksa (Kontras Tinggi di Windows), browser mengganti warna penulis dengan kata kunci sistem dan menghapus background-image, box-shadow, dan border-image. Tentukan penggantian warna sistem untuk token warna menggunakan @media (forced-colors: active).
• Gunakan forced-color-adjust: none hanya jika warna merupakan informasi penting (penyorot sintaksis, contoh pemilih warna). JANGAN gunakan forced-color-adjust: none hanya untuk mempertahankan estetika.
• Jangan mengandalkan background-image, box-shadow, atau border-image untuk menyampaikan batas, pemisah, atau status: Elemen ini akan hilang dalam warna paksa (dan sering kali juga dalam cetakan). Jika harus, pastikan ada alternatif dalam mode warna paksa, seperti outline atau border dengan kata kunci warna sistem (CanvasText, LinkText, ButtonText, Highlight, GrayText, dll.).

Membuat tint

Sebelum membuat tint secara dinamis, periksa apakah Anda dapat menggunakan token desain yang sudah ada dan telah ditentukan sebelumnya. Hal ini memungkinkan kontrol desainer yang jauh lebih besar dan memastikan konsistensi.

Jika Anda perlu membuat warna yang lebih terang atau lebih gelap secara dinamis:

• JANGAN hanya menyesuaikan saluran kecerahan di oklch/oklab atau lch/lab, misalnya oklab(from var(--primary) 0.9 a b). Meskipun secara teoritis itu adalah cara yang benar, browser belum menerapkan pemetaan gamut, sehingga warna yang dihasilkan tidak dapat diprediksi.
• Anda dapat menggunakan color-mix() untuk mencampur dengan warna putih atau hitam (sebaiknya dalam oklab). Hal ini menjaga warna tetap aman dalam gamut, tetapi cenderung mengurangi saturasi warna secara berlebihan dan menghasilkan tint dan shade yang pudar.
• Anda DAPAT menggabungkan penyesuaian kecerahan dengan metode lainnya (misalnya, color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) untuk mendapatkan keseimbangan di antara keduanya, tetapi hindari penyesuaian kecerahan di atas 30%.