[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) );
}