HTML Font Color: Cara Mengubah Warna Teks dengan CSS

Cara mengubah warna teks di HTML

Pakai property CSS color. Property ini mengatur warna teks sebuah elemen, dan setiap elemen di dalamnya mewarisi warna yang sama kecuali elemen itu mengatur warnanya sendiri.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

Nama property-nya adalah color, bukan font-color atau text-color. Nama-nama itu tidak ada di CSS dan diabaikan tanpa pemberitahuan.

Kenapa jangan pakai tag font

Tutorial lama menunjukkan <font color="red">. Tag itu sudah dihapus dari HTML bertahun-tahun yang lalu: validator menandainya sebagai error, dan tag ini mencampur styling ke dalam markup, jadi mengubah sebuah warna berarti mengedit setiap tag secara manual. Browser masih menggambarnya demi kompatibilitas, dan hanya karena itulah tag ini terlihat masih berfungsi.

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

Cara menulis warna

color menerima semua format warna CSS. Empat yang paling umum:

Hex, rgb(), dan hsl() bisa menerima channel alpha untuk teks semi-transparan, misalnya #2563eb80 atau rgb(37 99 235 / 50%). Halaman CSS colors menjelaskan setiap formatnya.

Mewarnai seluruh halaman, judul, atau sebuah bagian

Atur warnanya satu kali di body dan biarkan pewarisan mengurus sisanya, lalu timpa di tempat yang perlu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

Hitam lembut seperti #111827 atau #374151 di atas putih lebih nyaman di mata daripada #000000 murni, dan tetap terbaca sebagai hitam.

Warna link

Link adalah pengecualian dari pewarisan: browser memberinya warna biru sendiri (dan ungu setelah dikunjungi), jadi warna di elemen induk tidak sampai ke link. Atur warnanya di link, atau suruh link mewarisinya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover, :visited, dan :focus-visible memungkinkanmu mengubah warna per state. Halaman hover membahasnya. Kalau warna link sama dengan teks di sekitarnya, pertahankan garis bawahnya supaya link itu tetap dikenali sebagai link.

Buat teks mudah dibaca: kontras

Warna teks hanyalah separuh dari pasangannya, separuh lainnya adalah background. WCAG meminta rasio kontras minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar (sekitar 24px, atau 19px tebal).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

Teks abu-abu muda bergaya placeholder adalah kegagalan yang paling umum. Developer tools di Chrome dan Firefox menampilkan rasio kontras saat kamu memeriksa warna teks.

currentColor: memakai ulang warna teks

currentColor adalah kata kunci yang nilainya sama dengan color milik elemen. Border, outline, dan ikon SVG inline bisa memakainya, jadi satu perubahan color mewarnai ulang teks sekaligus hiasannya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

Kesalahan yang sering terjadi

• Menulis font-color atau text-color. Property-nya adalah color.
• Memakai tag <font>. Tag ini sudah usang, jadi pakai CSS.
• Mengira link ikut mewarisi warna. Atur a { color: ... } atau color: inherit.
• Warna sebagai satu-satunya penanda. "Kolom berwarna merah wajib diisi" tidak berfungsi bagi pembaca yang tidak bisa membedakan warna merah. Tambahkan teks atau ikon.
• Teks abu-abu dengan kontras rendah. Periksa rasionya: 4,5:1 atau lebih untuk teks paragraf.
• Memakai opacity untuk mencerahkan teks. Opacity memudarkan seluruh elemen, termasuk background dan child-nya. Pakai warna yang lebih terang atau warna dengan alpha.