title: How to read the background color and calculate a contrast front color in a React function component?
body: <p>I am trying to read the background color from within a React function component (a nav header).</p>
  
  <p>The issue is that an element of my site changes the background color based on an event. When this happens the font text can become unreadable (not enough contrast).</p>
  
  <p>A part of my problem may be solved in the linked thread, but I don't know how to read the status. I have an SCSS import for the function, but the background is defined globally.</p>
  
  <p>While I am at it: Is there an ideal contrast between font color and background color?</p>
  
  <p><a href="https://stackoverflow.com/questions/59193701/how-to-change-font-color-based-on-background-color-using-reactjs">How to change font color based on background color using reactJs</a> </p>