diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
index d760df22e4d..3ab204b0d10 100644
--- a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -547,7 +547,10 @@ export class DiscreteBarChart
                                 opacity={GRAPHER_AREA_OPACITY_DEFAULT}
                                 style={{ transition: "height 200ms ease" }}
                             />
-                            <Halo id={series.seriesName + "-label"}>
+                            <Halo
+                                id={series.seriesName + "-label"}
+                                background={this.manager.backgroundColor}
+                            >
                                 <text
                                     x={0}
                                     y={0}
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
index 981a4b0a0ea..fa6fefad826 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -20,6 +20,7 @@ import {
     Patterns,
     STATIC_EXPORT_DETAIL_SPACING,
     DEFAULT_GRAPHER_FRAME_PADDING,
+    GRAPHER_BACKGROUND_DEFAULT,
 } from "../core/GrapherConstants"
 import { MapChartManager } from "../mapCharts/MapChartConstants"
 import { ChartManager } from "../chart/ChartManager"
@@ -36,6 +37,7 @@ import {
     FacetStrategy,
     GrapherTabOption,
     RelatedQuestionsConfig,
+    Color,
 } from "@ourworldindata/types"
 import { DataTable, DataTableManager } from "../dataTable/DataTable"
 import {
@@ -66,12 +68,13 @@ export interface CaptionedChartManager
     staticBounds?: Bounds
     staticBoundsWithDetails?: Bounds
 
-    // layout
+    // layout & style
     isSmall?: boolean
     isMedium?: boolean
     framePaddingHorizontal?: number
     framePaddingVertical?: number
     fontSize?: number
+    backgroundColor?: string
 
     // state
     tab?: GrapherTabOption
@@ -80,6 +83,7 @@ export interface CaptionedChartManager
     type: ChartTypeName
     typeExceptWhenLineChartAndSingleTimeThenWillBeBarChart?: ChartTypeName
     showEntitySelectionToggle?: boolean
+    isExportingForSocialMedia?: boolean
 
     // timeline
     hasTimeline?: boolean
@@ -403,7 +407,12 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
         //    #5 Footer
         //    #6 [Related question]
         return (
-            <div className="CaptionedChart">
+            <div
+                className="CaptionedChart"
+                style={{
+                    backgroundColor: this.backgroundColor,
+                }}
+            >
                 {/* #1 Header */}
                 <Header manager={this.manager} maxWidth={this.maxWidth} />
                 <VerticalSpace height={this.verticalPadding} />
@@ -435,6 +444,10 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
         )
     }
 
+    @computed protected get backgroundColor(): Color {
+        return this.manager.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT
+    }
+
     @computed protected get svgProps(): React.SVGProps<SVGSVGElement> {
         return {
             xmlns: "http://www.w3.org/2000/svg",
@@ -443,7 +456,8 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
                 fontFamily:
                     "Lato, 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif",
                 fontSize: this.manager.fontSize ?? BASE_FONT_SIZE,
-                backgroundColor: "white",
+                // needs to be set here or else pngs will have a black background
+                backgroundColor: this.backgroundColor,
                 textRendering: "geometricPrecision",
                 WebkitFontSmoothing: "antialiased",
             },
@@ -571,13 +585,15 @@ export class StaticCaptionedChart extends CaptionedChart {
             >
                 {this.fonts}
                 {this.patterns}
-                <rect
-                    id={makeIdForHumanConsumption("background")}
-                    className="background-fill"
-                    fill="white"
-                    width={width}
-                    height={height}
-                />
+                {!this.manager.isExportingForSocialMedia && (
+                    <rect
+                        id={makeIdForHumanConsumption("background")}
+                        className="background-fill"
+                        fill={this.backgroundColor}
+                        width={width}
+                        height={height}
+                    />
+                )}
                 <StaticHeader
                     manager={manager}
                     maxWidth={maxWidth}
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
index da091b95d03..bdd16eecc06 100644
--- a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
+++ b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
@@ -11,6 +11,7 @@ import {
     ColorSchemeName,
     EntityName,
     DetailsMarker,
+    Color,
 } from "@ourworldindata/types"
 import { TooltipManager } from "../tooltip/TooltipProps"
 import { OwidTable, CoreColumn } from "@ourworldindata/core-table"
@@ -95,7 +96,9 @@ export interface ChartManager {
     isStatic?: boolean
     isSemiNarrow?: boolean
     isStaticAndSmall?: boolean
+    isExportingForSocialMedia?: boolean
     secondaryColorInStaticCharts?: string
+    backgroundColor?: Color
 
     detailsOrderedByReference?: string[]
     detailsMarkerInSvg?: DetailsMarker
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index d0f68bad2b5..87bf9f23f10 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -104,6 +104,7 @@ import {
     DetailDictionary,
     GrapherWindowType,
     MultiDimDataPageProps,
+    Color,
 } from "@ourworldindata/types"
 import {
     BlankOwidTable,
@@ -126,6 +127,8 @@ import {
     GRAPHER_LOADED_EVENT_NAME,
     isContinentsVariableId,
     isPopulationVariableETLPath,
+    GRAPHER_BACKGROUND_BEIGE,
+    GRAPHER_BACKGROUND_DEFAULT,
 } from "../core/GrapherConstants"
 import { defaultGrapherConfig } from "../schema/defaultGrapherConfig"
 import { loadVariableDataAndMetadata } from "./loadVariable"
@@ -851,6 +854,7 @@ export class Grapher
 
     @observable.ref renderToStatic = false
     @observable.ref isExportingToSvgOrPng = false
+    @observable.ref isSocialMediaExport = false
 
     tooltips?: TooltipManager["tooltips"] = observable.map({}, { deep: false })
     @observable isPlaying = false
@@ -2896,10 +2900,24 @@ export class Grapher
         return staticPixelCount < 0.66 * idealPixelCount
     }
 
-    @computed get secondaryColorInStaticCharts(): string {
+    @computed get secondaryColorInStaticCharts(): Color {
         return this.isStaticAndSmall ? GRAPHER_LIGHT_TEXT : GRAPHER_DARK_TEXT
     }
 
+    @computed get isExportingForSocialMedia(): boolean {
+        return (
+            this.isExportingToSvgOrPng &&
+            this.isStaticAndSmall &&
+            this.isSocialMediaExport
+        )
+    }
+
+    @computed get backgroundColor(): Color {
+        return this.isExportingForSocialMedia
+            ? GRAPHER_BACKGROUND_BEIGE
+            : GRAPHER_BACKGROUND_DEFAULT
+    }
+
     // Binds chart properties to global window title and URL. This should only
     // ever be invoked from top-level JavaScript.
     private bindToWindow(): void {
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
index 820811a58b5..106654d0c2c 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -20,6 +20,9 @@ export const DEFAULT_GRAPHER_HEIGHT = 600
 export const DEFAULT_GRAPHER_FRAME_PADDING = 16
 export const STATIC_EXPORT_DETAIL_SPACING = 8
 
+export const GRAPHER_BACKGROUND_DEFAULT = "#ffffff"
+export const GRAPHER_BACKGROUND_BEIGE = "#fffbf5"
+
 export const GRAPHER_DARK_TEXT = "#5b5b5b"
 export const GRAPHER_LIGHT_TEXT = "#858585"
 
diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
index 8c1fe26a5c6..3983634dbc6 100644
--- a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
+++ b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
@@ -263,6 +263,7 @@ export class FacetChart
             startTime,
             endTime,
             missingDataStrategy,
+            backgroundColor,
         } = manager
 
         // Use compact labels, e.g. 50k instead of 50,000.
@@ -316,6 +317,7 @@ export class FacetChart
                 startTime,
                 endTime,
                 missingDataStrategy,
+                backgroundColor,
                 ...series.manager,
                 xAxisConfig: {
                     ...globalXAxisConfig,
diff --git a/packages/@ourworldindata/grapher/src/halo/Halo.tsx b/packages/@ourworldindata/grapher/src/halo/Halo.tsx
index 8c0e4823f12..6986cbb52a6 100644
--- a/packages/@ourworldindata/grapher/src/halo/Halo.tsx
+++ b/packages/@ourworldindata/grapher/src/halo/Halo.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { Color } from "@ourworldindata/types"
 
 const defaultHaloStyle: React.CSSProperties = {
     fill: "#fff",
@@ -12,10 +13,19 @@ const defaultHaloStyle: React.CSSProperties = {
 export function Halo(props: {
     id: React.Key
     children: React.ReactElement
+    background?: Color
     style?: React.CSSProperties
 }): React.ReactElement {
+    const defaultStyle = {
+        ...defaultHaloStyle,
+        fill: props.background ?? defaultHaloStyle.fill,
+        stroke: props.background ?? defaultHaloStyle.stroke,
+    }
     const halo = React.cloneElement(props.children, {
-        style: { ...defaultHaloStyle, ...props.style },
+        style: {
+            ...defaultStyle,
+            ...props.style,
+        },
     })
     return (
         <React.Fragment key={props.id}>
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index 81473996726..6b6e2b64ce4 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -62,6 +62,7 @@ import {
     GRAPHER_AXIS_LINE_WIDTH_THICK,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     BASE_FONT_SIZE,
+    GRAPHER_BACKGROUND_DEFAULT,
 } from "../core/GrapherConstants"
 import { ColorSchemes } from "../color/ColorSchemes"
 import { AxisConfig, AxisManager } from "../axis/AxisConfig"
@@ -101,8 +102,6 @@ import {
     HorizontalNumericColorLegend,
 } from "../horizontalColorLegend/HorizontalColorLegends"
 
-// background
-const BACKGROUND_COLOR = "#fff"
 // line color
 const BLUR_LINE_COLOR = "#eee"
 const DEFAULT_LINE_COLOR = "#000"
@@ -207,7 +206,9 @@ class Lines extends React.Component<LinesProps> {
                                     "outline",
                                     series.seriesName
                                 ),
-                                stroke: BACKGROUND_COLOR,
+                                stroke:
+                                    this.props.backgroundColor ??
+                                    GRAPHER_BACKGROUND_DEFAULT,
                                 strokeWidth:
                                     this.strokeWidth +
                                     this.lineOutlineWidth * 2,
@@ -585,7 +586,10 @@ export class LineChart
                                       )
                                     : series.color
                             }
-                            stroke="#fff"
+                            stroke={
+                                this.manager.backgroundColor ??
+                                GRAPHER_BACKGROUND_DEFAULT
+                            }
                             strokeWidth={0.5}
                         />
                     )
@@ -854,7 +858,9 @@ export class LineChart
         const lineWidth = manager.isStaticAndSmall
             ? GRAPHER_AXIS_LINE_WIDTH_THICK
             : GRAPHER_AXIS_LINE_WIDTH_DEFAULT
-        const dashPattern = manager.isStaticAndSmall ? "7, 7" : undefined
+        const dashPattern = manager.isExportingForSocialMedia
+            ? "7, 7"
+            : undefined
 
         return (
             <DualAxisComponent
@@ -887,6 +893,7 @@ export class LineChart
                         dualAxis={this.dualAxis}
                         comparisonLine={line}
                         baseFontSize={this.fontSize}
+                        backgroundColor={this.manager.backgroundColor}
                     />
                 ))}
                 {manager.showLegend && <LineLegend manager={this} />}
@@ -898,6 +905,7 @@ export class LineChart
                     focusedSeriesNames={this.focusedSeriesNames}
                     lineStrokeWidth={this.lineStrokeWidth}
                     lineOutlineWidth={this.lineOutlineWidth}
+                    backgroundColor={this.manager.backgroundColor}
                     markerRadius={this.markerRadius}
                     isStatic={manager.isStatic}
                 />
@@ -1067,11 +1075,14 @@ export class LineChart
     }
 
     numericBinSize = 6
-    numericBinStroke = BACKGROUND_COLOR
     numericBinStrokeWidth = 1
     legendTextColor = "#555"
     legendTickSize = 1
 
+    @computed get numericBinStroke(): Color {
+        return this.manager.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT
+    }
+
     @computed get numericLegend(): HorizontalNumericColorLegend | undefined {
         return this.hasColorScale && this.manager.showLegend
             ? new HorizontalNumericColorLegend({ manager: this })
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChartConstants.ts b/packages/@ourworldindata/grapher/src/lineCharts/LineChartConstants.ts
index 0adb09fb480..b290a436a23 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChartConstants.ts
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChartConstants.ts
@@ -36,6 +36,7 @@ export interface LinesProps {
     markerRadius?: number
     isStatic?: boolean
     multiColor?: boolean
+    backgroundColor?: string
 }
 
 export interface LineChartManager extends ChartManager {
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
index 21dd4e3822b..7327b68ec6d 100644
--- a/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/DownloadModal.tsx
@@ -39,6 +39,7 @@ export interface DownloadModalManager {
     isOnChartOrMapTab?: boolean
     framePaddingVertical?: number
     showAdminControls?: boolean
+    isSocialMediaExport?: boolean
 }
 
 interface DownloadModalProps {
@@ -63,6 +64,10 @@ export class DownloadModal extends React.Component<DownloadModalProps> {
         return this.manager.staticFormat === GrapherStaticFormat.square
     }
 
+    @computed private get isSocialMediaExport(): boolean {
+        return this.manager.isSocialMediaExport ?? false
+    }
+
     @computed private get shouldIncludeDetails(): boolean {
         return !!this.manager.shouldIncludeDetailsInStaticExport
     }
@@ -204,6 +209,10 @@ export class DownloadModal extends React.Component<DownloadModalProps> {
             : GrapherStaticFormat.square
     }
 
+    @action.bound private toggleExportForUseInSocialMedia(): void {
+        this.manager.isSocialMediaExport = !this.isSocialMediaExport
+    }
+
     @action.bound private toggleIncludeDetails(): void {
         this.manager.shouldIncludeDetailsInStaticExport =
             !this.manager.shouldIncludeDetailsInStaticExport
@@ -295,11 +304,37 @@ export class DownloadModal extends React.Component<DownloadModalProps> {
                                     <Checkbox
                                         checked={this.isExportingSquare}
                                         label="Square format"
-                                        onChange={(): void => {
+                                        onChange={action((): void => {
                                             this.reset()
                                             this.toggleExportFormat()
+
+                                            if (!this.isExportingSquare) {
+                                                this.manager.isSocialMediaExport =
+                                                    false
+                                            }
+
                                             this.export()
-                                        }}
+                                        })}
+                                    />
+                                )}
+                                {this.manager.showAdminControls && (
+                                    <Checkbox
+                                        checked={this.isSocialMediaExport}
+                                        label="For use in social media (internal)"
+                                        onChange={action((): void => {
+                                            this.reset()
+                                            this.toggleExportForUseInSocialMedia()
+
+                                            // set reasonable defaults for social media exports
+                                            if (this.isSocialMediaExport) {
+                                                this.manager.staticFormat =
+                                                    GrapherStaticFormat.square
+                                                this.manager.shouldIncludeDetailsInStaticExport =
+                                                    false
+                                            }
+
+                                            this.export()
+                                        })}
                                     />
                                 )}
                             </div>
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
index 97ece7dd9da..19fadad9d82 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx
@@ -11,7 +11,7 @@ import { observer } from "mobx-react"
 import { DualAxis } from "../axis/Axis"
 import { generateComparisonLinePoints } from "./ComparisonLineGenerator"
 import { Halo } from "../halo/Halo"
-import { ComparisonLineConfig } from "@ourworldindata/types"
+import { Color, ComparisonLineConfig } from "@ourworldindata/types"
 import { GRAPHER_FONT_SCALE_10_5 } from "../core/GrapherConstants"
 
 @observer
@@ -19,6 +19,7 @@ export class ComparisonLine extends React.Component<{
     dualAxis: DualAxis
     comparisonLine: ComparisonLineConfig
     baseFontSize: number
+    backgroundColor?: Color
 }> {
     private renderUid = guid()
 
@@ -122,7 +123,10 @@ export class ComparisonLine extends React.Component<{
                         }}
                         clipPath={`url(#axisBounds-${renderUid})`}
                     >
-                        <Halo id={`path-${renderUid}`}>
+                        <Halo
+                            id={`path-${renderUid}`}
+                            background={this.props.backgroundColor}
+                        >
                             <textPath
                                 baselineShift="-0.2rem"
                                 href={`#path-${renderUid}`}
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
index 7830ca885ff..50114d82f63 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -678,6 +678,7 @@ export class ScatterPlotChart
                 onMouseLeave={this.onScatterMouseLeave}
                 onClick={this.onScatterClick}
                 quadtree={this.quadtree}
+                backgroundColor={this.manager.backgroundColor}
             />
         )
     }
@@ -829,6 +830,7 @@ export class ScatterPlotChart
                             dualAxis={dualAxis}
                             comparisonLine={line}
                             baseFontSize={this.fontSize}
+                            backgroundColor={this.manager.backgroundColor}
                         />
                     ))}
                 {this.points}
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChartConstants.ts b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChartConstants.ts
index 6662ab8e613..0c88c3eb8cc 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChartConstants.ts
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChartConstants.ts
@@ -136,6 +136,7 @@ export interface ScatterPointsWithLabelsProps {
     disableIntroAnimation?: boolean
     hideScatterLabels?: boolean
     quadtree: Quadtree<ScatterPointQuadtreeNode>
+    backgroundColor?: Color
 }
 
 export const SCATTER_QUADTREE_SAMPLING_DISTANCE = 10
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
index 01ce3169bd3..53eb8859604 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
@@ -425,6 +425,7 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                             <Halo
                                 key={series.displayKey + "-endLabel"}
                                 id={series.displayKey + "-endLabel"}
+                                background={this.props.backgroundColor}
                             >
                                 <text
                                     id={makeIdForHumanConsumption(
@@ -560,6 +561,7 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                     <Halo
                         key={`${series.displayKey}-label-${index}`}
                         id={`${series.displayKey}-label-${index}`}
+                        background={this.props.backgroundColor}
                     >
                         <text
                             id={makeIdForHumanConsumption(
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
index 7ad0ccf44d4..183b78e1c46 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
@@ -3,6 +3,7 @@ import { computed } from "mobx"
 import { scaleLinear, ScaleLinear } from "d3-scale"
 import { TextWrap } from "@ourworldindata/components"
 import {
+    Color,
     first,
     last,
     makeIdForHumanConsumption,
@@ -10,6 +11,7 @@ import {
 } from "@ourworldindata/utils"
 import {
     BASE_FONT_SIZE,
+    GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_DARK_TEXT,
     GRAPHER_FONT_SCALE_10,
     GRAPHER_FONT_SCALE_11,
@@ -32,6 +34,7 @@ export interface ScatterSizeLegendManager {
     sizeScale: ScaleLinear<number, number>
     fontSize?: number
     tooltipSeries?: ScatterSeries
+    backgroundColor?: Color
 }
 
 const LEGEND_PADDING = 3
@@ -190,6 +193,7 @@ export class ScatterSizeLegend {
                             }
                             labelFontSize={this.fontSizeFromRadius(radius)}
                             labelFill={highlight ? "#bbb" : LEGEND_VALUE_COLOR}
+                            backgroundColor={this.manager.backgroundColor}
                         />
                     )
                 })}
@@ -214,6 +218,7 @@ export class ScatterSizeLegend {
                         labelFill={darkenColorForText(highlight.color)}
                         labelFontWeight={700}
                         outsideLabel={true}
+                        backgroundColor={this.manager.backgroundColor}
                     />
                 )}
             </React.Fragment>
@@ -271,6 +276,7 @@ const LegendItem = ({
     labelFontSize,
     labelFontWeight = 400,
     outsideLabel = false,
+    backgroundColor = GRAPHER_BACKGROUND_DEFAULT,
 }: {
     label: string
     cx: number
@@ -284,6 +290,7 @@ const LegendItem = ({
     labelFontSize: number
     labelFontWeight?: number
     outsideLabel?: boolean
+    backgroundColor?: Color
 }): React.ReactElement => {
     const style: React.CSSProperties = {
         fontSize: labelFontSize,
@@ -301,7 +308,11 @@ const LegendItem = ({
                 strokeWidth={circleStrokeWidth}
                 opacity={circleOpacity}
             />
-            <Halo id={label} style={{ ...style, strokeWidth: 3.5 }}>
+            <Halo
+                id={label}
+                background={backgroundColor}
+                style={{ ...style, strokeWidth: 3.5 }}
+            >
                 <text
                     x={cx}
                     y={cy - circleRadius}
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
index 2d748c447ed..23fc501b27d 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -666,7 +666,10 @@ export class StackedDiscreteBarChart
                         />
                     ))}
                     {this.showTotalValueLabel && (
-                        <Halo id={entityName + "-value-label"}>
+                        <Halo
+                            id={entityName + "-value-label"}
+                            background={this.manager.backgroundColor}
+                        >
                             <text
                                 id={makeIdForHumanConsumption(
                                     "total",