From c81d67c05defae008e766f4520f4ced86be4f433 Mon Sep 17 00:00:00 2001
From: "Chavda Sachin (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Thu, 11 Jun 2026 16:23:57 +0000
Subject: [PATCH 1/2] Fix camera/receipt FAB icon contrast to pass WCAG 1.4.11

Co-authored-by: Chavda Sachin <ChavdaSachin@users.noreply.github.com>
---
 .../FloatingCameraButton/BaseFloatingCameraButton.tsx         | 4 ++--
 src/components/FloatingReceiptButton.tsx                      | 4 ++--
 src/styles/theme/themes/dark.ts                               | 1 +
 src/styles/theme/themes/light.ts                              | 1 +
 src/styles/theme/types.ts                                     | 1 +
 5 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/FloatingCameraButton/BaseFloatingCameraButton.tsx b/src/components/FloatingCameraButton/BaseFloatingCameraButton.tsx
index 3ea6acddf01a..a6ed26e00535 100644
--- a/src/components/FloatingCameraButton/BaseFloatingCameraButton.tsx
+++ b/src/components/FloatingCameraButton/BaseFloatingCameraButton.tsx
@@ -32,7 +32,7 @@ type BaseFloatingCameraButtonProps = {
 };
 
 function BaseFloatingCameraButton({icon}: BaseFloatingCameraButtonProps) {
-    const {textLight} = useTheme();
+    const {floatingActionButtonIcon} = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {accountID} = useCurrentUserPersonalDetails();
@@ -108,7 +108,7 @@ function BaseFloatingCameraButton({icon}: BaseFloatingCameraButtonProps) {
                 testID="floating-camera-button-container"
             >
                 <Icon
-                    fill={textLight}
+                    fill={floatingActionButtonIcon}
                     src={icon}
                     width={variables.iconSizeNormal}
                     height={variables.iconSizeNormal}
diff --git a/src/components/FloatingReceiptButton.tsx b/src/components/FloatingReceiptButton.tsx
index 48ad56cb1067..017c6e5d3503 100644
--- a/src/components/FloatingReceiptButton.tsx
+++ b/src/components/FloatingReceiptButton.tsx
@@ -25,7 +25,7 @@ type FloatingReceiptButtonProps = WithSentryLabel & {
 };
 
 function FloatingReceiptButton({onPress, accessibilityLabel, role, sentryLabel}: FloatingReceiptButtonProps) {
-    const {successHover, textLight} = useTheme();
+    const {successHover, floatingActionButtonIcon} = useTheme();
     const styles = useThemeStyles();
     const borderRadius = styles.floatingActionButton.borderRadius;
     const fabPressable = useRef<HTMLDivElement | ViewType | Text | null>(null);
@@ -63,7 +63,7 @@ function FloatingReceiptButton({onPress, accessibilityLabel, role, sentryLabel}:
                         testID="floating-receipt-button-container"
                     >
                         <Icon
-                            fill={textLight}
+                            fill={floatingActionButtonIcon}
                             src={icons.ReceiptPlus}
                             width={variables.iconSizeSmall}
                             height={variables.iconSizeSmall}
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 2ba9fbb6933c..4049062a03e8 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -43,6 +43,7 @@ const darkTheme = {
     signInPage: colors.green800,
     darkSupportingText: colors.productDark800,
     receiptPlaceholderPlus: colors.productLight100,
+    floatingActionButtonIcon: colors.productLight900,
 
     // Additional keys
     overlay: colors.productDark400,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 8bf89843ae56..a092c3b1da46 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -43,6 +43,7 @@ const lightTheme = {
     signInPage: colors.green800,
     darkSupportingText: colors.productDark800,
     receiptPlaceholderPlus: colors.productLight100,
+    floatingActionButtonIcon: colors.productLight900,
 
     // Additional keys
     overlay: colors.productLight400,
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index 87d2a228f025..130fb079860c 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -49,6 +49,7 @@ type ThemeColors = {
     signInPage: Color;
     darkSupportingText: Color;
     receiptPlaceholderPlus: Color;
+    floatingActionButtonIcon: Color;
 
     // Additional keys
     overlay: Color;

From 51212e02b16b43253de7a2963a30e4b7f604355f Mon Sep 17 00:00:00 2001
From: "Chavda Sachin (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Thu, 11 Jun 2026 17:13:00 +0000
Subject: [PATCH 2/2] Preserve regular theme FAB icon colors; apply contrast
 override only in high-contrast themes

Co-authored-by: Chavda Sachin <ChavdaSachin@users.noreply.github.com>
---
 src/styles/theme/themes/dark-contrast.ts  | 1 +
 src/styles/theme/themes/dark.ts           | 2 +-
 src/styles/theme/themes/light-contrast.ts | 1 +
 src/styles/theme/themes/light.ts          | 2 +-
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/styles/theme/themes/dark-contrast.ts b/src/styles/theme/themes/dark-contrast.ts
index b5e38e7d4e33..f2c70208e6ba 100644
--- a/src/styles/theme/themes/dark-contrast.ts
+++ b/src/styles/theme/themes/dark-contrast.ts
@@ -18,6 +18,7 @@ const darkContrastTheme = {
     ourMentionBG: colors.green100,
     ourMentionText: colors.green700,
     receiptPlaceholderPlus: colors.green800,
+    floatingActionButtonIcon: colors.productLight900,
 } satisfies ThemeColors;
 
 export default darkContrastTheme;
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 4049062a03e8..71febd2190ea 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -43,7 +43,7 @@ const darkTheme = {
     signInPage: colors.green800,
     darkSupportingText: colors.productDark800,
     receiptPlaceholderPlus: colors.productLight100,
-    floatingActionButtonIcon: colors.productLight900,
+    floatingActionButtonIcon: colors.productDark900,
 
     // Additional keys
     overlay: colors.productDark400,
diff --git a/src/styles/theme/themes/light-contrast.ts b/src/styles/theme/themes/light-contrast.ts
index d96d3ef2ee57..4050c341db3b 100644
--- a/src/styles/theme/themes/light-contrast.ts
+++ b/src/styles/theme/themes/light-contrast.ts
@@ -15,6 +15,7 @@ const lightContrastTheme = {
     textLight: colors.productLight900,
     iconColorfulBackground: colors.yellow800,
     receiptPlaceholderPlus: colors.green800,
+    floatingActionButtonIcon: colors.productLight900,
 } satisfies ThemeColors;
 
 export default lightContrastTheme;
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index a092c3b1da46..7e48500be531 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -43,7 +43,7 @@ const lightTheme = {
     signInPage: colors.green800,
     darkSupportingText: colors.productDark800,
     receiptPlaceholderPlus: colors.productLight100,
-    floatingActionButtonIcon: colors.productLight900,
+    floatingActionButtonIcon: colors.white,
 
     // Additional keys
     overlay: colors.productLight400,