Nội dung tiếp thị

Làm thế nào bạn có thể lập trình thay đổi màu phông chữ dựa trên nền? (Chế độ sáng/tối)

Nếu bạn đã đến thăm Martech Zone gần đây, bạn có thể nhận thấy rằng chúng tôi hiện cung cấp khả năng xem trang web ở chế độ sáng hoặc tối. Chỉ cần tìm kiếm mặt trăng hay mặt trời bên cạnh ngày trong thanh điều hướng trên cùng bên trái trên trang web.

Đó là một tính năng khá thú vị và nó hoạt động rất tốt. Khi tôi khởi chạy một công cụ chuyển đổi mới thành thay đổi HEX thành RGB, tôi thực sự muốn hiển thị màu mà người dùng đang cố gắng tính toán. Tôi không chỉ hiển thị màu mà tôi còn thêm một tính năng rất hay đó là hiển thị tên của màu. Nhưng điều đó đã đưa ra một vấn đề…

Nếu mẫu màu hiển thị màu có nền sáng, bạn sẽ không thể đọc văn bản mà tôi tạo động cho mẫu màu. Vì vậy… tôi phải tạo một chức năng đặt màu phông chữ dựa trên màu nền và liệu có đủ độ tương phản để xem phông chữ hay không.

Chức năng JavaScript cho Chế độ sáng hoặc tối

Tôi cần tạo một hàm trong đó tôi có thể chuyển mã hex cho màu, sau đó trả về phông chữ nên trắng hay đen dựa trên độ tương phản. Hàm JavaScript này đã làm được điều đó…

function contrast(hex) {
  var threshold = 149;
  let r = 0, g = 0, b = 0;

  // 3 digits
  if (hex.length == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6 digits
  } else if (hex.length == 7) {
    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
  }
  return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}

Ngưỡng trong chức năng này được sử dụng để xác định xem một màu cụ thể là sáng hay tối. Hàm chuyển đổi mã màu thập lục phân đã cho thành màu đỏ, lục và lam (RGB) thành phần, sau đó sử dụng công thức để tính toán độ sáng cảm nhận được của màu. Nếu độ sáng vượt quá ngưỡng, hàm sẽ trả về #000000, là mã hex cho màu đen. Nếu độ sáng dưới ngưỡng, hàm sẽ trả về #ffffff, là mã hex cho màu trắng.

Mục đích của ngưỡng này là để đảm bảo rằng màu văn bản được chọn cho màu nền nhất định có đủ độ tương phản để có thể đọc được dễ dàng. Một nguyên tắc chung là văn bản sáng (ví dụ: trắng hoặc vàng) nên được sử dụng trên nền tối và văn bản tối (ví dụ: đen hoặc xanh lam) nên được sử dụng trên nền sáng. Bằng cách sử dụng một ngưỡng để xác định xem một màu là sáng hay tối, hàm có thể tự động chọn màu văn bản thích hợp cho một màu nền nhất định.

Sử dụng chức năng trên, tôi có thể lập trình áp dụng CSS màu phông chữ dựa trên màu nền. Hãy kiểm tra bộ chuyển đổi và bạn sẽ thấy nó hoạt động tốt như thế nào!

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.