Chọn màu đẹp, đọc thật rõ.

Thử màu chữ trên màu nền. Xem có dễ đọc không và tìm cách phối màu rõ hơn.

Mẫu thương hiệu

xBOOK01 · Nhận diện

Logo gốc của chủ sở hữu — hiển thị nguyên bản, không đổi màu, không chấm như chữ.

Font Kontrapunkt của xBOOK chưa có dấu tiếng Việt, nên chữ tiếng Việt dùng Inter; Kontrapunkt dùng cho tên thương hiệu và mã màu. Phân vai này là ví dụ.

xBOOK02 · Hệ màu

Thanh tỷ lệ chỉ minh hoạ cách phân bổ màu trong thiết kế (nền – chữ – nhấn), không phải điểm tương phản.

xBOOK03 · Ứng dụng

Bấm vào tiêu đề, đoạn văn, nút hoặc biểu tượng trên trang mẫu để chỉnh đúng phần đó.

Tuỳ chọn hiển thị

Làm mờ các phần không chọn (chỉ khi xem) Hiện dấu ở phần chưa đủ rõ

Đang chỉnh: Tiêu đề

Màu chữ

Mã màu

Sáng – tối

Màu “Mực xBOOK” dùng ở 3 vị trí (cùng với: Nút bấm, Biểu tượng).

Chỉ phần này Cập nhật màu dùng chung

Màu nền

Mã màu

Sáng – tối

Màu “Giấy” dùng ở 4 vị trí (cùng với: Đoạn văn, Nút bấm, Biểu tượng).

Chỉ phần này Cập nhật màu dùng chung

Cỡ chữ

Đang thử: chữ lớn
Chữ lớn: từ 24 px, hoặc từ 18,67 px khi in đậm.

Dễ đọc

Cặp màu này đủ rõ cho cả chữ thường và chữ lớn.

Với chữ 40 px đậm của phần này: đủ rõ.

Có thể dùng cặp màu này cho đoạn văn.

Bảng màu

Mở dự án

Dự án chỉ được lưu trên máy của bạn, không gửi đi đâu.

HELP · Hướng dẫn

Bắt đầu nhanh

Công cụ cho bạn thử màu trên các trang mẫu của một thương hiệu và cho biết chữ, nút, biểu tượng có đủ rõ không.

Chọn mẫu thương hiệu xBOOK hoặc TUTBRAND (hoặc bấm “Đổi mẫu ngẫu nhiên”).
Bấm vào tiêu đề, đoạn văn, nút hoặc biểu tượng trên trang mẫu để chọn phần cần sửa.
Đổi màu chữ và màu nền bên dưới; kết quả “Dễ đọc / Khó đọc” cập nhật ngay.
Dùng “Tự chỉnh màu” nếu còn cặp chưa đạt, rồi “Xuất bảng mã màu” để lưu PDF/SVG/CSS/JSON.

Thử ngay

Tạo một mẫu thương hiệu mới (bộ màu mẫu thay bảng màu hiện tại, có thể hoàn tác).

Chọn, sửa và khoá màu

Mỗi ô trong “Bảng màu” có tên, mã HEX, nút sao chép và nút khoá. Bấm vào ô màu để mở bảng sửa: đổi tên, nhập HEX, chọn màu, kéo thanh sáng – tối, đổi vị trí hoặc xoá.

Một màu có thể dùng ở nhiều chỗ (ví dụ nền và chữ nút). Khi sửa màu của một phần, bạn chọn “Chỉ phần này” (tạo màu riêng) hoặc “Mọi chỗ dùng màu này”.

Màu đã khoá không bị đổi bởi “Tự chỉnh màu” hay “Tạo bảng màu”. Bạn vẫn có thể tự sửa màu khoá.

Thử ngay

Kéo thanh sáng – tối của màu chữ mẫu và xem tỷ lệ thay đổi trên nền trắng.

Màu chữ và màu nền vừa đủ khác nhau sẽ giúp mọi người, từ bạn nhỏ đến ông bà, đọc dễ dàng hơn.

Sáng – tối

Đổi mẫu thương hiệu

Mỗi dự án chỉ dùng MỘT thương hiệu mẫu: xBOOK hoặc TUTBRAND. Đổi thương hiệu giữ nguyên bảng màu của bạn; nút “Dùng bộ màu mẫu” mới thay bảng màu (có thể hoàn tác).

“Đổi mẫu ngẫu nhiên” chỉ chạy khi bạn bấm (hoặc lần đầu mở công cụ). Khi bạn đang chỉnh màu, thương hiệu không tự đổi.

Logo và hoạ tiết là file gốc của chủ sở hữu, hiển thị nguyên bản và không bị đổi màu. Logo không được chấm như chữ thân bài. Văn bản trên trang là nội dung mẫu.

Thử ngay

Tự chỉnh màu và hoàn tác

“Tự chỉnh màu” thử nhiều mức sáng – tối cho các màu được phép đổi để nhiều cặp màu đạt mục tiêu hơn.

Màu đã khoá luôn giữ nguyên.
Không có gì thay đổi cho đến khi bạn bấm “Dùng bộ màu này”; áp dụng là một bước, bấm Hoàn tác để quay lại.
Kết quả cho biết cặp nào đã được cải thiện và cặp nào vẫn chưa đạt (ví dụ vì cả hai màu đều bị khoá).
Đây là tìm kiếm có giới hạn, không phải lời giải tối ưu duy nhất; hãy xem bản trước–sau trước khi dùng.

Thử ngay

Đọc kết quả

Ô kết quả nói phần đang chọn “Dễ đọc”, “Chỉ nên dùng cho chữ lớn” hay “Khó đọc”. Nút và biểu tượng được xét là “Dễ thấy” hoặc “Khó thấy”. Bấm “Xem chi tiết” để thấy tỷ lệ và mức AA/AAA.

Với cùng một cặp màu, chữ to hoặc đậm dễ đọc hơn chữ nhỏ. Tỷ lệ tương phản không đổi khi đổi cỡ chữ, chỉ có mức yêu cầu thay đổi.

Thử ngay

Dữ liệu ví dụ

Màu chữ và màu nền vừa đủ khác nhau sẽ giúp mọi người, từ bạn nhỏ đến ông bà, đọc dễ dàng hơn.

Bấm “Thử ngay” để đưa ví dụ vào bản xem trước. Bạn có thể bấm Hoàn tác.

Tỷ lệ không đổi khi đổi cỡ chữ; chỉ mức yêu cầu thay đổi. Chữ lớn là từ 24 px thường hoặc khoảng 18,66 px đậm.

Xuất PDF/SVG/CSS/JSON, in và nhúng

PDF và SVG: bảng mã màu có logo, tên màu, vai trò, HEX/RGB và các cặp màu. Mỗi file chỉ có một thương hiệu.
CSS: biến màu (--color-…) để dán vào website. JSON: bảng màu có thể mở lại bằng nút “Mở”.
Gợi ý chưa áp dụng của “Tự chỉnh màu” cũng xuất được, và luôn được ghi rõ là gợi ý.
“In” mở hộp in của trình duyệt với cùng bố cục.
“Nhúng” tạo mã iframe để đặt công cụ vào trang khác (có thể tự giãn chiều cao).

Thử ngay

Kiến thức màu sắc

Sắc màu, độ bão hoà và sáng – tối

Cách mô tả HSL chia một màu sRGB thành: sắc màu (góc trên vòng màu, 0–359°), độ bão hoà (càng xa màu xám càng rực) và độ sáng (từ đen tới trắng). Đổi sắc màu hay độ bão hoà không giữ nguyên độ tương phản; độ sáng thường ảnh hưởng nhiều nhất.

Thử ngay

Sắc màu Độ rực Sáng – tối

Cùng giá trị “sáng” trong HSL nhưng màu vàng và màu xanh dương có độ chói rất khác, nên tỷ lệ tương phản cũng khác.

Màu nóng và màu lạnh

Theo quy ước thiết kế phổ biến, đỏ – cam – vàng được gọi là màu nóng, xanh lá – xanh dương – tím là màu lạnh. Đây là cách gọi quen dùng, không phải tiêu chuẩn; cảm nhận và ý nghĩa của màu thay đổi theo văn hoá và ngữ cảnh.

Phối màu

Đơn sắc dùng một sắc màu với nhiều độ sáng; tương đồng dùng các sắc màu gần nhau trên vòng màu; bổ túc dùng hai sắc màu đối diện. Phối màu giúp chọn màu hợp nhau nhưng không bảo đảm đủ tương phản — vẫn cần kiểm tra từng cặp chữ/nền.

Vai trò và tỷ lệ màu

Trong thiết kế, mỗi màu có vai trò: nền, chữ, màu nhấn cho nút, biểu tượng. Tỷ lệ như 60–30–10 chỉ là gợi ý bố cục để minh hoạ, không phải quy định. Đừng chỉ dùng màu để truyền thông tin (ví dụ lỗi) — hãy thêm chữ hoặc biểu tượng.

Mã màu RGB, HEX và CMYK

HEX (#RRGGBB) là cách viết ngắn của ba giá trị đỏ – lục – lam (0–255) trong không gian màu sRGB dùng trên web. Công cụ tính mọi kết quả trong sRGB.

Màu in CMYK phụ thuộc máy in, giấy và hồ sơ màu (ICC profile); cùng một mã có thể ra màu khác nhau. Công cụ không đổi sang CMYK hay Pantone — hãy nhờ nhà in thử bản in thật.

Tương phản trên màn hình

Độ sáng màn hình, ánh sáng xung quanh và thị lực người đọc làm màu trông khác đi. Vì vậy nên để dư một chút so với ngưỡng tối thiểu.

Tiêu chuẩn, công thức, giới hạn và nguồn

“Dễ đọc” nghĩa là cặp màu đạt mức AA cho chữ thường (từ 4,5:1). “Chỉ nên dùng cho chữ lớn” nghĩa là chỉ đạt mức AA cho chữ lớn (từ 3:1). “Khó đọc” là dưới 3:1.

Ngưỡng tương phản tối thiểu theo WCAG 2.2
Đối tượng	AA	AAA
Chữ thường	4,5:1	7:1
Chữ lớn	3:1	4,5:1
Thành phần giao diện và đồ họa	3:1	Không có ngưỡng AAA

Tỷ lệ hiển thị được cắt xuống 2 chữ số thập phân; kết luận đạt/chưa đạt dùng giá trị chưa làm tròn.

Công thức & cách tính

Mỗi kênh màu sRGB được đổi về 0–1 rồi tuyến tính hoá: c/12,92 nếu c ≤ 0,04045, ngược lại ((c + 0,055)/1,055)^2,4. Độ chói L = 0,2126 R + 0,7152 G + 0,0722 B. Tỷ lệ = (L sáng + 0,05) / (L tối + 0,05).

Với cặp màu đang thử: độ chói chữ 0,0138, độ chói nền 0,9338 → tỷ lệ 15,41:1.

Công cụ kiểm tra được gì?

Công cụ đo độ tương phản giữa hai màu đục trên màn hình. Kết quả giúp chọn màu, không phải chứng nhận.

Chỉ kiểm tra từng cặp màu; không chứng nhận cả website hay cả thiết kế đạt WCAG.
Chỉ nhận màu sRGB đục dạng HEX 3 hoặc 6 ký tự; chưa hỗ trợ độ trong suốt, dải màu hay ảnh nền.
Kết quả là tương phản số trên màn hình; không bảo đảm màu in hay vật liệu in.
Không dùng APCA để kết luận AA/AAA, và không mô phỏng các dạng suy giảm thị lực.
Hình ảnh mẫu chỉ minh hoạ; không đại diện cho mọi thiết bị hay mọi người đọc.
Logo và chữ trong logo không phải đối tượng chấm tương phản của công cụ.

Nguồn tham khảo

Công thức và ngưỡng lấy từ tài liệu chính thức của W3C:

Chi tiết kỹ thuật: Tiêu đề

Tỷ lệ tương phản: 15,41 : 1

Màu chữ #101D42 · Màu nền #FBF7F1

Phần này đang được tính là: chữ lớn.

Tỷ lệ hiển thị được cắt xuống 2 chữ số thập phân; kết luận dùng giá trị chưa làm tròn.

Đọc thêm trong HELP: Tiêu chuẩn và công thức

Đối tượng	AA	AAA
Chữ thường	✓ Đạt (≥ 4,5:1)	✓ Đạt (≥ 7:1)
Chữ lớn	✓ Đạt (≥ 3:1)	✓ Đạt (≥ 4,5:1)
Thành phần giao diện và đồ họa	✓ Đạt (≥ 3:1)	— Không có ngưỡng AAA

Đây là đánh giá một cặp màu trên màn hình, không phải chứng nhận cho cả thiết kế hay cho mọi người đọc.

Chọn màu đẹp, đọc thật rõ.

Đang chỉnh: Tiêu đề

Cỡ chữ

Dễ đọc

Gợi ý màu dễ đọc hơn

Phối màu

Bảng màu

Sửa màu:

Các cặp màu trong bảng màu

Nhúng công cụ vào website của bạn

Chi tiết kỹ thuật: Tiêu đề

Tự chỉnh màu

Lựa chọn

Bảng màu hiện tại

Cặp được cải thiện

Cặp chưa đạt

Mã màu thay đổi

Kết quả từng cặp

Tải xuống

Chọn màu đẹp, đọc thật rõ.

Bản xem trước

Đang chỉnh: Tiêu đề

Cỡ chữ

Dễ đọc

Gợi ý màu dễ đọc hơn

Phối màu

Bảng màu

Sửa màu:

Các cặp màu trong bảng màu

Dự án

Nhúng công cụ vào website của bạn