Chữ nhạt không phải lỗi màu. Cách HAYWEB đo lại độ tương phản trên website

Người dựng website xem lại màu chữ trên màn hình trong phòng có đèn, độ sáng để cao. Người đọc thì cầm điện thoại ngoài trời, đã hạ độ sáng cho đỡ tốn pin, mặt kính lại có nắng hắt. Cùng một màu chữ ấy, hai người thấy hai thứ khác nhau. Màn hình người dựng thường để độ sáng gần hết mức, còn điện thoại ngoài đường hay ở mức bốn mươi phần trăm cho đỡ tốn pin, thêm nắng hắt lên mặt kính nữa thì nền sáng bị đẩy lên, nên cùng một trang mà hai bên nhìn ra hai thứ.

Nhiều người nghĩ chữ khó đọc là do chọn màu quá nhạt. HAYWEB tự đo trên chính website mình thì thấy khác: phần lớn chỗ hỏng chỉ hụt một chút so với mức, và phần lớn rơi vào chữ nét mảnh cỡ nhỏ. Cùng một màu ấy đủ ở cỡ lớn nhưng hụt ở cỡ nhỏ. Cách nghĩ ấy dẫn đến việc đi đổi cả bảng màu thương hiệu. Trong khi phần lớn chỗ hỏng chỉ cần nâng độ đậm là qua. Nên đo trước rồi hãy quyết định đổi gì. Đo cũng cho biết chỗ nào đáng sửa trước.

Tương phản là gì

Trả lời ngắn:Tương phản là tỉ lệ giữa độ sáng của chữ và độ sáng của nền, giúp chữ nổi bật trên nền.

Tương phản không phải màu mà là độ sáng

Tương phản không phải màu mà là tỉ lệ giữa độ sáng của hai màu; hai màu khác nhau vẫn có thể cùng độ sáng, khiến chữ chìm vào nền; con số càng lớn, chữ càng nổi bật; máy tính đo con số này, mắt người chỉ ước lượng. Mắt người quen so sánh hai màu cạnh nhau hơn là so sánh độ sáng của chúng, nên khi nhìn một màu đứng riêng, ta không thể đoán được nó có đủ nổi bật hay không. Đó là lý do phải đo bằng máy thay vì chỉ dựa vào cảm giác, con số đó cũng giúp người dựng website điều chỉnh ngay lập tức.

Mức chuẩn W3C về tương phản

Theo W3C, chữ thường cần có tỉ lệ tương phản ít nhất 4,5 so với nền, trong khi chữ lớn hơn 18 điểm hoặc 14 điểm in đậm cần ít nhất 3. Thành phần bấm được cũng phải có tỉ lệ tương phản ít nhất 3 so với màu kề bên. Hai mức này áp dụng cho hai loại chữ khác nhau, nên một website có thể đạt chuẩn ở tiêu đề mà không đạt ở chữ nhỏ. Để biết chính xác, cần đo cả trang, không chỉ dựa vào bảng màu thương hiệu.

Tương phản phụ thuộc cỡ chữ

Cùng màu nhưng tại cỡ lớn chỉ cần qua 3; cỡ nhỏ phải qua 4,5 và thường hụt; câu hỏi đúng là màu này ở cỡ này có đủ không; thay đổi cỡ chữ hoặc độ đậm cũng thay đổi mức cần đạt. Bảng màu duyệt trên tiêu đề lớn rồi đem xuống chữ chú thích thường hay hỏng; vì lúc duyệt màu người ta thường xem trên cỡ chữ lớn; nên đo lại đúng ở cỡ chữ nhỏ nhất mà trang thật sự dùng; chỗ nhỏ nhất thường là chú thích ảnh, nhãn biểu mẫu và chân trang.

HAYWEB tự đo tương phản

Trả lời ngắn:Đo 8 trang, tổng 1.261 nút chữ, 93 nút không đạt yêu cầu.

Cách đo

Để đo màu trên website HAYWEB, mở 8 trang khác nhau bằng trình duyệt, kích thước 390 nhân 844. Mỗi nút chữ nhìn thấy được, ghi màu chữ và tìm nền phía sau. Tính tỉ lệ theo chuẩn. Đo ngày 30 tháng 8 năm 2026. Các trang gồm trang chủ, danh mục, bài viết, dịch vụ, liên hệ, hồ sơ và bảng giá. Chọn nhiều loại để tránh kết luận từ trang duy nhất. Bỏ qua thẻ nằm ngoài mép ngang màn hình vì không ai nhìn thấy.

Kết quả đo nút

HAYWEB tự đo được 1.261 nút chữ, trong đó 93 nút không đạt mức, chiếm khoảng bảy phần trăm. Chỗ thấp nhất chỉ đạt 1,58. Đây là số nhà của HAYWEB, ai muốn kiểm lại thì đo chính website mình theo cùng cách. Bảy phần trăm nghe không lớn nhưng nó rải khắp tám trang chứ không dồn một chỗ, nên sửa từng trang một sẽ mất công hơn là tìm chỗ chung, con số 1,58 nằm ở một nhãn nhỏ trên trang bảng giá, HAYWEB để nguyên con số ấy trong bài chứ không giấu đi.

Lỗi nhãn chân trang

Một nhãn nhỏ ở chân trang hụt mức trên bảy trang liền. Lỗi kiểu này không phải lỗi của một trang mà là lỗi của khối dùng chung. Sửa một chỗ trong khối dùng chung thì bảy trang cùng khỏi. Đếm ra bảy lỗi nhưng thực chất chỉ là một lỗi lặp. Đếm theo cách này khiến con số lỗi bị thổi phồng. Cách gọn là xếp các lỗi theo tên lớp để tìm ra lỗi lặp. Chỗ lặp nhiều nhất thường ở đầu và chân trang.

Chỗ hỏng nằm sát mức chuẩn

Trả lời ngắn:42 trên 60 chỗ chỉ hụt một chút, không hỏng nặng.

Hụt một chút mắt không nhận ra

HAYWEB soi bằng tay 60 chỗ hụt nặng nhất; 42 chỗ nằm khoảng 4,0 đến 4,5 tức chỉ hụt một chút; 11 chỗ khoảng 3,0 đến 4,0; chỉ 7 chỗ xuống dưới 3,0; hụt một chút thì nhìn trên màn hình tốt trong phòng có đèn sẽ không nhận ra. Bốn mươi hai chỗ hụt ít ấy là phần khó nhất, vì không ai kêu ca. Người đọc chỉ thấy hơi mỏi mắt chứ không nói được là chữ mờ. Nên loại hỏng này không bao giờ tới tai chủ website qua lời than phiền. Chỉ có đo đạc mới lôi nó ra.

Chỗ hỏng do chữ nét mảnh

Chữ nét mảnh mới là chỗ hỏng; 35 trong 60 chỗ dùng độ đậm 300; cỡ chữ ở những chỗ ấy từ 9 tới 16; nét càng mảnh thì mắt càng khó tách chữ khỏi nền dù con số tương phản không đổi; nên giảm độ đậm là một cách làm chữ khó đọc mà không ai gọi tên. Một số bảng màu thương hiệu chọn màu ở độ đậm bốn trăm rồi đem dùng cho độ đậm ba trăm, lúc ấy màu không đổi nhưng lượng mực trên màn hình ít đi, nên cùng một mã màu mà cảm giác nhạt hẳn, đó là chỗ mà bảng màu không cảnh báo được.

Độ sáng màn hình ảnh hưởng

Thứ đẩy nó qua mức là chỗ người đọc đang đứng; W3C nêu nội dung nên đọc được trong những điều kiện ánh sáng khác nhau kể cả ngoài nắng và khi bị chói; người đọc ngoài trời thường hạ độ sáng màn hình cho đỡ tốn pin; mấy chỗ hụt một chút là mấy chỗ rơi trước tiên; nên chỗ ngồi của người đọc quyết định, không phải màn hình của người dựng. Trong nhà thì màn hình sáng hơn nền phòng nên chữ nổi rõ; ngoài nắng thì mặt kính hắt sáng, nền trắng bị đẩy lên gần với màu chữ; nên chỗ hụt ít bị nuốt trước tiên; đó là lý do nên thử ngay ngoài hiên thay vì chỉ ngồi bàn.

Nút chữ không đo được

Trả lời ngắn:189 nút nằm trên nền ảnh hoặc nền chuyển sắc nên không tính được.

Không tính được tỉ lệ

Vì nền đổi màu theo từng chỗ, máy không tìm được màu đặc nào. 189 nút rơi vào trường hợp này. Nền chuyển sắc đổi màu dọc theo chiều dài dòng chữ, nên cùng một dòng có chỗ đủ mức và có chỗ hụt. Lấy một điểm bất kỳ rồi tính là chọn đại một chỗ, ảnh nền cũng vậy, mỗi chỗ một màu và còn đổi khi ảnh đổi.

Ghi là chưa đo được

Không đo được thì ghi là chưa đo được. Một con số bịa còn tệ hơn một ô trống vì người đọc tưởng đã kiểm. Báo một con số cho chỗ chưa đo được là dựng ra vẻ đã kiểm, khiến người đọc thấy có số thì tin là đã xong, không ai kiểm lại nữa. Ghi chưa đo được thì ít nhất còn chừa đường quay lại, HAYWEB tách riêng 189 nút ấy ra và nói rõ vì sao.

Để đo được tỉ lệ

Phải đặt một lớp màu đặc mỏng giữa ảnh và chữ hoặc đặt chữ vào một khối có nền đặc riêng. Làm vậy vừa đọc được vừa đo được. Lớp màu đặc mỏng đặt giữa ảnh và chữ vừa giữ được ảnh vừa cho chữ một nền để đo. Cách còn lại là dời chữ ra một khối riêng có nền đặc. Cả hai cách đều đụng tới bố cục nên tốn công hơn hai việc kia. Làm xong thì lần đo sau mới có con số cho những chỗ ấy.

Sửa theo thứ tự nào

Cần thực hiện ba việc: trước tiên là điều chỉnh khối dùng chung, tiếp theo là tăng độ đậm cho chữ mảnh, cuối cùng là chỉnh sửa nền ảnh. Mỗi bước đều đòi hỏi mức độ công sức khác nhau.

Chỉnh sửa khối dùng chung

Việc này bao gồm việc sửa đổi các nhãn nhỏ lặp lại trên nhiều trang, giúp tiết kiệm thời gian và công sức vì thay đổi một lần sẽ áp dụng cho tất cả các trang liên quan. Nhãn nhỏ ở đầu trang và chân trang thường nằm trong một tệp giao diện dùng chung, sửa một dòng ở đó thì mọi trang cùng đổi theo, nên đây là chỗ đổi được nhiều nhất với ít công nhất, làm việc này trước còn giúp con số lần đo sau bớt nhiễu.

Nâng độ đậm trước khi đổi màu

Khi sử dụng chữ nét mảnh cỡ nhỏ trên website, thường cần nâng độ đậm lên một bậc để nét chữ nhìn rõ hơn. Điều chỉnh từ 300 lên 400 sẽ làm nét dày hơn một chút mà không làm thay đổi bố cục. Đổi màu là việc quan trọng liên quan đến bản sắc thương hiệu nên nên để sau. Nếu nâng độ đậm mà vẫn chưa đủ, mới cân nhắc đổi màu cho phần cụ thể cần thiết, không thay đổi toàn bộ trang.

Xử lý nền ảnh

Đây là công việc tốn nhiều thời gian và công sức nhất, đòi hỏi thay đổi bố cục hoặc đặt lớp màu đặc, thường được thực hiện sau khi đã hoàn thành hai việc trước. Việc này thường phải sửa cả chỗ đặt ảnh nên hay kéo theo việc khác, vì vậy nên gom lại làm một lần thay vì sửa lắt nhắt, trước khi làm thì nên đếm xem còn bao nhiêu chỗ thuộc loại này, nếu còn ít thì có khi để lần sau cũng được.

Câu hỏi thường gặp về độ tương phản chữ trên website

Chữ xám trên nền trắng có sai không?

Không hẳn, xám đậm vẫn qua mức còn xám nhạt thì hụt, phải đo mới biết chứ không phán bằng mắt.

Dùng khuôn có sẵn thì có phải đo không?

Vẫn phải đo, khuôn thường trông ổn trên màn hình lớn nhưng mấy nhãn nhỏ trong khuôn hay dùng chữ nét mảnh, và đó chính là chỗ hay hụt mức.

Nâng độ đậm có làm hỏng thẩm mỹ không?

Nâng một bậc thường không đổi cảm giác trang mấy, còn đổi màu mới là thứ đụng tới bản sắc thương hiệu.

Có công cụ nào tự đo hộ không?

Trình duyệt có sẵn công cụ đo tỉ lệ tương phản cho từng chỗ chữ, nhưng chỗ chữ nằm trên nền ảnh thì công cụ nào cũng chịu vì không có màu nền đặc để tính.

Bao lâu nên đo lại một lần?

Nên đo sau mỗi lần đổi giao diện hoặc đổi bảng màu, HAYWEB không có con số ngày chuẩn để nêu.

Bắt đầu từ chỗ nào trên website của bạn

Hôm nay bạn mở website trên điện thoại, cầm ra chỗ có nắng, hạ độ sáng xuống khoảng một nửa, rồi đọc thử mấy dòng chữ nhỏ ở chân trang và trong biểu mẫu liên hệ.

Chỗ nào phải nheo mắt thì ghi lại; sau đó mở công cụ của trình duyệt đo đúng mấy chỗ ấy để biết tỉ lệ tương phản đang là bao nhiêu.