Forced Colors

Sistem operasi menyediakan mode kontras tinggi yang mengganti seluruh palet layar menjadi kombinasi warna dengan kontras maksimum — hitam pekat di atas putih, kuning di atas hitam, dan sebagainya. Browser meneruskan pilihan tersebut ke halaman melalui mode forced colors: warna, latar, dan garis batas halaman ditimpa dengan palet sistem, sementara teks tetap terbaca penuh bagi pengguna yang membutuhkannya. Media query @media (forced-colors: active) memungkinkan kita menanggapi mode ini secara sadar, dan properti forced-color-adjust mengatur seberapa jauh halaman menyerah pada palet sistem. Fitur ini merupakan Baseline sejak 2023 dan dapat dipakai di seluruh browser utama.

Apa yang Berubah pada Mode Forced Colors #

Ketika mode aktif, browser menimpa sebagian besar deklarasi warna kita: color, background-color, dan border-color digantikan palet sistem, box-shadow dan text-shadow dihilangkan , sementara ukuran, spacing, dan layout tetap diatur stylesheet kita. Gambar tetap tampil berwarna — termasuk logo. Artinya, halaman yang rapi pada mode ini adalah halaman yang tidak bergantung pada warna untuk menyampaikan makna: status yang hanya ditandai warna merah kehilangan artinya, sedangkan status yang dilengkapi ikon atau teks tetap utuh.

Media query forced-colors punya dua nilai: none (bawaan) dan active. Blok berikut memberi tanda batas yang tetap terlihat pada mode kontras tinggi:

.panggilan {
  border: 1px solid rgb(2 132 199);
}
@media (forced-colors: active) {
  .panggilan {
    border-width: 2px;
  }
}

System Colors: Warna yang Mengikuti Tema #

Cara paling berdamai dengan mode ini adalah memakai system colors — kata kunci warna yang otomatis mengikuti tema pengguna:

1. Canvas dan CanvasText: latar dan teks dasar tema — pasangan ini menggantikan kebiasaan menuliskan white dan black secara manual.
2. ButtonFace dan ButtonText: latar dan teks tombol; LinkText untuk tautan dan Highlight untuk teks terpilih melengkapi palet antarmuka.
3. .logo-merek dengan forced-color-adjust: none: elemen identitas mempertahankan warna birunya — karena browser tidak lagi menyesuaikan pasangan ini, kontrasnya wajib kita jamin sendiri.

Pada browser tanpa mode forced colors, system colors tetap sah: mereka menghitung ke palet bawaan (CanvasText menjadi hitam, ButtonFace menjadi abu terang), sehingga tidak diperlukan fallback tambahan.

Hasil di Browser:

Headless browser pengujian tidak mengaktifkan mode forced colors, sehingga
nilai computed yang diperiksa harness: logo-merek mencatat
forced-color-adjust "none" dengan color rgb(14, 165, 233) di atas
background rgb(2, 6, 23) — kontras ±7,3:1; teks-default mencatat forced-color-adjust
"auto"; panel-sistem mencatat color rgb(0, 0, 0) — hasil hitung
CanvasText pada palet bawaan. Pada mode active, seluruh panel digambar
dengan palet sistem dan tanda batas tetap terlihat.

forced-color-adjust: none dan auto #

Properti forced-color-adjust menentukan nasib warna satu elemen ketika mode aktif. Nilai bawaan auto menyerahkan elemen pada penimpaan browser — pilihan yang benar untuk hampir semua teks dan komponen. Nilai none mengeluarkan elemen dari penimpaan: browser menggambar warna apa adanya. Gunakan none secara hemat dan terarah:

1. Logo dan identitas merek yang warnanya bagian dari makna.
2. Swatch warna produk pada toko daring — mengganti warna swatch berarti mengganti informasi yang dijual.
3. Grafik bawaan canvas atau SVG yang kontrasnya telah diatur sendiri dan disertai keterangan teks.

Selain none, tersedia pula nilai retain-colors untuk kasus yang jarang: elemen tetap memakai warna aslinya tanpa penyelarasan lain. Ketika memakai none, uji elemen tersebut pada mode sungguhan — palet merek yang buruk kontrasnya pada mode kontras tinggi justru memindahkan persoalan ke pengguna yang paling membutuhkan mode itu. Pemeriksaan mode tercantum pada Chapter Accessibility Testing .

Demo chapter ini (warna-paksa.html) membawa panel sistem, logo merek, dan tiga pemeriksaan data-expected pada forced-color-adjust serta warna hasil hitung system colors.

/* Palet yang memakai system colors: warnanya mengikuti tema
   yang dipilih pengguna — termasuk mode forced colors. */
.panel-sistem {
  background-color: Canvas;          /* latar tema (bawaan putih) */
  color: CanvasText;                 /* teks tema (bawaan hitam) */
  border: 1px solid CanvasText;
}

.tombol-sistem {
  background-color: ButtonFace;      /* latar tombol tema */
  color: ButtonText;                 /* teks tombol tema */
  border: 1px solid ButtonText;
}

/* Logo dan elemen identitas mempertahankan warna mereknya.
   Kontras harus dijamin manual karena browser tidak lagi
   menyesuaikan pasangan warna ini (±7,3:1). */
.logo-merek {
  forced-color-adjust: none;
  background-color: rgb(2 6 23);
  color: rgb(14 165 233);
}