From a67fc637b6eeacd7a04e8cc9373945c9acea9334 Mon Sep 17 00:00:00 2001
From: krkshitij <110246001+krkshitij@users.noreply.github.com>
Date: Thu, 8 Sep 2022 20:59:38 +0530
Subject: [PATCH] Fix greyed out legend key contrast ratio (#24714)

* fix greyed out legend key contrast ratio

* add change file
---
 ...act-charting-d686895a-39e2-4755-a198-862dec13351f.json | 7 +++++++
 .../src/components/Legends/Legends.styles.ts              | 2 +-
 .../Legends/__snapshots__/Legends.test.tsx.snap           | 8 ++++----
 3 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 change/@fluentui-react-charting-d686895a-39e2-4755-a198-862dec13351f.json

diff --git a/change/@fluentui-react-charting-d686895a-39e2-4755-a198-862dec13351f.json b/change/@fluentui-react-charting-d686895a-39e2-4755-a198-862dec13351f.json
new file mode 100644
index 0000000000000..b3bb2aca1a487
--- /dev/null
+++ b/change/@fluentui-react-charting-d686895a-39e2-4755-a198-862dec13351f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix greyed out legend key contrast ratio",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/Legends/Legends.styles.ts b/packages/react-charting/src/components/Legends/Legends.styles.ts
index 0dd4bc7f57424..dfcd51a5d9243 100644
--- a/packages/react-charting/src/components/Legends/Legends.styles.ts
+++ b/packages/react-charting/src/components/Legends/Legends.styles.ts
@@ -81,7 +81,7 @@ export const getStyles = (props: ILegendStyleProps): ILegendsStyles => {
       ...fonts.small,
       lineHeight: '16px',
       color: theme?.semanticColors.bodyText,
-      opacity: props.colorOnSelectedState === palette.white ? '0.6' : '',
+      opacity: props.colorOnSelectedState === palette.white ? '0.67' : '',
     },
     hoverChange: {
       width: '12px',
diff --git a/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap b/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap
index 0622491c7cf53..d9416e1d01197 100644
--- a/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap
+++ b/packages/react-charting/src/components/Legends/__snapshots__/Legends.test.tsx.snap
@@ -1578,7 +1578,7 @@ exports[`Legends snapShot testing renders Legends correctly 1`] = `
                         font-size: 12px;
                         font-weight: 400;
                         line-height: 16px;
-                        opacity: 0.6;
+                        opacity: 0.67;
                       }
                 >
                   Legend 17
@@ -3171,7 +3171,7 @@ exports[`Legends snapShot testing renders allowFocusOnLegends correctly 1`] = `
                         font-size: 12px;
                         font-weight: 400;
                         line-height: 16px;
-                        opacity: 0.6;
+                        opacity: 0.67;
                       }
                 >
                   Legend 17
@@ -4764,7 +4764,7 @@ exports[`Legends snapShot testing renders canSelectMultipleLegends correctly 1`]
                         font-size: 12px;
                         font-weight: 400;
                         line-height: 16px;
-                        opacity: 0.6;
+                        opacity: 0.67;
                       }
                 >
                   Legend 17
@@ -6357,7 +6357,7 @@ exports[`Legends snapShot testing renders styles correctly 1`] = `
                         font-size: 12px;
                         font-weight: 400;
                         line-height: 16px;
-                        opacity: 0.6;
+                        opacity: 0.67;
                       }
                 >
                   Legend 17