Bản mẫu:Greater color contrast ratio

Trang bản mẫu bị khóa vô hạn
Bách khoa toàn thư mở Wikipedia
Tài liệu bản mẫu[xem] [sửa] [lịch sử] [làm mới]

Bản mẫu này xác định cặp màu với tỷ lệ tương phản lớn hơn: color1/color2 hoặc color1/color3. Điều này rất hữu ích để chọn một cặp màu nền trước/nền sau. Để truy cập, WCAG 2.0 AA guidelines yêu cầu tỷ lệ tương phản từ 3 trở lên đối với văn bản lớn và 4,5 hoặc lớn hơn đối với văn bản có kích thước bình thường. Khi được sử dụng ở chế độ mặc định, với color2 và color3 bằng trắng và đen, cặp màu được chọn sẽ luôn có tỷ lệ tương phản lớn hơn 4,58.

Ví dụ

  • <span style="background:navy; color:{{Greater color contrast ratio|navy|white|black}}">Navy</span>Navy
  • <span style="{{Greater color contrast ratio|navy|white|black|css=y}}">Navy</span>Navy
  • <span style="{{Greater color contrast ratio|navy|css=y}}">Navy</span>Navy
  • <span style="background:red; color:{{Greater color contrast ratio|red|white|black}}">Red</span>Red
  • <span style="{{Greater color contrast ratio|red|white|black|css=y}}">Red</span>Red
  • <span style="{{Greater color contrast ratio|red|css=y}}">Red</span>Red
  • <span style="background:white; color:{{Greater color contrast ratio|white|white|black}}">White</span>White
  • <span style="{{Greater color contrast ratio|white|white|black|css=y}}">White</span>White
  • <span style="background:black; color:{{Greater color contrast ratio|black|white|black}}">Black</span>Black
  • <span style="{{Greater color contrast ratio|black|white|black|css=y}}">Black</span>Black
  • <span style="background:#005500; color:{{Greater color contrast ratio|#005500|#FFFFFF|#000000}}">#005500</span>#005500
  • <span style="{{Greater color contrast ratio|#005500|#FFFFFF|#000000|css=y}}">#005500</span>#005500
  • <span style="background:#005500; color:#{{Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span>005500
  • <span style="{{Greater color contrast ratio|005500|FFFFFF|000000}}">005500</span>005500
  • <span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000}}">CC5500</span>CC5500
  • <span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|css=y}}">CC5500</span>CC5500
  • <span style="background:#CC5500; color:#{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1}}">CC5500</span>CC5500
  • <span style="{{Greater color contrast ratio|CC5500|FFFFFF|000000|bias=1|css=y}}">CC5500</span>CC5500
  • <span style="background:Not a color; color:#{{Greater color contrast ratio|Not a color|FFFFFF|000000}}">Not a color</span>Not a color
  • <span style="{{Greater color contrast ratio|Not a color|FFFFFF|000000|css=y}}">Not a color</span>Not a color

Một số tham số khác

Tham số bias nên thận trọng khi sử dụng hỗ trợ truy cập. Như đã nêu ở trên, khi được sử dụng mà không có sai lệch và với color2 và color3 bằng trắng và đen, cặp màu được chọn sẽ luôn có tỷ lệ tương phản lớn hơn 4,58. Độ lệch 1,25, mức tối thiểu có thể xuống còn 4.0, có thể không đáp ứng các tiêu chuẩn hỗ trợ truy cập.

Xem thêm