How to dynamically make text’s color to be in contrast to its parent’s background color?

There are div having background color, containing text :

callAPI("/activites/prestationsFromGroupes", "POST", JSON.stringify(groupes)).then(prestationsGroupes => {
     let htmlPrestations = "";
     for(let i = 0 ; i < groupes.length ; i++) {
         let groupe = groupes[i];
         let prestations = prestationsGroupes[groupe['id']];
         let active = (i == onglet ? 'active' : '');
         htmlPrestations += '<div class="tab-pane min-h100 fade show '+active+'" id="pills-activites'+i+'" role="tabpanel" aria-labelledby="pills-activites'+i+'-tab">';
         htmlPrestations += '   <div class="group-menu-form">';
         for(let j = 0 ; j < prestations.length ; j++) {
             let prestation = prestations[j];
             let autoriseVae = prestation['autoriseVae'];
             if (autoriseVae == null) {
                 autoriseVae = 0;
             }
             let cuissonApplicable = prestation['cuissonApplicable'];
             if (cuissonApplicable == null) {
                 cuissonApplicable = 0;
             }
             let cdeCuisine = prestation['cdeCuisine'];
             if (cdeCuisine == null) {
                 cdeCuisine = 0;
             }
             let CSSbgcolor = prestation['couleur'] == "" ? "" : 'style="background-color: '+prestation['couleur']+';"';
             htmlPrestations += '   <a href="javascript:void(0);" data-id="'+prestation['id']+'" data-libelle="'+prestation['libelle']+'" data-prix="'+nvl(prestation['prix'], 0)+'" data-prix-emporter="'+nvl(prestation['prixEmporter'], 0)+'" data-tva="'+nvl(prestation['tva'], 0)+'" data-autorisevae="'+autoriseVae+'" data-cuissonapplicable="'+cuissonApplicable+'" data-cdeCuisine="'+cdeCuisine+'" title="'+prestation['libelle']+'">';
             htmlPrestations += '       <div class="menu-card" '+CSSbgcolor+'>';
             htmlPrestations += '           <div class="name-menu">'+prestation['libelle']+'</div>';
             htmlPrestations += '           <div class="group-menu">';
             htmlPrestations += '               <div class="price-menu">';
             htmlPrestations += '                   '+prestation['prix']+" &euro;";
             htmlPrestations += '               </div>';
             htmlPrestations += '           </div>';
             htmlPrestations += '       </div>';
             htmlPrestations += '   </a>';
         }
         htmlPrestations += '   </div>';
         htmlPrestations += '</div>';
     }
     $("#pills-tabContent").html(htmlPrestations);
     ...

The css of the text :

.menu-card .name-menu {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 110px;
    font-weight: bold;
    color: #727272;
    font-size: 18px;
}
.menu-card .group-menu .price-menu {
    font-size: 30px;
    font-weight: bold;
    color: #4B4A4A;
    padding-left: 5px;
}

The problem is that sometimes when the div background color is dark then the text is not very clear. So how to dynamically make the text to be in contrast with the div’s background-color ?