Kiểm tra độ tương phản màu

Tất cả công cụ
Kiểm tra độ tương phản màu
Kiểm tra tỷ lệ tương phản WCAG giữa màu văn bản và màu nền — xem điểm đạt/không đạt AA/AAA cho văn bản thường, văn bản lớn và UI components, với bản xem trước trực tiếp và gợi ý màu accessible.
Màu văn bản
Tint
Màu nền
Tint
Tỷ lệ tương phản
--:1
Văn bản thường
Văn bản thân dưới 18px (hoặc dưới 14px đậm)
AA AAA
Văn bản lớn
18px+ thường, hoặc 14px+ đậm
AA AAA
UI components
Biểu tượng, đường viền, điều khiển biểu mẫu & đồ họa
AA AAA
Xem trước trực tiếp

The quick brown fox

Văn bản lớn dễ đọc khi độ tương phản đủ cao.

Đây là đoạn văn mẫu của văn bản thân thông thường. Độ tương phản màu tốt giúp nội dung của bạn dễ đọc cho tất cả mọi người, kể cả người có thị lực kém hoặc mù màu. một liên kết mẫu.

Chữ nhỏ và chú thích khó đọc nhất — chúng cần tương phản cao nhất.
Nút mẫu Nút mẫu
Gợi ý

Mọi thứ được tính toán trực tiếp trong trình duyệt bằng công thức độ sáng tương đối WCAG 2.x — không tải lên, không đăng ký, hoàn toàn miễn phí.

Chia sẻ
Công cụ liên quan
Mô phỏng mù màu

Xem ảnh hoặc bảng màu của bạn theo cách người có protanopia, deuteranopia, tritanopia hoặc achromatopsia nhìn — chạy hoàn toàn trong trình duyệt, không tải lên gì.
Chuyển đổi mã màu

Chuyển đổi màu giữa HEX, RGB, RGBA, HSL, HSLA và HSV — chọn màu, chỉnh alpha, và sao chép bất kỳ định dạng nào ngay lập tức.
Xuất bảng màu

Dán hoặc nhập bộ màu và xuất ngay sang CSS variables, SCSS, Tailwind config, JSON hoặc SVG swatches — bước hoàn thiện cho bất kỳ bảng màu nào.
Tìm kiếm phổ biến
kiểm tra độ tương phản màu tỷ lệ tương phản wcag kiểm tra tương phản trợ năng kiểm tra tương phản chữ kiểm tra tương phản aa aaa kiểm tra độ tương phản màu trực tuyến

Thêm công cụ miễn phí này vào trang web của riêng bạn — sao chép và dán mã bên dưới.