diff --git a/documentation/storybook.md b/documentation/storybook.md
index 6e3b9804f3..774e42c975 100644
--- a/documentation/storybook.md
+++ b/documentation/storybook.md
@@ -31,10 +31,20 @@ A guideline on how to use the prop may be added, as well as a description of its
 Prevent mentioning the component’s name in a prop description – that should be obvious.
 Prop types that aren’t exported don’t require their properties to be described.
 
+### Args
+
+Add [`args`](https://storybook.js.org/docs/react/writing-stories/args) to the Story to set initial values for props.
+Follow these guidelines:
+
+1. For Boolean props, set their default value to `false`,
+   unless this has side effects e.g. rendering a class name.
+   In that case, don’t specify a value.
+   Storybook will then display a button ‘Set boolean’ that show a switch.
+
 ### Arg Types
 
 Add [`argTypes`](https://storybook.js.org/docs/api/arg-types) to the Story to document native HTML attributes or override the generated controls.
-Be sure to follow these guidelines when you do:
+Follow these guidelines:
 
 1. Add a `description` field instead of a JSDoc comment for native HTML attributes.
    Use terse sentences that end with a full stop.
diff --git a/packages/css/src/components/icon-button/icon-button.scss b/packages/css/src/components/icon-button/icon-button.scss
index 7a7de250b4..86b484dab7 100644
--- a/packages/css/src/components/icon-button/icon-button.scss
+++ b/packages/css/src/components/icon-button/icon-button.scss
@@ -30,31 +30,31 @@
   @include reset;
 }
 
-.ams-icon-button--on-background-light {
-  color: var(--ams-icon-button-on-background-light-color);
+.ams-icon-button--contrast-color {
+  color: var(--ams-icon-button-contrast-color-color);
 
   &:hover {
-    background-color: var(--ams-icon-button-on-background-light-hover-background-color);
-    color: var(--ams-icon-button-on-background-light-hover-color);
+    background-color: var(--ams-icon-button-contrast-color-hover-background-color);
+    color: var(--ams-icon-button-contrast-color-hover-color);
   }
 
   &:disabled {
     background-color: transparent;
-    color: var(--ams-icon-button-on-background-light-disabled-color);
+    color: var(--ams-icon-button-contrast-color-disabled-color);
   }
 }
 
-.ams-icon-button--on-background-dark {
-  background-color: var(--ams-icon-button-on-background-dark-background-color);
-  color: var(--ams-icon-button-on-background-dark-color);
+.ams-icon-button--inverse-color {
+  background-color: var(--ams-icon-button-inverse-color-background-color);
+  color: var(--ams-icon-button-inverse-color-color);
 
   &:hover {
-    background-color: var(--ams-icon-button-on-background-dark-hover-background-color);
-    color: var(--ams-icon-button-on-background-dark-hover-color);
+    background-color: var(--ams-icon-button-inverse-color-hover-background-color);
+    color: var(--ams-icon-button-inverse-color-hover-color);
   }
 
   &:disabled {
-    background-color: var(--ams-icon-button-on-background-dark-disabled-background-color);
-    color: var(--ams-icon-button-on-background-dark-disabled-color);
+    background-color: var(--ams-icon-button-inverse-color-disabled-background-color);
+    color: var(--ams-icon-button-inverse-color-disabled-color);
   }
 }
diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss
index 8df908b4fe..fd03d56739 100644
--- a/packages/css/src/components/link-list/link-list.scss
+++ b/packages/css/src/components/link-list/link-list.scss
@@ -53,18 +53,18 @@
   @include hyphenation;
 }
 
-.ams-link-list__link--on-background-dark {
-  color: var(--ams-link-list-link-on-background-dark-color);
+.ams-link-list__link--contrast-color {
+  color: var(--ams-link-list-link-contrast-color-color);
 
   &:hover {
-    color: var(--ams-link-list-link-on-background-dark-hover-color);
+    color: var(--ams-link-list-link-contrast-color-hover-color);
   }
 }
 
-.ams-link-list__link--on-background-light {
-  color: var(--ams-link-list-link-on-background-light-color);
+.ams-link-list__link--inverse-color {
+  color: var(--ams-link-list-link-inverse-color-color);
 
   &:hover {
-    color: var(--ams-link-list-link-on-background-light-hover-color);
+    color: var(--ams-link-list-link-inverse-color-hover-color);
   }
 }
diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss
index f959cde9cb..5a24f51e8b 100644
--- a/packages/css/src/components/link/link.scss
+++ b/packages/css/src/components/link/link.scss
@@ -50,26 +50,26 @@
   }
 }
 
-.ams-link--on-background-dark {
-  color: var(--ams-link-on-background-dark-color);
+.ams-link--contrast-color {
+  color: var(--ams-link-contrast-color-color);
 
   &:hover {
-    color: var(--ams-link-on-background-dark-hover-color);
+    color: var(--ams-link-contrast-color-hover-color);
   }
 
   &:visited {
-    color: var(--ams-link-on-background-dark-visited-color);
+    color: var(--ams-link-contrast-color-visited-color);
   }
 }
 
-.ams-link--on-background-light {
-  color: var(--ams-link-on-background-light-color);
+.ams-link--inverse-color {
+  color: var(--ams-link-inverse-color-color);
 
   &:hover {
-    color: var(--ams-link-on-background-light-hover-color);
+    color: var(--ams-link-inverse-color-hover-color);
   }
 
   &:visited {
-    color: var(--ams-link-on-background-light-visited-color);
+    color: var(--ams-link-inverse-color-visited-color);
   }
 }
diff --git a/packages/react/src/IconButton/IconButton.test.tsx b/packages/react/src/IconButton/IconButton.test.tsx
index 2e8be603a4..3d0c53ef93 100644
--- a/packages/react/src/IconButton/IconButton.test.tsx
+++ b/packages/react/src/IconButton/IconButton.test.tsx
@@ -37,20 +37,20 @@ describe('Icon button', () => {
     expect(component).toBeInTheDocument()
   })
 
-  it('renders the right on background light class', () => {
-    render(<IconButton label="Test" onBackground="light" />)
+  it('renders the class name for contrast color', () => {
+    render(<IconButton label="Test" contrastColor />)
 
     const component = screen.getByRole('button')
 
-    expect(component).toHaveClass('ams-icon-button--on-background-light')
+    expect(component).toHaveClass('ams-icon-button--contrast-color')
   })
 
-  it('renders the right on background dark class', () => {
-    render(<IconButton label="Test" onBackground="dark" />)
+  it('renders the class name for inverse color', () => {
+    render(<IconButton label="Test" inverseColor />)
 
     const component = screen.getByRole('button')
 
-    expect(component).toHaveClass('ams-icon-button--on-background-dark')
+    expect(component).toHaveClass('ams-icon-button--inverse-color')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/IconButton/IconButton.tsx b/packages/react/src/IconButton/IconButton.tsx
index 0a6045ccff..a5b12d3ed6 100644
--- a/packages/react/src/IconButton/IconButton.tsx
+++ b/packages/react/src/IconButton/IconButton.tsx
@@ -12,8 +12,10 @@ import { Icon } from '../Icon'
 export type IconButtonProps = {
   /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
   label: string
-  /** Describes the underlying background colour. Allows the icon to provide visual contrast. */
-  onBackground?: 'light' | 'dark'
+  /** Changes the text colour for readability on a light (but not white) background. */
+  contrastColor?: boolean
+  /** Changes the text colour for readability on a dark background. */
+  inverseColor?: boolean
   /** The size of the icon. Corresponds with the text levels. */
   size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
   /** The component rendering the icon’s markup. */
@@ -22,7 +24,7 @@ export type IconButtonProps = {
 
 export const IconButton = forwardRef(
   (
-    { className, label, onBackground, size = 'level-5', svg = CloseIcon, ...restProps }: IconButtonProps,
+    { className, label, contrastColor, inverseColor, size = 'level-5', svg = CloseIcon, ...restProps }: IconButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => (
     <button
@@ -30,8 +32,8 @@ export const IconButton = forwardRef(
       ref={ref}
       className={clsx(
         'ams-icon-button',
-        onBackground === 'light' && 'ams-icon-button--on-background-light',
-        onBackground === 'dark' && 'ams-icon-button--on-background-dark',
+        contrastColor && 'ams-icon-button--contrast-color',
+        inverseColor && 'ams-icon-button--inverse-color',
         className,
       )}
     >
diff --git a/packages/react/src/Link/Link.test.tsx b/packages/react/src/Link/Link.test.tsx
index 8bed3791f4..9f91df3d4c 100644
--- a/packages/react/src/Link/Link.test.tsx
+++ b/packages/react/src/Link/Link.test.tsx
@@ -5,6 +5,7 @@ import '@testing-library/jest-dom'
 
 describe('Link', () => {
   const linktext = 'Linktext'
+
   it('renders with href attribute', () => {
     const { container } = render(<Link href="#">{linktext}</Link>)
 
@@ -34,37 +35,37 @@ describe('Link', () => {
     expect(link).toHaveClass('ams-link ams-link--inline')
   })
 
-  it('renders light background color', () => {
+  it('renders an additional class name', () => {
+    const { container } = render(<Link className="large" />)
+
+    const link = container.querySelector(':only-child')
+
+    expect(link).toHaveClass('large')
+    expect(link).toHaveClass('ams-link')
+  })
+
+  it('renders the class name for contrast color', () => {
     const { container } = render(
-      <Link onBackground="light" href="#">
+      <Link contrastColor href="#">
         {linktext}
       </Link>,
     )
 
     const link = container.querySelector('a:only-child')
 
-    expect(link).toHaveClass('ams-link ams-link--on-background-light')
+    expect(link).toHaveClass('ams-link ams-link--contrast-color')
   })
 
-  it('renders dark background color', () => {
+  it('renders the class name for inverse color', () => {
     const { container } = render(
-      <Link onBackground="dark" href="#">
+      <Link inverseColor href="#">
         {linktext}
       </Link>,
     )
 
     const link = container.querySelector('a:only-child')
 
-    expect(link).toHaveClass('ams-link ams-link--on-background-dark')
-  })
-
-  it('renders an additional class name', () => {
-    const { container } = render(<Link className="large" />)
-
-    const link = container.querySelector(':only-child')
-
-    expect(link).toHaveClass('large')
-    expect(link).toHaveClass('ams-link')
+    expect(link).toHaveClass('ams-link ams-link--inverse-color')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 794816eff1..8229b5b592 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -7,19 +7,20 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { AnchorHTMLAttributes, ForwardedRef } from 'react'
 
-type LinkOnBackground = 'default' | 'light' | 'dark'
 type LinkVariant = 'standalone' | 'inline'
 
 export type LinkProps = {
-  /** Describes the underlying background colour. Allows the text to provide visual contrast. */
-  onBackground?: LinkOnBackground
+  /** Changes the text colour for readability on a light background. */
+  contrastColor?: boolean
+  /** Changes the text colour for readability on a dark background. */
+  inverseColor?: boolean
   /** Whether the link is inline or stands alone. */
   variant?: LinkVariant
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>
 
 export const Link = forwardRef(
   (
-    { children, variant = 'standalone', onBackground, className, ...restProps }: LinkProps,
+    { children, className, contrastColor, inverseColor, variant = 'standalone', ...restProps }: LinkProps,
     ref: ForwardedRef<HTMLAnchorElement>,
   ) => (
     <a
@@ -27,12 +28,10 @@ export const Link = forwardRef(
       ref={ref}
       className={clsx(
         'ams-link',
-        {
-          'ams-link--standalone': variant === 'standalone',
-          'ams-link--inline': variant === 'inline',
-          'ams-link--on-background-light': onBackground === 'light',
-          'ams-link--on-background-dark': onBackground === 'dark',
-        },
+        contrastColor && 'ams-link--contrast-color',
+        inverseColor && 'ams-link--inverse-color',
+        variant === 'inline' && 'ams-link--inline',
+        variant === 'standalone' && 'ams-link--standalone',
         className,
       )}
     >
diff --git a/packages/react/src/LinkList/LinkListLink.test.tsx b/packages/react/src/LinkList/LinkListLink.test.tsx
index 523a0325ba..0d48e38f5a 100644
--- a/packages/react/src/LinkList/LinkListLink.test.tsx
+++ b/packages/react/src/LinkList/LinkListLink.test.tsx
@@ -43,12 +43,20 @@ describe('Link list link', () => {
     expect(component).toHaveClass('ams-link-list__link--small')
   })
 
-  it('renders a class name for the background color', () => {
-    render(<LinkList.Link href="#" onBackground="dark" />)
+  it('renders the class name for contrast color', () => {
+    render(<LinkList.Link href="#" contrastColor />)
 
     const component = screen.getByRole('link')
 
-    expect(component).toHaveClass('ams-link-list__link--on-background-dark')
+    expect(component).toHaveClass('ams-link-list__link--contrast-color')
+  })
+
+  it('renders the class name for inverse color', () => {
+    render(<LinkList.Link href="#" inverseColor />)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toHaveClass('ams-link-list__link--inverse-color')
   })
 
   it('supports ForwardRef in React', () => {
diff --git a/packages/react/src/LinkList/LinkListLink.tsx b/packages/react/src/LinkList/LinkListLink.tsx
index e399fd1d38..ae23144577 100644
--- a/packages/react/src/LinkList/LinkListLink.tsx
+++ b/packages/react/src/LinkList/LinkListLink.tsx
@@ -9,13 +9,13 @@ import { forwardRef } from 'react'
 import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 import { Icon } from '../Icon'
 
-type BackgroundName = 'default' | 'light' | 'dark'
-
 export type LinkListLinkProps = {
   /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
   icon?: Function
-  /** Describes the underlying background colour. Allows the text to provide visual contrast. */
-  onBackground?: BackgroundName
+  /** Changes the text colour for readability on a light background. */
+  contrastColor?: boolean
+  /** Changes the text colour for readability on a dark background. */
+  inverseColor?: boolean
   /** The size of the text. Use the same size for all items in the list. */
   size?: 'small' | 'large'
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>
@@ -29,7 +29,7 @@ const iconSizeMap = {
 /** One link with a Link List. */
 export const LinkListLink = forwardRef(
   (
-    { children, className, icon, onBackground, size, ...restProps }: LinkListLinkProps,
+    { children, className, icon, contrastColor, inverseColor, size, ...restProps }: LinkListLinkProps,
     ref: ForwardedRef<HTMLAnchorElement>,
   ) => {
     return (
@@ -37,7 +37,8 @@ export const LinkListLink = forwardRef(
         <a
           className={clsx(
             'ams-link-list__link',
-            onBackground && `ams-link-list__link--on-background-${onBackground}`,
+            contrastColor && 'ams-link-list__link--contrast-color',
+            inverseColor && 'ams-link-list__link--inverse-color',
             size && `ams-link-list__link--${size}`,
             className,
           )}
diff --git a/proprietary/tokens/src/common/ams/link-appearance.tokens.json b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
index 8daf5456e3..3b0bcf8dd5 100644
--- a/proprietary/tokens/src/common/ams/link-appearance.tokens.json
+++ b/proprietary/tokens/src/common/ams/link-appearance.tokens.json
@@ -7,12 +7,6 @@
       "hover": {
         "color": { "value": "{ams.color.dark-blue}" }
       },
-      "on-background-dark": {
-        "color": { "value": "{ams.color.primary-white}" }
-      },
-      "on-background-light": {
-        "color": { "value": "{ams.color.primary-black}" }
-      },
       "regular": {
         "text-decoration-line": { "value": "underline" },
         "hover": {
@@ -25,6 +19,24 @@
         "hover": {
           "text-decoration-line": { "value": "underline" }
         }
+      },
+      "contrast": {
+        "color": { "value": "{ams.color.primary-black}" },
+        "hover": {
+          "color": { "value": "{ams.color.primary-black}" }
+        },
+        "visited": {
+          "color": { "value": "{ams.color.primary-black}" }
+        }
+      },
+      "inverse": {
+        "color": { "value": "{ams.color.primary-white}" },
+        "hover": {
+          "color": { "value": "{ams.color.primary-white}" }
+        },
+        "visited": {
+          "color": { "value": "{ams.color.primary-white}" }
+        }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/icon-button.tokens.json b/proprietary/tokens/src/components/ams/icon-button.tokens.json
index 0f689fc3c4..207615e806 100644
--- a/proprietary/tokens/src/components/ams/icon-button.tokens.json
+++ b/proprietary/tokens/src/components/ams/icon-button.tokens.json
@@ -10,7 +10,7 @@
       "disabled": {
         "color": { "value": "{ams.color.neutral-grey2}" }
       },
-      "on-background-light": {
+      "contrast-color": {
         "color": { "value": "{ams.color.primary-black}" },
         "hover": {
           "background-color": { "value": "rgba(0, 0, 0, 0.125)" },
@@ -20,7 +20,7 @@
           "color": { "value": "{ams.color.neutral-grey2}" }
         }
       },
-      "on-background-dark": {
+      "inverse-color": {
         "background-color": { "value": "{ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" },
         "hover": {
diff --git a/proprietary/tokens/src/components/ams/link-list.tokens.json b/proprietary/tokens/src/components/ams/link-list.tokens.json
index 49a289ed6e..34ce0f0c40 100644
--- a/proprietary/tokens/src/components/ams/link-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/link-list.tokens.json
@@ -25,16 +25,16 @@
           "color": { "value": "{ams.link-appearance.hover.color}" },
           "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
         },
-        "on-background-dark": {
-          "color": { "value": "{ams.link-appearance.on-background-dark.color}" },
+        "contrast-color": {
+          "color": { "value": "{ams.link-appearance.contrast.color}" },
           "hover": {
-            "color": { "value": "{ams.link-appearance.on-background-dark.color}" }
+            "color": { "value": "{ams.link-appearance.contrast.hover.color}" }
           }
         },
-        "on-background-light": {
-          "color": { "value": "{ams.link-appearance.on-background-light.color}" },
+        "inverse-color": {
+          "color": { "value": "{ams.link-appearance.inverse.color}" },
           "hover": {
-            "color": { "value": "{ams.link-appearance.on-background-light.color}" }
+            "color": { "value": "{ams.link-appearance.inverse.hover.color}" }
           }
         }
       }
diff --git a/proprietary/tokens/src/components/ams/link.tokens.json b/proprietary/tokens/src/components/ams/link.tokens.json
index 5ec69c2dc1..459b4d8b09 100644
--- a/proprietary/tokens/src/components/ams/link.tokens.json
+++ b/proprietary/tokens/src/components/ams/link.tokens.json
@@ -38,22 +38,22 @@
           "text-underline-offset": { "value": "{ams.link-appearance.regular.hover.text-underline-offset}" }
         }
       },
-      "on-background-dark": {
-        "color": { "value": "{ams.link-appearance.on-background-dark.color}" },
+      "contrast-color": {
+        "color": { "value": "{ams.link-appearance.contrast.color}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.on-background-dark.color}" }
+          "color": { "value": "{ams.link-appearance.contrast.hover.color}" }
         },
         "visited": {
-          "color": { "value": "{ams.link-appearance.on-background-dark.color}" }
+          "color": { "value": "{ams.link-appearance.contrast.visited.color}" }
         }
       },
-      "on-background-light": {
-        "color": { "value": "{ams.link-appearance.on-background-light.color}" },
+      "inverse-color": {
+        "color": { "value": "{ams.link-appearance.inverse.color}" },
         "hover": {
-          "color": { "value": "{ams.link-appearance.on-background-light.color}" }
+          "color": { "value": "{ams.link-appearance.inverse.hover.color}" }
         },
         "visited": {
-          "color": { "value": "{ams.link-appearance.on-background-light.color}" }
+          "color": { "value": "{ams.link-appearance.inverse.visited.color}" }
         }
       }
     }
diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
index 50f85b6977..52ec22ad3d 100644
--- a/proprietary/tokens/src/components/ams/search-field.tokens.json
+++ b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -13,9 +13,7 @@
       },
       "input": {
         "background-color": { "value": "{ams.color.primary-white}" },
-        "box-shadow": {
-          "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}"
-        },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
         "color": { "value": "{ams.color.primary-black}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.5.font-size}" },
diff --git a/storybook/src/components/Blockquote/Blockquote.docs.mdx b/storybook/src/components/Blockquote/Blockquote.docs.mdx
index 2a375e963e..808d18a9f9 100644
--- a/storybook/src/components/Blockquote/Blockquote.docs.mdx
+++ b/storybook/src/components/Blockquote/Blockquote.docs.mdx
@@ -19,4 +19,4 @@ import README from "../../../../packages/css/src/components/blockquote/README.md
 Set the `inverseColor` prop if the Blockquote sits on a dark background.
 This ensures the colour of the text provides enough contrast.
 
-<Canvas of={BlockquoteStories.InvertedColor} />
+<Canvas of={BlockquoteStories.InverseColour} />
diff --git a/storybook/src/components/Blockquote/Blockquote.stories.tsx b/storybook/src/components/Blockquote/Blockquote.stories.tsx
index f407545bdc..f0e69365e3 100644
--- a/storybook/src/components/Blockquote/Blockquote.stories.tsx
+++ b/storybook/src/components/Blockquote/Blockquote.stories.tsx
@@ -32,7 +32,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const InvertedColor: Story = {
+export const InverseColour: Story = {
   args: {
     inverseColor: true,
   },
diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
index 8e88780faa..d0ff0866d7 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
+++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
@@ -23,4 +23,4 @@ A term may have multiple details.
 Set the `inverseColor` prop if the Description List sits on a dark background.
 This ensures the colour of the text provides enough contrast.
 
-<Canvas of={DescriptionListStories.InvertedColor} />
+<Canvas of={DescriptionListStories.InverseColour} />
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index 898cad3ce7..1c89f5e758 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -47,7 +47,7 @@ export const MultipleDetails: Story = {
   },
 }
 
-export const InvertedColor: Story = {
+export const InverseColour: Story = {
   args: {
     inverseColor: true,
   },
diff --git a/storybook/src/components/Footer/Footer.stories.tsx b/storybook/src/components/Footer/Footer.stories.tsx
index aa7d77e744..9d553c9f9c 100644
--- a/storybook/src/components/Footer/Footer.stories.tsx
+++ b/storybook/src/components/Footer/Footer.stories.tsx
@@ -48,7 +48,7 @@ export const Default: Story = {
             <LinkList>
               {['Veel gestelde vragen', 'Over ons', 'Werken bij', 'Kalender', 'Uit in Amsterdam', 'Bronnen'].map(
                 (label, index) => (
-                  <LinkList.Link href="#" key={index} onBackground="dark" size="small">
+                  <LinkList.Link href="#" key={index} inverseColor size="small">
                     {label}
                   </LinkList.Link>
                 ),
@@ -63,13 +63,13 @@ export const Default: Story = {
               Hebt u een vraag en kunt u het antwoord niet vinden op deze website? Neem dan contact met ons op.
             </Paragraph>
             <LinkList>
-              <LinkList.Link href="mailto:redactie@amsterdam.nl" icon={EmailIcon} onBackground="dark" size="small">
+              <LinkList.Link href="mailto:redactie@amsterdam.nl" icon={EmailIcon} inverseColor size="small">
                 E-mail
               </LinkList.Link>
-              <LinkList.Link href="tel:+3114020" icon={PhoneIcon} onBackground="dark" size="small">
+              <LinkList.Link href="tel:+3114020" icon={PhoneIcon} inverseColor size="small">
                 14 020
               </LinkList.Link>
-              <LinkList.Link href="#" icon={ClockIcon} onBackground="dark" size="small">
+              <LinkList.Link href="#" icon={ClockIcon} inverseColor size="small">
                 Contactgegevens en openingstijden
               </LinkList.Link>
             </LinkList>
@@ -80,7 +80,7 @@ export const Default: Story = {
                 Nieuwsbrief
               </Heading>
               <LinkList>
-                <LinkList.Link href="#" onBackground="dark" size="small">
+                <LinkList.Link href="#" inverseColor size="small">
                   Inschrijven
                 </LinkList.Link>
               </LinkList>
@@ -91,7 +91,7 @@ export const Default: Story = {
               </Heading>
               <LinkList>
                 {socialPlatforms.map(({ name, icon }) => (
-                  <LinkList.Link href="#" icon={icon} key={name} onBackground="dark" size="small">
+                  <LinkList.Link href="#" icon={icon} key={name} inverseColor size="small">
                     {name}
                   </LinkList.Link>
                 ))}
@@ -130,10 +130,10 @@ export const Onderzoek: Story = {
               Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Neem dan contact met ons op.
             </Paragraph>
             <LinkList>
-              <LinkList.Link href="mailto:redactie.os@amsterdam.nl" icon={EmailIcon} onBackground="dark" size="small">
+              <LinkList.Link href="mailto:redactie.os@amsterdam.nl" icon={EmailIcon} inverseColor size="small">
                 E-mail
               </LinkList.Link>
-              <LinkList.Link href="tel:+31202510333" icon={PhoneIcon} onBackground="dark" size="small">
+              <LinkList.Link href="tel:+31202510333" icon={PhoneIcon} inverseColor size="small">
                 020 251 0333
               </LinkList.Link>
             </LinkList>
@@ -146,13 +146,13 @@ export const Onderzoek: Story = {
               Bent u uitgenodigd om mee te doen aan onderzoek of heeft u vragen over het panel of stadspaspanel?
             </Paragraph>
             <LinkList>
-              <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
+              <LinkList.Link href="#" inverseColor rel="external" size="small">
                 Meedoen aan onderzoek
               </LinkList.Link>
-              <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
+              <LinkList.Link href="#" inverseColor rel="external" size="small">
                 Panel Amsterdam
               </LinkList.Link>
-              <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
+              <LinkList.Link href="#" inverseColor rel="external" size="small">
                 Stadspaspanel Amsterdam
               </LinkList.Link>
             </LinkList>
@@ -162,16 +162,16 @@ export const Onderzoek: Story = {
               Onderzoek en Statistiek
             </Heading>
             <LinkList>
-              <LinkList.Link href="#" onBackground="dark" size="small">
+              <LinkList.Link href="#" inverseColor size="small">
                 Over Onderzoek en Statistiek
               </LinkList.Link>
-              <LinkList.Link href="#" onBackground="dark" size="small">
+              <LinkList.Link href="#" inverseColor size="small">
                 Veelgestelde vragen
               </LinkList.Link>
-              <LinkList.Link href="#" onBackground="dark" rel="external" size="small">
+              <LinkList.Link href="#" inverseColor rel="external" size="small">
                 Nieuwsbrief
               </LinkList.Link>
-              <LinkList.Link href="#" onBackground="dark" size="small">
+              <LinkList.Link href="#" inverseColor size="small">
                 Vacatures
               </LinkList.Link>
             </LinkList>
diff --git a/storybook/src/components/Heading/Heading.docs.mdx b/storybook/src/components/Heading/Heading.docs.mdx
index b27dd0ec6c..c67b70fcb5 100644
--- a/storybook/src/components/Heading/Heading.docs.mdx
+++ b/storybook/src/components/Heading/Heading.docs.mdx
@@ -48,4 +48,4 @@ Ensure that you still select a level that accurately represents the section’s
 Set the `inverseColor` prop if the Heading sits on a dark background.
 This ensures the colour of the text provides enough contrast.
 
-<Canvas of={HeadingStories.InvertedColor} />
+<Canvas of={HeadingStories.InverseColour} />
diff --git a/storybook/src/components/Heading/Heading.stories.tsx b/storybook/src/components/Heading/Heading.stories.tsx
index 6917492710..1ac5035dbf 100644
--- a/storybook/src/components/Heading/Heading.stories.tsx
+++ b/storybook/src/components/Heading/Heading.stories.tsx
@@ -66,7 +66,7 @@ export const Sizes: Story = {
   ),
 }
 
-export const InvertedColor: Story = {
+export const InverseColour: Story = {
   args: {
     inverseColor: true,
   },
diff --git a/storybook/src/components/IconButton/IconButton.docs.mdx b/storybook/src/components/IconButton/IconButton.docs.mdx
index 3c885e3dde..a26cc7eba1 100644
--- a/storybook/src/components/IconButton/IconButton.docs.mdx
+++ b/storybook/src/components/IconButton/IconButton.docs.mdx
@@ -14,18 +14,6 @@ import README from "../../../../packages/css/src/components/icon-button/README.m
 
 ## Examples
 
-### On Light Background
-
-On a light (not white) background, the icon is black.
-
-<Canvas of={IconButtonStories.OnLightBackground} />
-
-### On Dark Background
-
-On a dark background, the icon is white.
-
-<Canvas of={IconButtonStories.OnDarkBackground} />
-
 ### Level 3
 
 <Canvas of={IconButtonStories.Level3} />
@@ -41,3 +29,26 @@ On a dark background, the icon is white.
 ### Level 6
 
 <Canvas of={IconButtonStories.Level6} />
+
+### On a Coloured Background
+
+An icon button on a coloured background must adjust its foreground colour to provide enough contrast.
+We have lighter and darker background colours, and icon buttons behave differently on each.
+Stijlweb shows [which colours suit which backgrounds](https://amsterdam.nl/stijlweb/basiselementen/kleuren/).
+Although they only address headings and paragraphs, the same principle applies to icon buttons.
+
+- Set the `contrastColor` prop on a yellow, orange or green background.
+  It will make the icon button black.
+- Use the `inverseColor` prop on a purple or dark blue background.
+  It will make the icon button white.
+- On the other background colours, choose either one, but do so consistently.
+- There is no current scenario to set both properties at the same time.
+  For now, the 'inverse' appearance will prevail.
+
+#### Contrast Colour
+
+<Canvas of={IconButtonStories.ContrastColour} />
+
+#### Inverse Colour
+
+<Canvas of={IconButtonStories.InverseColour} />
diff --git a/storybook/src/components/IconButton/IconButton.stories.tsx b/storybook/src/components/IconButton/IconButton.stories.tsx
index 622665f54b..f35409967a 100644
--- a/storybook/src/components/IconButton/IconButton.stories.tsx
+++ b/storybook/src/components/IconButton/IconButton.stories.tsx
@@ -6,27 +6,22 @@
 import { IconButton } from '@amsterdam/design-system-react/src'
 import * as Icons from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
+import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators'
 
 const meta = {
   title: 'Components/Buttons/Icon Button',
   component: IconButton,
   args: {
-    label: 'Sluiten',
-    onBackground: undefined,
+    contrastColor: false,
     disabled: false,
+    inverseColor: false,
+    label: 'Sluiten',
     size: undefined,
   },
   argTypes: {
     disabled: {
       description: 'Prevents interaction. Avoid if possible.',
     },
-    onBackground: {
-      control: {
-        type: 'radio',
-        labels: { undefined: 'default', light: 'light', dark: 'dark' },
-      },
-      options: [undefined, 'light', 'dark'],
-    },
     size: {
       control: {
         type: 'radio',
@@ -42,6 +37,7 @@ const meta = {
       mapping: Icons,
     },
   },
+  decorators: [inverseColorDecorator, contrastColorDecorator],
 } satisfies Meta<typeof IconButton>
 
 export default meta
@@ -50,18 +46,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const OnLightBackground: Story = {
-  args: {
-    onBackground: 'light',
-  },
-}
-
-export const OnDarkBackground: Story = {
-  args: {
-    onBackground: 'dark',
-  },
-}
-
 export const Level3: Story = {
   args: {
     size: 'level-3',
@@ -85,3 +69,15 @@ export const Level6: Story = {
     size: 'level-6',
   },
 }
+
+export const ContrastColour: Story = {
+  args: {
+    contrastColor: true,
+  },
+}
+
+export const InverseColour: Story = {
+  args: {
+    inverseColor: true,
+  },
+}
diff --git a/storybook/src/components/Link/Link.docs.mdx b/storybook/src/components/Link/Link.docs.mdx
index 84f8b96036..fd466a2518 100644
--- a/storybook/src/components/Link/Link.docs.mdx
+++ b/storybook/src/components/Link/Link.docs.mdx
@@ -30,10 +30,25 @@ Don’t use too many inline links on the same page, as it may confuse the user.
 
 <Canvas of={LinkStories.Inline} />
 
-### On Dark Background
+### On a Coloured Background
 
-<Canvas of={LinkStories.onDarkBackground} />
+A link on a coloured background must adjust its text colour to provide enough contrast.
+We have lighter and darker background colours, and links behave differently on each.
+Stijlweb shows [which colours suit which backgrounds](https://amsterdam.nl/stijlweb/basiselementen/kleuren/).
+Although they only address headings and paragraphs, the same principle applies to links.
 
-### On Light Background
+- Set the `contrastColor` prop on a yellow, orange or green background.
+  It will make the link black.
+- Use the `inverseColor` prop on a purple or dark blue background.
+  It will make the link white.
+- On the other background colours, choose either one, but do so consistently.
+- There is no current scenario to set both properties at the same time.
+  For now, the 'inverse' appearance will prevail.
 
-<Canvas of={LinkStories.onLightBackground} />
+#### Contrast Colour
+
+<Canvas of={LinkStories.ContrastColour} />
+
+#### Inverse Colour
+
+<Canvas of={LinkStories.InverseColour} />
diff --git a/storybook/src/components/Link/Link.stories.tsx b/storybook/src/components/Link/Link.stories.tsx
index 3853f33ac6..6253cc8e07 100644
--- a/storybook/src/components/Link/Link.stories.tsx
+++ b/storybook/src/components/Link/Link.stories.tsx
@@ -6,6 +6,7 @@
 import { Paragraph } from '@amsterdam/design-system-react'
 import { Link } from '@amsterdam/design-system-react/src'
 import type { Meta, StoryObj } from '@storybook/react'
+import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators'
 
 type Story = StoryObj<typeof Link>
 
@@ -14,27 +15,22 @@ const meta = {
   component: Link,
   args: {
     children: 'Link label',
+    contrastColor: false,
     href: '#',
-    onBackground: undefined, // Workaround to avoid 'onBackground' being set to an empty function
+    inverseColor: false,
   },
   argTypes: {
     children: {
       description: 'The link text.',
       table: { disable: false },
     },
-    onBackground: {
-      control: {
-        type: 'radio',
-        labels: { undefined: 'default', light: 'light', dark: 'dark' },
-      },
-      options: [undefined, 'light', 'dark'],
-    },
     href: {
       description: 'The url for the link.',
       name: 'href',
       type: { name: 'string', required: false },
     },
   },
+  decorators: [inverseColorDecorator, contrastColorDecorator],
 } satisfies Meta<typeof Link>
 
 export default meta
@@ -57,28 +53,14 @@ export const Inline: Story = {
   ],
 }
 
-export const onDarkBackground: Story = {
+export const ContrastColour: Story = {
   args: {
-    onBackground: 'dark',
+    contrastColor: true,
   },
-  decorators: [
-    (Story) => (
-      <div style={{ background: '#004699', display: 'inline', padding: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
 }
 
-export const onLightBackground: Story = {
+export const InverseColour: Story = {
   args: {
-    onBackground: 'light',
+    inverseColor: true,
   },
-  decorators: [
-    (Story) => (
-      <div style={{ background: '#FFE600', display: 'inline', padding: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
 }
diff --git a/storybook/src/components/LinkList/LinkList.docs.mdx b/storybook/src/components/LinkList/LinkList.docs.mdx
index ee4241c5fb..b7394e7b8f 100644
--- a/storybook/src/components/LinkList/LinkList.docs.mdx
+++ b/storybook/src/components/LinkList/LinkList.docs.mdx
@@ -43,12 +43,23 @@ Any attributes and the `ref` are passed on to the `<a>` element.
 
 ### On a Coloured Background
 
-On a dark background, the link colour is white.
+A link on a coloured background must adjust its text colour to provide enough contrast.
+We have lighter and darker background colours, and links behave differently on each.
+Stijlweb shows [which colours suit which backgrounds](https://amsterdam.nl/stijlweb/basiselementen/kleuren/).
+Although they only address headings and paragraphs, the same principle applies to links.
 
-Specify the background context for each link in the list – the link is responsible for its own colors.
+- Set the `contrastColor` prop on a yellow, orange or green background.
+  It will make the link black.
+- Use the `inverseColor` prop on a purple or dark blue background.
+  It will make the link white.
+- On the other background colours, choose either one, but do so consistently.
+- There is no current scenario to set both properties at the same time.
+  For now, the 'inverse' appearance will prevail.
 
-<Canvas of={LinkListStories.OnDarkBackground} />
+#### Contrast Colour
 
-The same goes for a light (not white) background color. The link colour is black here.
+<Canvas of={LinkListStories.ContrastColour} />
 
-<Canvas of={LinkListStories.OnLightBackground} />
+#### Inverse Colour
+
+<Canvas of={LinkListStories.InverseColour} />
diff --git a/storybook/src/components/LinkList/LinkList.stories.tsx b/storybook/src/components/LinkList/LinkList.stories.tsx
index 18f3027644..ff8e072752 100644
--- a/storybook/src/components/LinkList/LinkList.stories.tsx
+++ b/storybook/src/components/LinkList/LinkList.stories.tsx
@@ -6,76 +6,75 @@
 import { LinkList } from '@amsterdam/design-system-react/src'
 import * as Icons from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
+import { contrastColorDecorator, inverseColorDecorator } from '../shared/decorators'
 import { exampleLinkList } from '../shared/exampleContent'
 
-const links = exampleLinkList()
+const linkList = exampleLinkList()
 
 const meta = {
   title: 'Components/Navigation/Link List',
   component: LinkList,
+} satisfies Meta<typeof LinkList>
+
+export default meta
+
+const linkMeta = {
+  component: LinkList.Link,
+} satisfies Meta<typeof LinkList.Link>
+
+type Story = StoryObj<typeof meta>
+type LinkStory = StoryObj<typeof linkMeta>
+
+const StoryTemplate: Story = {
   args: {
-    children: links.map((text, index) => (
+    children: linkList.map((text, index) => (
       <LinkList.Link href="#" key={index}>
         {text}
       </LinkList.Link>
     )),
   },
-} satisfies Meta<typeof LinkList>
-
-export default meta
+}
 
-const linkMeta = {
-  title: 'Components/Navigation/Link List Link',
-  component: LinkList.Link,
+const LinkStoryTemplate: LinkStory = {
+  args: {
+    children: linkList[0],
+    contrastColor: false,
+    href: '#',
+    icon: Icons.ChevronRightIcon,
+    inverseColor: false,
+  },
   argTypes: {
     icon: {
       control: { type: 'select' },
       options: Object.keys(Icons),
       mapping: Icons,
-      defaultValue: Icons.ChevronRightIcon,
-    },
-    onBackground: {
-      control: {
-        type: 'radio',
-        labels: { undefined: '(not set)', light: 'light', dark: 'dark' },
-      },
-      options: [undefined, 'light', 'dark'],
     },
     size: {
       control: {
         type: 'radio',
-        labels: { small: 'small', undefined: 'medium', large: 'large' },
+        labels: { undefined: 'medium' },
       },
       options: ['small', undefined, 'large'],
     },
   },
-} satisfies Meta<typeof LinkList.Link>
-
-type Story = StoryObj<typeof meta>
-type LinkStory = StoryObj<typeof linkMeta>
-
-const LinkTemplate: Story = {}
-
-const LinkStoryTemplate: LinkStory = {
-  args: {
-    href: '#',
-  },
-  argTypes: linkMeta.argTypes,
   decorators: [
     (Story) => (
       <LinkList>
         <Story />
       </LinkList>
     ),
+    inverseColorDecorator,
+    contrastColorDecorator,
   ],
   render: ({ children, ...args }) => <LinkList.Link {...args}>{children}</LinkList.Link>,
 }
 
 export const Default: Story = {
-  ...LinkTemplate,
+  ...StoryTemplate,
 }
 
 export const CustomIcons: Story = {
+  ...StoryTemplate,
   args: {
     children: [
       <LinkList.Link key="form" href="#" icon={Icons.ChattingIcon}>
@@ -92,6 +91,7 @@ export const CustomIcons: Story = {
 }
 
 export const SmallText: Story = {
+  ...StoryTemplate,
   args: {
     children: [
       <LinkList.Link key="about" href="#" size="small">
@@ -109,44 +109,20 @@ export const SmallText: Story = {
 
 export const Link: LinkStory = {
   ...LinkStoryTemplate,
-  args: {
-    children: 'Alles over openbare orde en veiligheid',
-    href: '#',
-    onBackground: undefined,
-    size: undefined,
-  },
 }
 
-export const OnDarkBackground: LinkStory = {
+export const ContrastColour: LinkStory = {
   ...LinkStoryTemplate,
   args: {
-    children: links[0],
-    href: '#',
-    onBackground: 'dark',
+    ...LinkStoryTemplate.args,
+    contrastColor: true,
   },
-  decorators: [
-    ...LinkStoryTemplate.decorators,
-    (Story) => (
-      <div style={{ background: '#004699', padding: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
 }
 
-export const OnLightBackground: LinkStory = {
+export const InverseColour: LinkStory = {
   ...LinkStoryTemplate,
   args: {
-    children: links[0],
-    href: '#',
-    onBackground: 'light',
+    ...LinkStoryTemplate.args,
+    inverseColor: true,
   },
-  decorators: [
-    ...LinkStoryTemplate.decorators,
-    (Story) => (
-      <div style={{ background: '#FFE600', padding: '1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
 }
diff --git a/storybook/src/components/PageHeading/PageHeading.docs.mdx b/storybook/src/components/PageHeading/PageHeading.docs.mdx
index d487fc3d32..b7b9e32c69 100644
--- a/storybook/src/components/PageHeading/PageHeading.docs.mdx
+++ b/storybook/src/components/PageHeading/PageHeading.docs.mdx
@@ -21,4 +21,4 @@ import README from "../../../../packages/css/src/components/page-heading/README.
 Set the `inverseColor` prop if the Page Heading sits on a dark background.
 This ensures the colour of the text provides enough contrast.
 
-<Canvas of={PageHeadingStories.InvertedColor} />
+<Canvas of={PageHeadingStories.InverseColour} />
diff --git a/storybook/src/components/PageHeading/PageHeading.stories.tsx b/storybook/src/components/PageHeading/PageHeading.stories.tsx
index 77fca8e377..137e0d419e 100644
--- a/storybook/src/components/PageHeading/PageHeading.stories.tsx
+++ b/storybook/src/components/PageHeading/PageHeading.stories.tsx
@@ -29,7 +29,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const InvertedColor: Story = {
+export const InverseColour: Story = {
   args: {
     inverseColor: true,
   },
diff --git a/storybook/src/components/Paragraph/Paragraph.docs.mdx b/storybook/src/components/Paragraph/Paragraph.docs.mdx
index 325c7b9388..68b06fc09c 100644
--- a/storybook/src/components/Paragraph/Paragraph.docs.mdx
+++ b/storybook/src/components/Paragraph/Paragraph.docs.mdx
@@ -38,4 +38,4 @@ Keep these texts short.
 Set the `inverseColor` prop if the Paragraph sits on a dark background.
 This ensures the colour of the text provides enough contrast.
 
-<Canvas of={ParagraphStories.InvertedColor} />
+<Canvas of={ParagraphStories.InverseColour} />
diff --git a/storybook/src/components/Paragraph/Paragraph.stories.tsx b/storybook/src/components/Paragraph/Paragraph.stories.tsx
index 7cb7506618..f4fa210a28 100644
--- a/storybook/src/components/Paragraph/Paragraph.stories.tsx
+++ b/storybook/src/components/Paragraph/Paragraph.stories.tsx
@@ -51,7 +51,7 @@ export const Small: Story = {
   },
 }
 
-export const InvertedColor: Story = {
+export const InverseColour: Story = {
   args: {
     inverseColor: true,
   },
diff --git a/storybook/src/components/shared/decorators.tsx b/storybook/src/components/shared/decorators.tsx
index 872427db6a..bf10cea775 100644
--- a/storybook/src/components/shared/decorators.tsx
+++ b/storybook/src/components/shared/decorators.tsx
@@ -5,6 +5,13 @@
 
 import type { StoryContext, StoryFn } from '@storybook/react'
 
+/** Applies a light background colour if the `contrastColor` arg is true. */
+export const contrastColorDecorator = (Story: StoryFn, context: StoryContext) => (
+  <div className={context.args['contrastColor'] ? 'ams-docs-light-background' : undefined}>
+    <Story />
+  </div>
+)
+
 /** Applies a dark background colour if the `inverseColor` arg is true. */
 export const inverseColorDecorator = (Story: StoryFn, context: StoryContext) => (
   <div className={context.args['inverseColor'] ? 'ams-docs-dark-background' : undefined}>
diff --git a/storybook/src/components/shared/exampleContent.ts b/storybook/src/components/shared/exampleContent.ts
index d393822c56..b53be2bb3e 100644
--- a/storybook/src/components/shared/exampleContent.ts
+++ b/storybook/src/components/shared/exampleContent.ts
@@ -48,11 +48,11 @@ export const exampleLinkList = () =>
       'EIT Culture & Creativity',
     ],
     [
-      'Dam tot Damloop 17 september. afsluitingen',
-      'De Nieuwe Noorder, omleiding',
-      'Brug bij Zwarte Gouw/Weerslootpad, omleiding fietsers en voetgangers',
-      'Metaalbewerkerweg en Kamperfoelieweg, omleiding voor fietsers',
-      'H.M. Terwogtweg, afsluitweg',
+      'Dam tot Damloop 17 september: afsluitingen',
+      'De Nieuwe Noorder: omleiding',
+      'Brug bij Zwarte Gouw/Weerslootpad: omleiding fietsers en voetgangers',
+      'Metaalbewerkerweg en Kamperfoelieweg: omleiding voor fietsers',
+      'H.M. Terwogtweg: afsluitweg',
       'Meer werkzaamheden in stadsdeel Noord',
     ],
   ])
diff --git a/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx b/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx
index 372a3d5d84..ef42cd9ad6 100644
--- a/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx
+++ b/storybook/src/pages/amsterdam/ArticlePage/ArticleBody.tsx
@@ -46,7 +46,7 @@ export const ArticleBody = ({ lead, paragraph1, spotlightHeading, spotlightLinkL
               </UnorderedList.Item>
             </UnorderedList>
             <Paragraph inverseColor>
-              <Link href="https://amsterdam.nl/paspoort/" onBackground="dark">
+              <Link href="https://amsterdam.nl/paspoort/" inverseColor>
                 {spotlightLinkLabel}
               </Link>
             </Paragraph>
diff --git a/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx b/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx
index 8e21124e4d..5e1d7be359 100644
--- a/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx
+++ b/storybook/src/pages/amsterdam/HomePage/HomeSpotlight.tsx
@@ -11,7 +11,7 @@ export const HomeSpotlight = () => (
           Check welke ontheffing of vergunning u nodig heeft. Bijvoorbeeld een RVV, TVM, objectvergunning,{' '}
           nachtwerkontheffing, e-RVV, e-TVM of filmmelding. Dat regult u allemaal met 1 formulier.
         </Paragraph>
-        <Link href="#" onBackground="dark" variant="standalone">
+        <Link href="#" inverseColor variant="standalone">
           Eenvoudig regelen
         </Link>
       </Grid.Cell>
@@ -23,7 +23,7 @@ export const HomeSpotlight = () => (
           Lees waar en wanneer we werken aan nieuwbouw, groot onderhoud, herinrichting van straten en wegen, aanpak van
           parken of ontwikkeling van hele gebieden.
         </Paragraph>
-        <Link href="#" onBackground="dark" variant="standalone">
+        <Link href="#" inverseColor variant="standalone">
           Alle bouw- en verkeerswerkzaamheden
         </Link>
       </Grid.Cell>
diff --git a/storybook/src/styles/docs.css b/storybook/src/styles/docs.css
index 7bfea54b68..9fa4d1945c 100644
--- a/storybook/src/styles/docs.css
+++ b/storybook/src/styles/docs.css
@@ -48,14 +48,22 @@
   padding-inline: 0.5rem;
 }
 
-.ams-docs-dark-background {
-  background-color: #004699;
+.ams-docs-dark-background,
+.ams-docs-light-background {
   margin-block: -1rem;
   margin-inline: -1rem;
   padding-block: 1rem;
   padding-inline: 1rem;
 }
 
+.ams-docs-dark-background {
+  background-color: #004699; /* Dark blue */
+}
+
+.ams-docs-light-background {
+  background-color: #ffe600; /* Yellow */
+}
+
 .ams-docs-column,
 .ams-docs-row {
   background: repeating-linear-gradient(