mherchel / contrast-grid Goto Github PK

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

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

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.

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

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.

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.