diff --git a/addons/mail/static/src/rtc/call.scss b/addons/mail/static/src/rtc/call.scss
index 05a641b17fa..7644326ee66 100644
--- a/addons/mail/static/src/rtc/call.scss
+++ b/addons/mail/static/src/rtc/call.scss
@@ -13,6 +13,10 @@
     }
 }
 
+.o-mail-Call-main {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
 .o-mail-Call-sidebar {
     width: 120px;
     min-width: 120px;
diff --git a/addons/mail/static/src/rtc/call.xml b/addons/mail/static/src/rtc/call.xml
index 68043ed9c0b..140f75362ff 100644
--- a/addons/mail/static/src/rtc/call.xml
+++ b/addons/mail/static/src/rtc/call.xml
@@ -3,7 +3,7 @@
 
     <t t-name="mail.Call" owl="1">
         <div class="o-mail-Call user-select-none d-flex" t-att-class="{'o-fullscreen fixed-top vw-100 vh-100': state.isFullscreen, 'o-minimized': minimized, 'position-relative': !state.isFullscreen }">
-            <div class="d-flex flex-grow-1 flex-column align-items-center justify-content-center position-relative overflow-auto bg-black-50" t-on-mouseleave="onMouseleaveMain">
+            <div class="o-mail-Call-main d-flex flex-grow-1 flex-column align-items-center justify-content-center position-relative overflow-auto" t-on-mouseleave="onMouseleaveMain">
                 <div
                     class="d-flex align-items-center overflow-hidden h-100 w-100 flex-wrap justify-content-center"
                     t-attf-style="--height:{{state.tileHeight}}px; --width:{{state.tileWidth}}px;"
diff --git a/addons/mail/static/src/rtc/call_participant_card.scss b/addons/mail/static/src/rtc/call_participant_card.scss
index b966c24ba7d..063b594df0e 100644
--- a/addons/mail/static/src/rtc/call_participant_card.scss
+++ b/addons/mail/static/src/rtc/call_participant_card.scss
@@ -3,6 +3,7 @@
 // ------------------------------------------------------------------
 
 .o-mail-CallParticipantCard {
+    color: white;
     aspect-ratio: 16/9;
 }
 
@@ -34,11 +35,16 @@
     85% { border: solid $gray-700 }
 }
 
+.o-mail-CallParticipantCard-iconBlackBg {
+    background-color: rgba(0, 0, 0, 0.75);
+}
+
 .o-mail-CallParticipantCard-overlay {
     margin: Min(5%, map-get($spacers, 2));
 }
 
 .o-mail-CallParticipantCard-overlayBottom {
+    background-color: rgba(0, 0, 0, 0.75);
     max-width: 50%;
 }
 
diff --git a/addons/mail/static/src/rtc/call_participant_card.xml b/addons/mail/static/src/rtc/call_participant_card.xml
index 6399b6806be..6692d739eab 100644
--- a/addons/mail/static/src/rtc/call_participant_card.xml
+++ b/addons/mail/static/src/rtc/call_participant_card.xml
@@ -30,7 +30,7 @@
             <t t-if="rtcSession">
                 <!-- overlay -->
                 <span class="o-mail-CallParticipantCard-overlay o-mail-CallParticipantCard-overlayBottom z-index-1 position-absolute bottom-0 start-0 d-flex overflow-hidden">
-                    <span t-if="!props.minimized" class="p-1 rounded-1 bg-black-75 text-truncate" t-esc="name"/>
+                    <span t-if="!props.minimized" class="p-1 rounded-1 text-truncate" t-esc="name"/>
                     <small t-if="rtcSession.isScreenSharingOn and props.minimized and !isOfActiveCall" class="user-select-none o-minimized rounded-pill text-bg-danger d-flex align-items-center fw-bolder" title="live" aria-label="live">
                         LIVE
                     </small>
@@ -39,17 +39,17 @@
                     <span t-if="rtcSession.raisingHand" class="d-flex flex-column justify-content-center me-1 rounded-circle bg-500" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="raising hand" aria-label="raising hand">
                         <i class="fa fa-hand-paper-o"/>
                     </span>
-                    <span t-if="rtcSession.isSelfMuted and !rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="muted" aria-label="muted">
+                    <span t-if="rtcSession.isSelfMuted and !rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle o-mail-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="muted" aria-label="muted">
                         <i class="fa fa-microphone-slash"/>
                     </span>
-                    <span t-if="rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="deaf" aria-label="deaf">
+                    <span t-if="rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle o-mail-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="deaf" aria-label="deaf">
                         <i class="fa fa-deaf"/>
                     </span>
                     <span t-if="hasMediaError" class="o-mail-CallParticipantCard-overlay-replayButton d-flex flex-column justify-content-center me-1 p-2 rounded-circle" title="media player Error" t-on-click.stop="onClickReplay">
                         <i t-if="rootHover.isHover" class="fa fa-repeat text-danger"/>
                         <i t-else="" class="fa fa-exclamation-triangle text-danger"/>
                     </span>
-                    <span t-if="showConnectionState" class="d-flex flex-column justify-content-center me-1 p-2 rounded-circle bg-900" t-att-title="rtcSession.connectionState">
+                    <span t-if="showConnectionState" class="d-flex flex-column justify-content-center me-1 p-2 rounded-circle o-mail-CallParticipantCard-iconBlackBg" t-att-title="rtcSession.connectionState">
                         <i class="fa fa-exclamation-triangle text-warning"/>
                     </span>
                     <span t-if="rtcSession.isScreenSharingOn and !props.minimized and !isOfActiveCall" class="user-select-none rounded-pill text-bg-danger d-flex align-items-center me-1 fw-bolder" title="live" aria-label="live">