diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
index a1fd51e182..daba7801d5 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
@@ -391,9 +391,24 @@ const FileInfoSidebar = styled(
     (props: Pick<DialogProps, "open" | "onClose" | "children">) => (
         <SidebarDrawer {...props} anchor="right" />
     ),
-)({
+)(({ theme }) => ({
     zIndex: fileInfoDrawerZ,
-});
+    // [Note: Lighter backdrop for dialog contents on image gallery]
+    //
+    // The default backdrop color we use for the drawer in light mode is too
+    // "white" when used in the image gallery because unlike the rest of the app
+    // the gallery retains a black background irrespective of the mode. So use a
+    // lighter scrim when overlaying content directly atop the image gallery.
+    //
+    // We don't need to add this special casing for nested overlays (e.g.
+    // dialogs initiated from the file info drawer itself) since now there is
+    // enough "white" on the screen to warrant the stronger (default) backdrop.
+    ...theme.applyStyles("light", {
+        ".MuiBackdrop-root": {
+            backgroundColor: theme.vars.palette.backdrop.faint,
+        },
+    }),
+}));
 
 interface InfoItemProps {
     /**