https://github.com/myndex/fancyfontflipping

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.
https://github.com/myndex/fancyfontflipping

color contrast contrastive-predictive-coding readability text

Last synced: about 2 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/myndex/fancyfontflipping
• Owner: Myndex
• License: agpl-3.0
• Created: 2021-12-23T06:12:02.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-10-19T11:44:51.000Z (over 1 year ago)
• Last Synced: 2025-03-31T19:22:57.919Z (3 months ago)
• Topics: color, contrast, contrastive-predictive-coding, readability, text
• Language: HTML
• Homepage: https://www.myndex.com/WEB/FlipForColor
• Size: 7.72 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://gist.github.com/Myndex/e1025706436736166561d339fd667493#lets-flip-for-color) 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.](https://myndex.github.io/fancyfontflipping/)

## 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](https://github.com/Myndex/max-contrast) which is a simplified "it just works" function to flip color from black to white based on a background color.



### Related Repo: APCA - Accessible Perceptual Contrast Algorithm

The [SAPC-APCA Repo on GitHub](https://github.com/Myndex/SAPC-APCA/tree/master/documentation) APCA is a perceptually uniform contrast prediction method and the candidate method for WCAG 3.

### Example Output