diff --git a/src/lib/get-topper-settings.js b/src/lib/get-topper-settings.js
index 1a861f4..4ec1d08 100644
--- a/src/lib/get-topper-settings.js
+++ b/src/lib/get-topper-settings.js
@@ -106,7 +106,13 @@ const useEditoriallySelectedTopper = (content) => {
 	if (content.topper.layout === 'full-bleed-offset') {
 		backgroundColour = 'wheat';
 	} else if (content.topper.layout === 'deep-landscape') {
-		if (!hasDarkBackground(content.topper.backgroundColour)) {
+		// If the backgroundBox is present, use its color to determine a background colour
+		// The background color won't be visible due to the overlapping image, however, it's needed to
+		// determine the text color
+		if (content.topper.backgroundBox) {
+			backgroundColour =
+				content.topper.backgroundBox === 'light' ? 'white' : 'black';
+		} else if (!hasDarkBackground(content.topper.backgroundColour)) {
 			backgroundColour = 'white';
 		}
 	} else if (
diff --git a/test/lib/get-topper-settings.test.js b/test/lib/get-topper-settings.test.js
index fc969d6..f9ccecb 100644
--- a/test/lib/get-topper-settings.test.js
+++ b/test/lib/get-topper-settings.test.js
@@ -121,6 +121,29 @@ describe('Get topper settings', () => {
 
 			expect(topper.backgroundColour).to.equal('white');
 		});
+
+		describe('When a background Box is present', () => {
+			it('sets the `backgroundColour` to `white` if layout is deep landscape and background Box is light', () => {
+				const topper = getTopperSettings({
+					topper: {
+						layout: 'deep-landscape',
+						backgroundBox: 'light'
+					}
+				});
+
+				expect(topper.backgroundColour).to.equal('white');
+			});
+			it('sets the `backgroundColour` to `black` if layout is deep landscape and background Box is dark', () => {
+				const topper = getTopperSettings({
+					topper: {
+						layout: 'deep-landscape',
+						backgroundBox: 'dark'
+					}
+				});
+
+				expect(topper.backgroundColour).to.equal('black');
+			});
+		});
 	});
 
 	describe('Podcast', () => {