A tool for browsing and visualizing color pairings, with color and contrast information.
Single pairing view
The cart starts in this view, which provides a preview of sample text printed in a foreground color against a large expanse of background color.
The following information about each color is displayed at the top:
- Pico-8 color number (0-15,128-143)
- 6-digit hexadecimal color code
- luminance, or colloquially speaking, brightness, expressed as a value ranging from 0 (pitch black) to 1 (pure white).
- specifically, this is the Y value of the color from its CIE XYZ color space values.
The contrast ratio between the two colors is also provided. This value is calculated from the luminance of the two colors, and ranges from a minimum of 1:1 (no contrast) to a maximum of 21:1 (black vs white) and provides a metric for how distinct the colors are from one another.
The W3C Web Content Accessibility Guidelines uses this contrast ratio to set standards for ensuring that foreground text is distinguishable from background color; it recommends various minimum contrast of 3, 4.5, or 7 depending on purpose. Although the WCAG is for web pages and not virtual console game graphics/ui, and Pico-8 is inherently limited on the accessibility front by its low resolution and pixelated font, the contrast ratio remains a useful metric to guide color choices for UI and other purposes.
The contrast ratio between the two colors is printed in red or green depending on whether it satisfies a minimum threshold. This is initially set at 3 (as per WCAG) but you can customize it by going to the pause menu and picking the "set threshold" option.
Controls:
- L/R cycles through foreground colors
- U/D cycles through background colors
- X swaps the two colors
The colors are initially sorted in increasing order according to their Pico-8 color number. You can change the ordering so that they are sorted by increasing luminance: use the pause menu option for "sort" to toggle between the two sorting modes.
Grid view
The pause menu has a "view" option that toggles between "single" and "grid" view.
Grid view presents a grid of all possible foreground/background color combinations; each background color occupies a row, and each foreground color is a column. A roughly 5×5 subset is visible at any time and you can pan the view by using the directional buttons -- navigation is thus similar to the single pairing view. Ordering of the colors obeys the sort setting from the pause menu.
Each cell shows the color numbers of the foreground (top) and background (bottom) colors, and the corners are bracketed in red or green depending on whether the contrast ratio of the color pair meets the minimum threshold.
The centermost cell in the grid view is considered the "current" color pairing and will be transferred to/from the single pairing view when switching between views. It will also remain stationary when changing color sort order.
Data dumping
The pause menu has one last option for "dump matrix". This will generate a tab-separated table:
- the first row/column contains color numbers
- the second row/column contains the luminance of the color
- the remaining 32×32 matrix contains contrast ratio for each pair of colors
This table will be copied to clipboard (on standalone, not sure about bbs/web player) and can be pasted into your preferred spreadsheet software, for example.
The table will respect the color sort order as set in the pause menu.
Tip: sort by luminance will generate a table with lowest contrast along the diagonal and highest contrast pairs at top right and bottom left corners, which is likely to be the more useful version of the table.
Random stuff and trivia
Pico-8's no.7 white is not pure white, so the highest contrast possible is just shy of 19:1.
Out of 120 possible distinct pairings of the 16 default palette colors, only 48 satisfy a contrast ratio of >= 3.0. Including the expanded palette gives 205 of 496 pairings.
Number of color pairs satisfying various contrast ratios @ 0.5 intervals (skipped values = no change):
Grid view image of all color pairings sorted by color number
Grid view image of all color pairings sorted by luminance
Related work
packbat previously made a tool here that also lists all the colors along with their log-luminance value.
Neat! Love to see more accessibility tools made available - hope it helps people to be able to quickly preview color combinations!
[Please log in to post a comment]
