Skip to content

Filter cells based on user-entered contrast-ratio #15

@LiveFreeAndRoam

Description

@LiveFreeAndRoam

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()

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions