title: Use CSS to dynamically calculate the forground color based on the inherited background color
body: <p>We are changing the look and feel of our website.   The colors of many elements are changing.   Our secondary button is changing from a purple background with white text:</p>
  
  <p><img src="https://i.imgur.com/Qgatj3S.png" alt=""></p>
  
  <p>To a red border surrounding an inherited background:</p>
  
  <p><img src="https://i.imgur.com/Y5yyCxN.png" alt=""></p>
  
  <p>We use this button in hundreds of locations on many pages.   It resides in sections with various background colors (and a few background images).</p>
  
  <p>With the old button treatment, I didn't have to worry about the background color when determining the text color.   The text color was always white:</p>
  
  <pre><code>.secondary-button {
      color: white;
  }
  </code></pre>
  
  <p>Now the font color is going to have to change based on the background.  It either needs to be white or purple depending on how dark the background is. The white just doesn't work on light colored backgrounds:</p>
  
  <p><img src="https://i.imgur.com/3rOGrm8.png" alt=""></p>
  
  <p>Because this button is used in so many places, I don't want to have to manually go through all of them and choose on a per button basis.   Is there a way in CSS to choose one of two background colors based on the darkness of the background?  Something like:</p>
  
  <pre><code>.secondary-button {
      color: calc(background-color&gt;#999?purple:white);
  }
  </code></pre>
  
  <p>I found ways to accomplish this with JavaScript: <a href="https://stackoverflow.com/questions/11867545/change-text-color-based-on-brightness-of-the-covered-background-area">Change text color based on brightness of the covered background area?</a> and also language agnostic algorithms to calculate how dark a color is: <a href="https://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color">Determine font color based on background color</a> but I was unable to locate a pure CSS solution.</p>