[Contextual Logging With Console Context] UI Accessibility

[aarongustafson]

First off, I love the proposed enhancements here.

In terms of the concerns over proper color contrast for accessibility of the badges when using dev-defined colors, you should be able to analyze the color and determine whether it’s better to go with white or black text against the color background for maximum contrast. You could even take it a step further and tune the design to mimic how GitHub handles labels (using some clever color calculations):

.btUVdh {
  text-decoration-color: currentcolor;

  --label-r: 83;
  --label-g: 25;
  --label-b: 231;
  --label-h: 257;
  --label-s: 81;
  --label-l: 50;
  --perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
  --lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
  --border-color: var( --borderColor-muted, var(--color-border-subtle) );
  --lightness-threshold: 0.6;
  --background-alpha: 0.18;
  --border-alpha: 0.3;
  --lighten-by: calc( ((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch) );

  background: rgba( var(--label-r), var(--label-g),var(--label-b), var(--background-alpha) );
  color: hsl( var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%) );
  border-color: hsla( var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha) );
}

[NOHU9]

Trước hết, tôi thích những cải tiến được đề xuất ở đây.

Về mối quan tâm về độ tương phản màu sắc phù hợp để dễ truy cập huy hiệu khi sử dụng màu do dev xác định, bạn sẽ có thể phân tích màu sắc và xác định xem nên sử dụng văn bản màu trắng hay đen trên nền màu để có độ tương phản tối đa. Bạn thậm chí có thể tiến thêm một bước nữa và điều chỉnh thiết kế để mô phỏng cách GitHub xử lý nhãn (sử dụng một số phép tính màu thông minh):

.btUVdh {
text-decoration-color: currentcolor;

--label-r: 83;
--label-g: 25;
--label-b: 231;
--label-h: 257;
--label-s: 81;
--label-l: 50;
--perceived-lightness: calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
--lightness-switch: max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));
--border-color: var( --borderColor-muted, var(--color-border-subtle) );
--lightness-threshold: 0.6;
--background-alpha: 0.18;
--border-alpha: 0.3;
--lighten-by: calc( ((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch) );

background: rgba( var(--label-r), var(--label-g),var(--label-b), var(--background-alpha) );
color: hsl( var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%) );
border-color: hsla( var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha) );
}

#1010 (comment)