mherchel/contrast-grid

App for contrastgrid.com

Contrast Grid Tool

This repository is the codebase for ContrastGrid.com.

About

This online tool takes one or more lists of names/colors (in most common formats) and generates a grid matrix showing the colors’ contrast ratio against each other. If entering a name for the color, separate it with a colon (:).

This is useful when evaluating color systems, and which colors can be paired together while still remaining accessible (per WCAG 2.1 1.4.3 Minimum Contrast Success Criterion).

Features

I had a lot of fun adding some really cool features into this:

• Extremely lightweight. Built with vanilla JavaScript and CSS.
• Saves the input colors to the URL, so the link can be shared or bookmarked (and ability to use back/forward to navigate).
• Ability to ingest lots of color formats such as hex, HSL, etc. We use the TinyColor library, which accepts formats such as hex, HSL, named, HSV, etc. See here for more info.
• Ability to specify different sets of colors on the X and Y axes (and flip them if you want).
• Easy copy/pasting of CSS with variable names (even with comments afterwards). The following code will parse perfectly:

--teen-party--primary: #cc208e; /* accessibile on white, not on dark */
--teen-party--secondary: #6713d2; /* accessibile on white, not on dark */
--cotton-candy--primary: #00dbde; /* not accessibile on white. Accessible on dark */
--cotton-candy--secondary: #fc00ff; /* not accessibile on white. 3.19:1 on dark */

• Easy copying and pasting from Sass maps into the form. The following will work perfectly (the invalid lines will be discarded):

$palette: (
  blue-40: #185d87,
  blue-45: #0068a8,
  blue-50: #177ab6,
  blue-55: #2284c0,
  blue-60: #37a9ef,
  blue-70: #89d2ff,
  blue-90: #cdebf9,
);

• Table headings (both column and row) will become “sticky” and stay in the viewport. This is useful when evaluating very large color systems which requires both horizontal and vertical scrolling.
• Super nifty "flip axis data" button (↑↓) that will flip the values in the X and Y coordinates.

Inspiration

The concept of this site is inspired by Eightshapes' Contrast Grid, as well as Kate Deibel's Contrast Table Analyzer. Both of these tools are excellent, but didn’t provide exactly what I was looking for.

contrast-grid's Issues

Feat: Make X/Y axes optional

Making the X/Y axis differentiation optional would allow you simply paste in a list of all colors used and would serve as both axes, showing all possible color combinations

Transparency data not used in color display or contrast calcuations

When an input color includes transparency (#00636366, hsla(180, 100%, 19.4%, 0.4), rgba(0, 99, 99, 0.4), etc.) what's displayed in the output table is the color without transparency. Also, the contrast value calculated is for the color without transparency.

Transparency included in the text color complicates the contrast calculation but an accurate number is possible. When the background color includes transparency, the actual displayed color depends on the color(s) behind the element. I like what Lea Verou's Contrast Ratio site appears to do, calculates the contrast if the color behind the element is white, again if the color behind is black, then displays a contrast value halfway between with a +/- value, like error bars.

Until/unless the transparency data is included in the calculation, I think the directions should have a note about what happens to it.

Feature: Add ability to hide cells below desired threshold

As we calculate our values and get inaccessible color combos, it would be nice to be able to filter out all values below AAA/AA thresholds or a custom numeric threshold

Feature request: Ability to sort colors by hue, saturation, or luminosity

Feature: Add ability to copy contrast value on click

Would be nice to have the contrast values be copied when I click on it

Idea: keep Directions and Features info on page after color entry

I think it would be helpful to have the Directions and Features available on the page after color values have been entered.

Perhaps they could be in a <details> <summary> that's open by default then close it and insert the table output above it in the DOM. If it's a flex sibling to the form and table, maybe it doesn't need to be in a disclosure widget, just let it wrap below the other items or be displayed to the side if the viewport is wide enough.

Variable names matching color keywords discarded

I love the tool's ability to accept pasted in CSS custom properties and Sass variables and to display them in the table output; the string: color format can be used for including names for colors even if those names aren't used as variables.

I've found if the string to the left of the colon matches a CSS color keyword (white, black, crimson, chocolate, etc.) it is not in the table output or in the URL. It would be better if the color name was preserved.