Options
Read Me
This page is a playground for testing various contrast methods to see whether a black or white foreground color provides the best contrast against a given background color for each contrast method.
Best viewed on a desktop sized screen. Everything should work on a smaller screen but your experience will be suboptimal.
Instructions
Click on the chart to select a background color. Hold shift while mousing over the chart to see the background color and contrast values update in real time.
Only colors in the sRGB gamut will be displayed. If you select a background color that is not in the sRGB gamut, it will be gamut mapped to a color in the sRGB gamut.
A check mark will be shown next to the foreground color that provides the best contrast for the selected background color. The check mark does not mean that the background and foreground color combination passes any accessibility guidelines.
Contrast Algorithms
Credits
Inspired by the Black or White? demo from Colorjs.io and the Let's Flip For Color gist by Myndex.
Graphs were inspired by the Evil Martians Oklch color picker.
Built With
Lit, Color.js, Vite and Nano Stores. WebGL is used to render the charts into a custom web component. Fonts are Inter 4.0-beta9h and Martian Mono.
Notes
- The charts are drawn in a 16/9 aspect ratio which is not optimal for charts that have x and y axis ranges that are the same. I'm to lazy to fix this right now.
- Most of the color spaces probably won't be very useful, but they're fun to play with.
- Support for showing colors in the display-p3 gamut is coming “soon”.
- The source code isn't available at the moment. I'll most likely make it available sometime in 2024.
- If you have questions, comments or a bug report you can send an email or contact me on X (twitter)
[1] The title of this page is a play on the What is your favorite color?
question from the Bridge of Death scene in Monty Python and the Holy Grail.