title: Vary text between specific colors based on background
body: <p>Consider this partial screenshot of a webpage:</p>
  <p><a href="https://i.stack.imgur.com/8OUAa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8OUAa.png" alt="enter image description here" /></a></p>
  <p>The text color varies based on the background color because I am using <code>mix-blend-mode: difference</code> on the text.</p>
  <p>I would like to achieve a similar effect in my app, except I would like to use the following rule:</p>
  <ol>
  <li>There can be two backgrounds: #ED1B34 (red) and #FFFDF8 (cream)</li>
  <li>When the text is on top of the #FFFDF8 (cream) background its color should be #ED1B34 (red)</li>
  <li>When the text is on top of the #ED1B34 (red) background its color should be #FFFDF8 (cream)</li>
  <li>When the text is on top of anything else its color should be #ED1B34 (red).</li>
  </ol>
  <p>Blending mode <code>difference</code> comes very close to achieving (2) but not (3) as the text appears black and not cream over the red background.</p>