Quick Solve for an ADA Styling Issue

A friend of mine had an accessibility issue with styling an inactive button and maintaining a passing ADA contrast ratio of 4.5:1 or better.

The problem he was having involved the use of the opacity property. When the button was "inactive" the opacity caused the button to fade however the button copy wasn't legible because the opacity property affected it as well.

For example, this will affect the opacity of the parent element as well as the child elements.

.inactive{
    background-color: black;
    opacity: .5;
 }

The solution I offered was to modify the CSS and use a rgba() value instead. This value allows for direct control of the parent element's base color and the alpha channel so we can fade it without changing the opacity of the child elements.

.inactive{
    background-color: rgba(0,0,0,.5);
}