Elements invisible to naked eye. ::visibly-hidden pseudo class?

Wanted to throw this out there for discussion...

The problem:

An element with a black background sits inside a container element with a
black background.  The element is invisible to the naked eye, but not
display:none or visibility:hidden.  You want to adjust the styling of just
that element, but have no way to do so that will support future style
changes.  (What if I want to change the container background to white or
add support for themes.)

I can't think of any solid workarounds.

I explain the problem in more detail here:
mawhorter.net/post/91279744832/i-want-a-new-pseudo-class-take-a-look-at-the


Proposed solution:

A ::visibly-hidden pseudo selector.  You can then modify properties only
when an element becomes "invisible".  I realize "invisible to the naked
eye" is subjective and that my visibly hidden doesn't match yours.  But
pretty good generalizations exist.


Accessibility:

As a side benefit, I could see this being hugely useful for getting better
with accessible websites for the visually impaired (color blind).  Some
setting would need to be added to the browser to make the selector truly
useful for this.

It just kinda sucks that people with color blindness are stuck with looking
at crappy designs like this
http://dev.chromium.org/user-experience/low-vision-support#TOC-High-Contrast-and-Custom-Color-Support

That is faarrrr outside the scope of this list, but I feel not unrelated.