Màu chữ trong HTML: đổi màu chữ bằng CSS

Cách đổi màu chữ trong HTML

Dùng thuộc tính color của CSS. Thuộc tính này đặt màu cho chữ của một phần tử, và mọi phần tử bên trong đều kế thừa màu đó, trừ khi chúng tự đặt màu riêng.

<!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>

Thuộc tính tên là color, không phải font-color hay text-color. Những cái tên đó không tồn tại trong CSS và bị bỏ qua mà không báo lỗi.

Vì sao không dùng thẻ font

Các hướng dẫn cũ hay dùng <font color="red">. Thẻ này đã bị loại khỏi HTML từ nhiều năm trước: validator đánh dấu nó là lỗi, và nó trộn phần định dạng vào mã HTML, nên muốn đổi một màu là phải sửa tay từng thẻ. Trình duyệt vẫn hiển thị nó để tương thích ngược, và đó là lý do duy nhất khiến nó trông như vẫn chạy được.

<!-- 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>

Các cách viết màu

color nhận mọi định dạng màu của CSS. Bốn định dạng phổ biến nhất:

Hex, rgb() và hsl() có thể thêm kênh alpha để chữ bán trong suốt, ví dụ #2563eb80 hoặc rgb(37 99 235 / 50%). Trang màu CSS giải thích mọi định dạng.

Tô màu cả trang, một tiêu đề hay một khu vực

Đặt màu một lần trên body và để cơ chế kế thừa lo phần còn lại, rồi ghi đè ở chỗ cần:

<!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>

Một màu gần đen dịu như #111827 hay #374151 trên nền trắng dễ nhìn hơn màu #000000 thuần mà vẫn được cảm nhận là màu đen.

Màu liên kết

Liên kết là ngoại lệ của cơ chế kế thừa: trình duyệt cho chúng màu xanh riêng (và màu tím khi đã truy cập), nên màu đặt trên phần tử cha không chạm tới chúng. Hãy đặt màu trên chính liên kết, hoặc bảo liên kết kế thừa màu:

<!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 và :focus-visible cho phép bạn đổi màu theo từng trạng thái; trang hover giải thích chúng. Khi liên kết cùng màu với chữ xung quanh, hãy giữ gạch chân để người đọc vẫn nhận ra đó là liên kết.

Giữ chữ dễ đọc: độ tương phản

Màu chữ chỉ là một nửa của cặp màu; nửa còn lại là màu nền. WCAG yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn (khoảng 24px, hoặc 19px in đậm).

<!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>

Chữ xám nhạt kiểu placeholder là lỗi phổ biến nhất. Công cụ dành cho nhà phát triển của Chrome và Firefox hiển thị tỷ lệ tương phản khi bạn kiểm tra một màu chữ.

currentColor: dùng lại màu chữ

currentColor là một từ khóa bằng đúng giá trị color của phần tử. Viền, outline và icon SVG inline có thể dùng nó, nên chỉ cần đổi color một lần là chữ và các chi tiết trang trí đổi màu theo:

<!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>

Lỗi thường gặp

• Viết font-color hoặc text-color. Thuộc tính đúng là color.
• Dùng thẻ <font>. Thẻ này đã lỗi thời; hãy dùng CSS.
• Tưởng liên kết sẽ kế thừa màu. Đặt a { color: ... } hoặc color: inherit.
• Chỉ dùng màu để truyền tải thông tin. Câu "Các trường màu đỏ là bắt buộc" sẽ vô nghĩa với người không phân biệt được màu đỏ. Hãy thêm chữ hoặc icon.
• Chữ xám có độ tương phản thấp. Kiểm tra tỷ lệ: từ 4,5:1 trở lên cho chữ nội dung.
• Dùng opacity để làm chữ nhạt đi. Nó làm mờ cả phần tử, gồm cả nền và các phần tử con. Hãy dùng màu nhạt hơn hoặc màu có kênh alpha.