Bước tới nội dung

Bản mẫu:Greater color contrast ratio/doc

Bách khoa toàn thư mở Wikipedia

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ụ[sửa mã nguồn]

  • <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[sửa mã nguồn]

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[sửa mã nguồn]