diff --git a/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json b/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json
new file mode 100644
index 0000000000000..e723bc0d0be7e
--- /dev/null
+++ b/change/@fluentui-react-charting-d3660b0d-d2af-403a-bc19-a05978feeee9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated opacity value for cards title",
+  "packageName": "@fluentui/react-charting",
+  "email": "132879294+v-baambati@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index 2e5c2a9aadd46..84f7bfb3652d6 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -480,7 +480,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
                       font-size: 12px;
                       font-weight: 400;
                       line-height: 16px;
-                      opacity: 0.8;
+                      opacity: 0.85;
                     }
                 data-is-focusable={false}
                 role="text"
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts
index 731d3818f5800..b2f76f6fb2d47 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.styles.ts
@@ -128,7 +128,7 @@ export const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyl
       {
         ...fonts.small,
         lineHeight: '16px',
-        opacity: '0.8',
+        opacity: '0.85',
         color: theme.semanticColors.bodySubtext,
       },
     ],
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index e01fd5ad1500e..95fc8516e288c 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -230,7 +230,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
                     font-size: 12px;
                     font-weight: 400;
                     line-height: 16px;
-                    opacity: 0.8;
+                    opacity: 0.85;
                   }
             >
                
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
index 333908a963314..c59d9a12bc160 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
@@ -203,7 +203,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
                       font-size: 12px;
                       font-weight: 400;
                       line-height: 16px;
-                      opacity: 0.8;
+                      opacity: 0.85;
                     }
               >
                  
diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts
index 06ff3cea68d8a..f59d7d96a7aad 100644
--- a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts
+++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts
@@ -76,7 +76,7 @@ export const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {
       {
         ...theme.fonts.small,
         lineHeight: '16px',
-        opacity: '0.8',
+        opacity: '0.85',
         color: theme.semanticColors.bodySubtext,
       },
     ],
diff --git a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
index f893f8fbca31a..3a03ef8c802b4 100644
--- a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
+++ b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
@@ -606,7 +606,7 @@ exports[`GaugeChart interaction and accessibility tests should show a callout wh
                       font-size: 12px;
                       font-weight: 400;
                       line-height: 16px;
-                      opacity: 0.8;
+                      opacity: 0.85;
                     }
                 data-is-focusable="false"
                 role="text"
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
index c8595a5187b91..4e188595fd0c1 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
@@ -744,7 +744,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                       font-size: 12px;
                       font-weight: 400;
                       line-height: 16px;
-                      opacity: 0.8;
+                      opacity: 0.85;
                     }
               >
                  
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
index 54effa57a7df0..c7c58da49605d 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
@@ -4420,7 +4420,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                       font-size: 12px;
                       font-weight: 400;
                       line-height: 16px;
-                      opacity: 0.8;
+                      opacity: 0.85;
                     }
               >
                  
diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index ff53fbc0a1c01..4d04d5041cd17 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -438,7 +438,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
                     font-size: 12px;
                     font-weight: 400;
                     line-height: 16px;
-                    opacity: 0.8;
+                    opacity: 0.85;
                   }
             >
                
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index 617a28e654a1a..4218ec682ec85 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
@@ -603,7 +603,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                     font-size: 12px;
                     font-weight: 400;
                     line-height: 16px;
-                    opacity: 0.8;
+                    opacity: 0.85;
                   }
             >
                
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
index ccd7a1a1f6ddc..68417c103c1ba 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
@@ -304,7 +304,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
                           font-size: 12px;
                           font-weight: 400;
                           line-height: 16px;
-                          opacity: 0.8;
+                          opacity: 0.85;
                         }
                   >
                      
diff --git a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts
index b503c7baa5422..6d119b163869d 100644
--- a/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts
+++ b/packages/react-charting/src/utilities/ChartHoverCard/ChartHoverCard.styles.ts
@@ -22,7 +22,7 @@ export const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChar
       theme.fonts.small,
       {
         lineHeight: '16px',
-        opacity: '0.8',
+        opacity: '0.85',
         color: theme.semanticColors.bodySubtext,
       },
     ],