mherchel / contrast-grid Goto Github PK
View Code? Open in Web Editor NEWApp for contrastgrid.com
License: MIT License
App for contrastgrid.com
License: MIT License
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.
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
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.
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
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.
Would be nice to have the contrast values be copied when I click on it
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.