Trình kiểm tra độ tương phản màu

Kiểm tra độ tương phản tiền cảnh/nền sau với WCAG AA và AAA. Xem cập nhật tỷ lệ khi bạn chọn màu.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Text / on-page input

Bản xem trước nhiều lớp rất phức tạp có thể có cảm giác chậm hơn trên điện thoại cũ.

Trình tạo màu & CSS chạy hoàn toàn trong trình duyệt của bạn. Bản xem trước và chuyển đổi không bao giờ tải lên kiểu của bạn.

Sử dụng Trình kiểm tra độ tương phản màu bất cứ khi nào bạn cần: Kiểm tra độ tương phản nền trước/nền sau theo hướng dẫn của WCAG AA và AAA.

Kiểm tra CSS cạnh tranh trên trang của bạn (đặt lại, màu kế thừa). Trước tiên hãy sao chép quy tắc đã tạo vào biểu định kiểu riêng biệt.

Không. Trình tạo và bộ chuyển đổi chạy trong trình duyệt của bạn với bản xem trước trực tiếp.

Không. Mở công cụ, điều chỉnh các điều khiển và sao chép CSS.

Convert colors between HEX, RGB, and HSL instantly with a live swatch.

Craft readable text-shadow styles with live typography preview.

Build linear, radial, and conic gradients with live preview and copy-ready CSS.