[CT-2333] Change font color to maximize contrast against node in lineage graph

[rsanjabi]

Describe the feature

Within the lineage graph, the font color is always white. Overriding the default node colors to some shades can make it difficult to read the node names.

For example, red and black colors make it easy to see staging_model1 and int_model, while gold and light gray with white text make it difficult to read staging_model2 and mart_model1

Setting the font color relative to the node color should make a wider range of node colors practical.

Describe alternatives you've considered

Creating a favorite list of colors that read well and using that vs. trial and error.

Additional context

The larger the graph, the smaller the nodes tend to be, and the more that contrast is helpful.

Who will this benefit?

• visually impaired folks
• projects with lots of nodes.

Are you interested in contributing this feature?

Probably not.

[dbeatty10]

@rsanjabi easy to see your point -- thanks for raising it!

Three ideas how to solve this from most simple to complex:

1. Share a list of hex values with contrast ratios of at least 4.5:1
   • to meet the latest accessibility guidelines (e.g., WCAG 2.1 until WCAG 2.2 comes out)
2. Choose (in JavaScript somehow) between white and black text based on whichever has a higher contrast ratio
3. Add a node_text_color property to complement the node_color property

Trade-offs

Option 2 seems like a reasonable balance between simplicity and complexity. With a healthy dose of optimism, I'm going to label this as good_first_issue for a community member to try to implement.

See below for a completely untested idea for implementation. Scroll down further for a list of high contrast ratio colors for white text.

Ideas for implementing Option 2

function getContrastRatio(color1, color2) {
  const luminance = (color) => {
    const rgb = color.match(/\w\w/g).map((x) => parseInt(x, 16) / 255);
    const gammaCorrect = (x) => (x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4);
    const r = gammaCorrect(rgb[0]);
    const g = gammaCorrect(rgb[1]);
    const b = gammaCorrect(rgb[2]);
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
  };

  const l1 = luminance(color1) + 0.05;
  const l2 = luminance(color2) + 0.05;
  return Math.max(l1, l2) / Math.min(l1, l2);
}

function chooseTextColor(bgColor) {
  const whiteColor = 'ffffff';
  const blackColor = '000000';

  const contrastWhite = getContrastRatio(whiteColor, bgColor);
  const contrastBlack = getContrastRatio(blackColor, bgColor);

  return contrastWhite >= contrastBlack ? whiteColor : blackColor;
}

const bgColor = '3f87a6';
const textColor = chooseTextColor(bgColor);
console.log(`The chosen text color is #${textColor}`); // The chosen text color is #ffffff

List of high-contrast background colors for white text

Source: https://www.msfw.com/services/contrastratiocalculator

Sorted by color code:

#000000
#330000
#333300
#003300
#003333
#000033
#330033
#660000
#663300
#666600
#336600
#006600
#006633
#006666
#003366
#000066
#330066
#660066
#660033
#990000
#993300
#996600
#006699
#003399
#000099
#330099
#660099
#990099
#990066
#990033
#cc0000
#cc3300
#0066cc
#0033cc
#0000cc
#3300cc
#6600cc
#9900cc
#cc00cc
#cc0099
#cc0066
#cc0033
#0066ff
#0033ff
#0000ff
#3300ff
#6600ff
#9900ff
#3366ff
#3333ff
#6633ff
#9933ff
#666666
#333333
#000000

[github-actions]

This issue has been marked as Stale because it has been open for 180 days with no activity. If you would like the issue to remain open, please comment on the issue or else it will be closed in 7 days.

[github-actions]

Although we are closing this issue as stale, it's not gone forever. Issues can be reopened if there is renewed community interest. Just add a comment to notify the maintainers.