Skip to content

Latest commit



26 lines (16 loc) · 1.92 KB

File metadata and controls

26 lines (16 loc) · 1.92 KB

Fancy Font Flipping

Fancy Font Flipping is a demo I first put up in CodePen to illustrate the issues with flipping the text color from black to white based on a given estimated background luminance. For details and explainations, please see this Gist that briefly describes the science behind all of this. The index.html file here contains the CSS and JS, and is viewable live on this link.


  • Flips font color from black to white, depending on background
  • Adjusts font size based on resultant contrast.
  • Secondary sample text in opposite color
  • Color picker to set the overall background.

The live CodePen is

There are a number of constants you can adjust to see how different levels of luminance or percepual lightness affect the readability of the text. In conjuction with this, near the middle range, the font is increased in size. This is because small fonts need more contrast than is available between the actual middle contrast (on an sRGB monitor) and either black or white.

NEW! Max-Contrast

New repo, Max Contrast which is a simplified "it just works" function to flip color from black to white based on a background color.

an image of mad max racing through the desert and behind them are the letters MAX and under that is the word contrast

Related Repo: APCA - Accessible Perceptual Contrast Algorithm

The SAPC-APCA Repo on GitHub APCA is a perceptually uniform contrast prediction method and the candidate method for WCAG 3.

Example Output