Skip to content

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.

License

Notifications You must be signed in to change notification settings

Myndex/fancyfontflipping

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.

Features

  • 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 https://codepen.io/myndex/pen/GRyxrrm

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

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages