Yêu cầu đừng ép buộc dùng chế độ tối

 (iamvishnu.com)
2 điểm bởi GN⁺ 2025-01-21 | 1 bình luận | Chia sẻ qua WhatsApp
  • Nếu một website chỉ cung cấp chế độ tối, điều đó có thể gây mỏi mắt và khó chịu cho một số người dùng khi đọc bài dài, vì vậy cần có quyền lựa chọn hoặc tổ hợp màu dễ chịu
  • Điểm cốt lõi không phải là bản thân chế độ tối, mà là tỷ lệ tương phản sáng tối giữa văn bản và nền; chữ trắng tinh trên nền đen hoàn toàn có độ tương phản 21:1, có thể gây áp lực lớn cho mắt
  • Dùng chữ xám #888888 trên nền đen sẽ hạ tỷ lệ tương phản xuống 5.9:1, trở thành một ví dụ về chế độ tối dễ đọc hơn so với độ tương phản quá mức
  • WCAG 2.1 chỉ yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 cho văn bản thông thường và không đặt giới hạn tương phản tối đa, nên tổ hợp 21:1 vẫn có thể được xem là truy cập được theo quy tắc
  • Yêu cầu Maximum text contrast trong bản nháp WCAG 3.0 đã bị gỡ bỏ trong bản cập nhật ngày 4/9/2025, và các bài viết ép buộc chế độ tối hiện cần cách ứng phó tạm thời như tự ghi đè CSS

Khi chế độ tối bắt buộc khiến việc đọc trở nên khó khăn

  • Có nhiều website và blog cá nhân được thiết kế chỉ dành cho chế độ tối, và ở một số trang, mắt có thể bắt đầu khó chịu ngay cả trước khi đọc hết một đoạn văn
  • Chế độ tối hữu ích trong một số tình huống nhất định, nhưng nếu bị ép áp dụng mà không cho người dùng lựa chọn thì đó là trải nghiệm người dùng tệ
  • Sau khi đọc một bài dài ở chế độ tối, mắt có thể không thích nghi lại ngay, khiến người đọc có cảm giác như vẫn nhìn thấy các vệt sọc ngang

Trọng tâm của vấn đề là tỷ lệ tương phản sáng tối

  • Yếu tố then chốt quyết định sự khó chịu trong chế độ tối là tỷ lệ tương phản sáng tối giữa văn bản và nền
  • Đặt chữ trắng tinh trên nền đen hoàn toàn sẽ tạo ra tỷ lệ tương phản 21:1
    • Tổ hợp này có thể gây áp lực cho mắt và khiến việc đọc trở nên khó khăn
  • Dùng chữ xám #888888 trên nền đen sẽ hạ tỷ lệ tương phản xuống 5.9:1
    • Đây là ví dụ về một tổ hợp màu có thể đọc thoải mái hơn dù vẫn là chế độ tối
  • Tỷ lệ tương phản càng cao không phải lúc nào cũng càng tốt; trong chế độ tối, độ tương phản quá mức trái lại có thể làm tăng cảm giác khó chịu

Những điểm tiêu chuẩn WCAG bỏ sót

  • Hiện tại, WCAG 2.1 SC 1.4.3 yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 cho văn bản thông thường
  • WCAG 2.1 không có giới hạn tỷ lệ tương phản tối đa
    • Ngay cả tổ hợp có độ tương phản 21:1 như chữ trắng tinh trên nền đen hoàn toàn cũng có thể được xem là hoàn toàn truy cập được theo quy tắc
    • Dù có thể gây khó chịu cho nhiều người dùng, các hướng dẫn hiện có không xử lý vấn đề tương phản quá mức trong chế độ tối
  • WCAG 3.0 từng dự kiến bổ sung Maximum text contrast như một yêu cầu mang tính thăm dò
    • Theo bản cập nhật tháng 12/2025, yêu cầu này đã bị gỡ bỏ trong bản cập nhật dự thảo WCAG 3.0 ngày 4/9/2025
    • GitHub Issue về toán học của tỷ lệ tương phản vẫn còn mở

Cách обход tạm thời hiện có

  • Nếu một bài viết quan trọng chỉ được cung cấp bằng chế độ tối bắt buộc, có thể ghi đè CSS trong công cụ dành cho nhà phát triển của trình duyệt để đảo màu
  • Nếu không muốn dùng plugin riêng, công cụ dành cho nhà phát triển vẫn là biện pháp tạm thời cho đến khi có giải pháp tốt hơn

Những tình huống chế độ tối phù hợp

  • Đây không phải là quan điểm phản đối bản thân chế độ tối; trong các tình huống sau, chế độ tối được ưa chuộng hơn
    • Khi đọc trên màn hình OLED trong phòng đã tắt đèn, ví dụ đọc bằng điện thoại trước khi ngủ
    • Khi viết code, vì hầu như mọi IDE mặc định đều cung cấp chế độ tối với tỷ lệ tương phản dễ chịu
    • Khi chế độ tối của website có tỷ lệ tương phản dễ chịu
  • Sau bài viết, thảo luận trên Hacker News có cả ý kiến đồng tình lẫn phê bình, đề cập đến lựa chọn chế độ tối/sáng của các OEM thời kỳ đầu, tầm quan trọng của tỷ lệ tương phản, trải nghiệm cá nhân, tình trạng y khoa, vấn đề accessibility và các cách обход

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-01-21
Các ý kiến trên Hacker News

  • Chế độ tối vốn gần với mặc định truyền thống hơn
    Những màn hình đơn sắc nền đen với chữ xanh lá/hổ phách thời đầu, chế độ văn bản DOS màu xám trên nền đen, chữ xanh lam nhạt trên nền xanh lam đậm của C-64, và chữ xám/trắng trên nền đen của Apple II đều như vậy
    Ngay cả trong GUI, Amiga cũng có Workbench mặc định là nền xanh lam đậm, và người dùng có thể chọn toàn bộ bảng màu
    Chính Microsoft Windows đã đặt mặc định chữ đen trên màn hình trắng trong hầu hết ứng dụng với lý do giống giấy; dù giấy có màu trắng thì cũng không phải màu trắng phát sáng, nên sự chuyển đổi đó rất khó chịu
    Rất vui khi chế độ tối quay lại, nhưng cần có lựa chọn chứ không phải ép dùng chế độ tối; và nếu có thể, chế độ sáng cũng đừng là màu trắng ở độ sáng tối đa

    • Chế độ tối không phải là mặc định truyền thống; giấy là nền trắng với chữ đen
      Không nên để thiết bị hay màn hình ở màu trắng phát sáng, mà phải giảm độ sáng để trông giống tờ giấy đặt bên cạnh
      Thứ thay đổi mô thức cũng không phải Windows, mà trong số các thiết bị tiêu dùng phổ biến thì Mac đi trước; CRT tích hợp của nó cũng kém sáng hơn giấy dưới ánh sáng văn phòng truyền thống
      Máy tính thời đầu dùng phối màu tối vì độ phân giải thấp và độ sáng pixel bị nhòe nên dễ đọc hơn; khi công nghệ tốt lên, vấn đề đó biến mất, và chữ tối trên nền sáng — dù trên màn hình hay bản in — dễ chịu cho mắt hơn
    • Độ tương phản của CRT cũ hoàn toàn khác với màn hình LCD/IPS/OLED hiện đại
      Màu hổ phách và xanh lá cũng từng được cho là dễ chịu hơn chữ trắng, và khác biệt lớn đến mức khó so sánh trực tiếp
      Nếu nền không phải đen tuyệt đối mà có một mức sáng nhất định, chế độ tối có thể ổn với nhiều người hơn, nhưng như vậy sẽ mất hầu hết lợi thế của OLED
    • Nói “mặc định truyền thống” không phải là một điều tuyệt đối
      Đúng là DOS/Unix trên PC thời đầu dùng nền đen do đặc tính màn hình khi đó, nhưng trước đó người ta chia sẻ thông tin bằng giấy trắng, và thời kỳ đầu của Internet đã đưa trở lại chữ đen trên nền trắng
      Rốt cuộc không có thứ gọi là mặc định chính thống; tất cả phụ thuộc vào việc bạn tham gia từ lúc nào
    • Giai đoạn đó là một khoảnh khắc rất ngắn khi mọi thứ đang được định hình, và ràng buộc chi phí chi phối năng lực tính toán cũng như cách hiển thị nhiều hơn sở thích cá nhân hay công thái học
      Amiga Workbench có nền xanh lam đậm cũng là vì chi phí. Người ta dự đoán nhiều người sẽ nối máy với TV qua ngõ xuất video composite, và chữ trắng trên nền xanh lam là tổ hợp TV hiển thị tốt
      Màn hình 1080 có giá khoảng một phần ba giá A1000, và rất có khả năng nhiều chiếc A500 sau khi được mở hộp vào dịp Giáng sinh đã được nối với TV trong một thời gian
      Tôi đã dùng gần như mọi trình xử lý văn bản cho Amiga; trừ WordPerfect, tất cả đều là chữ đen trên nền trắng. WordPerfect cũng có thể đổi được, chỉ là giữ mặc định xanh lam/trắng để đồng bộ với DOS mà thôi
    • Chế độ tối là bình thường trong thời kỳ đầu của CRT, và đa số CRT khi đó làm tươi ở mức 60Hz trở xuống
      Nền tối khiến hiện tượng nhấp nháy ít dễ thấy hơn; đến thập niên 1990, khi CRT có tần số quét cao hơn trở nên phổ biến, vấn đề nhấp nháy giảm đi và chế độ sáng trở thành mặc định

  • Khoan đã, nếu một website chỉ có chữ sáng trên nền tối thì đó là chủ đề và bầu không khí của website đó
    Chế độ tối chỉ tồn tại khi có chế độ sáng, và ngược lại cũng vậy
    Không thể ép một website không muốn duy trì cả hai chế độ

    • Điều đó đã được nói ngay ở phần đầu bài
      Nếu chế độ tối là đặc trưng thương hiệu, hãy chọn độ tương phản dễ chịu cho văn bản

  • Chế độ sáng mặc định và không thể cấu hình đã tồn tại từ lâu, và cũng có các plugin như Dark Reader để bù đắp
    Nhưng ngược lại, không có nhiều hạ tầng để ép chế độ sáng
    Trong hầu hết tình huống, tôi cho rằng chế độ sáng tốt hơn chế độ tối. Tình huống duy nhất chế độ tối tốt hơn là khi bạn ngồi trong phòng tối mà màn hình là nguồn sáng duy nhất, nhưng đó thường không phải là môi trường lành mạnh
    Chế độ tối giống một công cụ hỗ trợ hơn; bật đèn hoặc đi ngủ thì tốt hơn
    Trong môi trường không có ánh sáng, chế độ sáng có thể gây khó chịu khi đọc, nhưng trong môi trường sáng, chế độ tối gần như không đọc nổi. Hãy thử đọc UI chế độ tối trên điện thoại vào một ngày hè nắng gắt, kể cả tăng độ sáng lên tối đa cũng vẫn khó nhìn

    • Plugin Dark Reader trên hệ thống của tôi cũng có tùy chọn ép dùng theme sáng
      Thực ra trình duyệt có tính năng đặt màu nền và màu chữ mặc định, nên nếu website chỉ cần tôn trọng các mặc định này trừ khi thật sự cần thiết, có lẽ sẽ không cần tiện ích mở rộng
      Thật đáng buồn khi cần một tiện ích mở rộng để “thật sự tôn trọng sở thích của tôi”, nhưng nếu cần thì ít nhất cũng nên biết rằng nó hỗ trợ cả hai phía. Toàn bộ tình hình khá ngớ ngẩn, nhưng vẫn có cách обход
    • Tôi luôn thấy lạ khi có nhiều người không có lý do y khoa nào mà vẫn muốn ngồi trong phòng tối như troll hang động
      Giờ đây mọi hệ điều hành đều có các chế độ có thể chuyển đổi và có thể báo cho trình duyệt biết. Trình duyệt có thể, và nên, thích ứng theo thiết lập mà hệ điều hành báo cáo
      Thiết kế UI, ngoại trừ vài hòn đảo hợp lý như Paul Fitts, phần lớn là chuỗi các trào lưu và “khí chất” bị áp dụng sai
      Ban đầu người ta nói độ tương phản xấu nên dùng thiếu tương phản, rồi tiếp theo nói độ sáng xấu nên dùng thiếu độ sáng. Sau đó họ lại nhận ra vì sao độ tương phản và độ sáng vốn quan trọng, và vòng lặp tiếp tục
    • Từ góc nhìn của một người từng bị đục thủy tinh thể, chế độ sáng rất khó đọc
      Nó giống cảm giác nhìn thẳng vào đèn pha ô tô bật chế độ chiếu xa; tôi có dùng plugin Dark Reader, nhưng điều đó khác với việc trang web hỗ trợ chế độ tối đúng cách
    • Chế độ tối cũng có thể tốt hơn khi độ sáng màn hình được đặt cao một cách không phù hợp
    • Trên màn hình của tôi, pixel đen thực sự tắt, nên tôi thích chế độ Pure Black
      Ngay cả giữa ban ngày cũng dễ nhìn hơn nhiều. Tôi ước chế độ Pure Black là một tùy chọn tách biệt với chế độ tối/sáng, như trong một số ứng dụng Android
      Hiện tại tôi cầm cự bằng cách giảm độ sáng trong Dark Reader xuống mức tối thiểu, nhưng cách này hơi thô

  • Bản thân blog này không làm theo thiết lập của thiết bị mà ép độc giả dùng chế độ sáng
    Tác giả đã đổi quan điểm ở giữa bài và kết luận rằng vấn đề không phải là chế độ tối mà là độ tương phản màu

    • Blog của tác giả cũng định nghĩa rõ color: #111; và background-color: #fdfdfd;, tức là tỷ lệ tương phản 18.56:1
    • Ý chính thực ra là tỷ lệ tương phản, nên tiêu đề có cảm giác hơi thiếu trung thực
      Trớ trêu là cuối cùng tác giả lại nói sẽ dùng bộ lọc đảo màu như một cách обход; nếu một người thích chế độ tối dùng thứ như Invert Mode của Vivaldi trên trang nền trắng/chữ đen rất gắt của tác giả, họ sẽ nhận được đúng tỷ lệ tương phản kiểu tối mà tác giả đang phàn nàn

  • Mong đừng ép người dùng dùng độ tương phản thấp
    Không phải ai cũng xem nội dung trên màn hình được hiệu chuẩn trên 100 nit và trong môi trường ánh sáng xung quanh sáng nhưng hợp lý
    Các kết hợp xám-trên-xám được khuyến nghị có thể khó đọc, chẳng hạn khi xem ở độ sáng 0 trong phòng tối hoàn toàn hoặc dưới ánh nắng trực tiếp
    Toàn bộ dải màu SDR tồn tại là để được dùng; nó không phải HDR cần bị giới hạn để khỏi làm người dùng chói mắt

    • Kết hợp xám-trên-xám cũng có thể khó với người lớn tuổi

  • Đây không chỉ là chuyện sáng hay tối. Tôi muốn các website nói chung tôn trọng tùy chọn hệ thống của mình
    Nếu theme hệ điều hành của tôi là chữ Comic Sans màu tím trên nền gạch vàng, trình duyệt cũng nên tôn trọng điều đó
    Nếu tôi muốn đọc văn bản trên toàn bộ chiều rộng trình duyệt mà lại phải xem trong một cột hẹp 5 inch ở giữa, tôi không nên phải dùng phép thuật trong cài đặt trình duyệt, triệu hồi CSS ghi đè hay cài tiện ích mở rộng
    Trình duyệt chỉ nên nói: “Nhà phát triển web à, chịu thôi. Tùy chọn của người dùng thắng”
    Trình duyệt đã trao quá nhiều quyền kiểm soát cho nhà phát triển để họ có thể phớt lờ điều người dùng muốn, khiến cụm “user agent” trở nên lạc lõng. Giờ nó gần giống developer agent hơn

    • Dù nền vàng thì có thể khó tránh, việc ép Comic Sans có thể làm dễ dàng trong cài đặt Firefox bằng cách đặt phông chữ ưa thích và tắt “Cho phép trang chọn phông chữ riêng”
      Tôi cũng dùng như vậy và việc duyệt web tốt hơn nhiều
    • Ứng dụng desktop hay những thứ khác có thực sự tôn trọng các thiết lập như vậy không?
    • Tôi thì không muốn như thế; tôi muốn chọn scheme riêng cho từng trang hoặc từng ứng dụng
      Có nơi chế độ tối rất tuyệt, có nơi thì vô lý. Theme trắng cũng vậy
    • Nghe như bạn muốn dùng chế độ đọc mặc định. Một số trình duyệt cho phép làm vậy

  • Quá nhiều nhà phát triển web giả định rằng ai cũng thích chế độ tối, đặt nó làm mặc định rồi biện minh rằng có nút chuyển Dark/Light Mode
    Thật ngạc nhiên là ngay cả các website mới tạo cũng thường không phát hiện tùy chọn của người dùng mà cố định một chế độ
    Nếu là nhà phát triển, bạn có thể dùng thuộc tính color-scheme của CSS để chỉ ra phần tử có thể được render thoải mái trong những bảng màu nào
    :root { color-scheme: light dark; }
    element { light-dark(light-color-code, dark-color-code); }
    Là người dùng macOS, tôi có sở thích pha trộn: chế độ tối tốt cho những thứ như thanh menu hay IDE, nhưng đọc, viết và duyệt web thì tôi thích sáng
    Có thể đặt theme thành LIGHT trong System Preferences, rồi chạy defaults write -g NSRequiresAquaSystemAppearance -bool Yes, đăng xuất, sau đó đặt theme thành DARK trong System Preferences
    Để quay lại theme mặc định, chạy defaults write -g NSRequiresAquaSystemAppearance -bool No

    1. https://developer.mozilla.org/en-US/docs/Web/CSS/color-schem...

  • Điều buồn cười là ví dụ “văn bản dễ đọc” trên blog đó với tôi lại thật sự khó đọc vì độ tương phản thấp
    Tôi tò mò không biết họ có tình trạng mắt hay dùng màn hình kiểu gì

    • Tôi đoán họ dùng một màn hình HDR rất đắt tiền dành cho nhà thiết kế và dùng toàn bộ gamut màu cho mọi thứ
    • Tôi không thể hiểu nổi nỗi ám ảnh phá hoại khả năng đọc kiểu xám trên xám trên xám
      Không chịu nổi, xấu và khó đọc. Mong mọi người dừng lại
    • Tôi cũng thích chế độ sáng, nhưng trên màn hình khoảng 300 đô của tôi, chữ xám dễ đọc hơn chữ trắng nhiều

  • Có web API để biết người dùng có đang dùng chế độ tối hay không, nên cứ dùng nó là được
    @media (prefers-color-scheme: dark) { CSS Rules here... }

  • Chế độ tối là một sai lầm
    LCD đời đầu tối nên mọi người cố bù bằng cách đẩy màu trắng lên rất mạnh, và giờ khi LCD đã bắt kịp thì nó trở thành mức thiêu mắt khá nhiều người
    Vì vậy càng ngày càng phải hỗ trợ hai chế độ, và biểu tượng chế độ tối xấu đến lố bịch của Apple cho thấy việc làm tốt chuyện này khó đến mức nào
    Lý tưởng nhất, theo tôi, là đưa màu mặc định của giao diện máy tính trở lại màu xám như thời CRT sáng còn là tiêu chuẩn
    Như vậy còn có lợi thế là có thể tạo gợi ý chiều sâu cho các thành phần UI, và điều đó cũng nên được mang trở lại

    • Đó chỉ là sở thích cá nhân thôi
      Điểm cốt lõi là nó phải cấu hình được để người dùng đặt tùy chọn của riêng mình
      Cá nhân tôi thấy chế độ sáng chói, đau mắt và gây mệt. Mỗi người khác nhau
    • CRT cũng có núm xoay chỉnh độ sáng và độ tương phản dễ dàng, nên ai cũng có thể nhanh chóng chỉnh theo sở thích của mình, dù là nền trắng chữ đen hay ngược lại
    • “Đưa màu mặc định về xám” chẳng phải trong hầu hết trường hợp là điều chế độ tối đã làm rồi sao?
      Chế độ sáng thường không phải trắng hoàn toàn, còn chế độ tối là các tông xám