EightShapes/contrast-grid

Filter cells based on user-entered contrast-ratio

Opened this issue · 0 comments

An enhancement request... I would like to specify a contrast-ratio filter to see only those cells that meet my needs.

E.g. I could specify a minimum contrast-ratio, e.g. 7.0, or WCAG rating, e.g. AA, and only the cells that meet that requirement are visible, while all others become hidden/blank. A checkbox to toggle the filter on/off would be a nice touch too.

I'm working with a large grid, so hiding cells that do not meet minimum requirements would remove a lot of noise.

For extra credit.... Maybe there is some value in specifying a range, e.g. A to AA? But setting a minimum value would meet my needs.


Some JavaScript that can be run from within the Chrome console to illustrate the idea:

// Display faint-grey cell borders
$$("td").forEach(item => item.setAttribute("style", "border: 1px solid #1111")) 

// Hide cells with ratio < 7 (i.e. show only AAA-rating)
// Use 4.5 to display cells that meet AA- and AAA-rating
ratio = 7

hide = () => {$$("span.es-contrast-grid__contrast-ratio").forEach(item => {if (item.innerText < ratio) item.parentNode.parentNode.style.visibility = 'hidden'})}

// Make them visible again
show = () => $$("span.es-contrast-grid__contrast-ratio").forEach(item => {if (item.innerText < ratio) item.parentNode.parentNode.style.visibility = 'visible'})

hide()
show()