diff --git a/packages/ffe-form-react/src/Checkbox.spec.tsx b/packages/ffe-form-react/src/Checkbox.spec.tsx
index 9fdd6c48ab..4f98ae0d0f 100644
--- a/packages/ffe-form-react/src/Checkbox.spec.tsx
+++ b/packages/ffe-form-react/src/Checkbox.spec.tsx
@@ -111,4 +111,20 @@ describe('<Checkbox />', () => {
         expect(labelContent?.innerHTML).toBe('children');
         expect(input?.getAttribute('aria-label')).toBe('I am label');
     });
+
+    it('ads the on colored on-colored-bg modifier', () => {
+        const { container } = render(
+            <Checkbox onColoredBg={true}>
+                {({ htmlFor, className }) => (
+                    <label className={className} htmlFor={htmlFor}>
+                        Hello world
+                    </label>
+                )}
+            </Checkbox>,
+        );
+        const label = container.querySelector('label');
+        expect(
+            label?.classList.contains('ffe-checkbox--on-colored-bg'),
+        ).toBeTruthy();
+    });
 });
diff --git a/packages/ffe-form-react/src/Checkbox.tsx b/packages/ffe-form-react/src/Checkbox.tsx
index ced14bba7e..5d89830611 100644
--- a/packages/ffe-form-react/src/Checkbox.tsx
+++ b/packages/ffe-form-react/src/Checkbox.tsx
@@ -15,10 +15,23 @@ export interface CheckboxProps
               className: string;
               htmlFor: string;
           }) => React.ReactNode);
+    /** Adds alternative styling for better contrast on certain backgrounds */
+    onColoredBg?: boolean;
 }
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-    ({ children, hiddenLabel, inline = true, noMargins, id, ...rest }, ref) => {
+    (
+        {
+            children,
+            hiddenLabel,
+            inline = true,
+            noMargins,
+            id,
+            onColoredBg,
+            ...rest
+        },
+        ref,
+    ) => {
         const generatedId = useRef(id ?? `checkbox-${uuid()}`).current;
         const labelProps = {
             className: classNames({
@@ -26,6 +39,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
                 'ffe-checkbox--inline': inline,
                 'ffe-checkbox--no-margin': noMargins,
                 'ffe-checkbox--hidden-label': hiddenLabel,
+                'ffe-checkbox--on-colored-bg': onColoredBg,
             }),
             htmlFor: generatedId,
         };
diff --git a/packages/ffe-form-react/src/InputGroup.tsx b/packages/ffe-form-react/src/InputGroup.tsx
index 2e713b3b2b..ad1b16d08c 100644
--- a/packages/ffe-form-react/src/InputGroup.tsx
+++ b/packages/ffe-form-react/src/InputGroup.tsx
@@ -9,6 +9,7 @@ type ChildrenExtraProps = {
     id: string;
     'aria-invalid': 'true' | 'false';
     'aria-describedby': string | undefined;
+    onColoredBg?: boolean;
 };
 
 export interface InputGroupProps
@@ -27,14 +28,25 @@ export interface InputGroupProps
      */
     extraMargin?: boolean;
     /** Use the ErrorFieldMessage component if you need more flexibility in how the content is rendered. */
-    fieldMessage?: string | React.ReactElement<{ id: string }> | null;
+    fieldMessage?:
+        | string
+        | React.ReactElement<{ id: string; onColoredBg?: boolean }>
+        | null;
     /** To just render a static, always visible tooltip, use this. */
     description?: string;
     /** Use the Label component if you need more flexibility in how the content is rendered. */
-    label?: string | React.ReactElement<{ id: string; htmlFor: string }>;
+    label?:
+        | string
+        | React.ReactElement<{
+              id: string;
+              htmlFor: string;
+              onColoredBg?: boolean;
+          }>;
     onTooltipToggle?: TooltipProps['onClick'];
     /** Use the Tooltip component if you need more flexibility in how the content is rendered. */
     tooltip?: React.ReactNode;
+    /** Adds alternative styling for better contrast on certain backgrounds */
+    onColoredBg?: boolean;
 }
 const getChildrenWithExtraProps = (
     children: InputGroupProps['children'],
@@ -59,6 +71,7 @@ export const InputGroup: React.FC<InputGroupProps> = ({
     tooltip,
     onTooltipToggle,
     labelId,
+    onColoredBg,
     ...rest
 }) => {
     const id = useRef(inputId ? inputId : `input-${uuid()}`).current;
@@ -114,6 +127,7 @@ export const InputGroup: React.FC<InputGroupProps> = ({
         id,
         'aria-invalid': isInvalid ? 'true' : 'false',
         'aria-describedby': ariaDescribedBy,
+        onColoredBg,
     } as const;
 
     const modifiedChildren = getChildrenWithExtraProps(children, extraProps);
@@ -122,14 +136,17 @@ export const InputGroup: React.FC<InputGroupProps> = ({
         <div
             className={classNames(
                 'ffe-input-group',
-                { 'ffe-input-group--no-extra-margin': !extraMargin },
-                { 'ffe-input-group--message': hasMessage },
+                {
+                    'ffe-input-group--on-colored-bg': onColoredBg,
+                    'ffe-input-group--no-extra-margin': !extraMargin,
+                    'ffe-input-group--message': hasMessage,
+                },
                 className,
             )}
             {...rest}
         >
             {typeof label === 'string' ? (
-                <Label htmlFor={id} id={labelId}>
+                <Label htmlFor={id} id={labelId} onColoredBg={onColoredBg}>
                     {label}
                 </Label>
             ) : (
@@ -137,14 +154,19 @@ export const InputGroup: React.FC<InputGroupProps> = ({
                 React.cloneElement(label, {
                     htmlFor: id,
                     id: labelId,
+                    onColoredBg,
                 })
             )}
 
             {typeof tooltip === 'string' && (
-                <Tooltip onClick={onTooltipToggle}>{tooltip}</Tooltip>
+                <Tooltip onClick={onTooltipToggle} onColoredBg={onColoredBg}>
+                    {tooltip}
+                </Tooltip>
             )}
 
-            {tooltip === true && <Tooltip onClick={onTooltipToggle} />}
+            {tooltip === true && (
+                <Tooltip onClick={onTooltipToggle} onColoredBg={onColoredBg} />
+            )}
 
             {React.isValidElement(tooltip) && tooltip}
 
@@ -160,13 +182,18 @@ export const InputGroup: React.FC<InputGroupProps> = ({
             {modifiedChildren}
 
             {typeof fieldMessage === 'string' && (
-                <ErrorFieldMessage as="p" id={fieldMessageId}>
+                <ErrorFieldMessage
+                    as="p"
+                    id={fieldMessageId}
+                    onColoredBg={onColoredBg}
+                >
                     {fieldMessage}
                 </ErrorFieldMessage>
             )}
             {React.isValidElement(fieldMessage) &&
                 React.cloneElement(fieldMessage, {
                     id: fieldMessageId,
+                    onColoredBg,
                 })}
         </div>
     );
diff --git a/packages/ffe-form-react/src/Label.spec.tsx b/packages/ffe-form-react/src/Label.spec.tsx
index d1c23729c8..c56984053f 100644
--- a/packages/ffe-form-react/src/Label.spec.tsx
+++ b/packages/ffe-form-react/src/Label.spec.tsx
@@ -34,4 +34,13 @@ describe('<Label>', () => {
         rerender(<Label {...defaultProps} block={true} />);
         expect(label.classList.contains('ffe-form-label--block')).toBe(true);
     });
+
+    it('ads the on colored on-colored-bg modifier', () => {
+        render(<Label {...defaultProps} block={false} onColoredBg={true} />);
+        const label = screen.getByText('label text');
+        expect(label.classList.contains('ffe-form-label')).toBe(true);
+        expect(label.classList.contains('ffe-form-label--on-colored-bg')).toBe(
+            true,
+        );
+    });
 });
diff --git a/packages/ffe-form-react/src/Label.tsx b/packages/ffe-form-react/src/Label.tsx
index 2b3b6d4ee4..5a05e4b123 100644
--- a/packages/ffe-form-react/src/Label.tsx
+++ b/packages/ffe-form-react/src/Label.tsx
@@ -7,6 +7,8 @@ export interface LabelProps extends React.ComponentPropsWithoutRef<'label'> {
      * Set this to `true` if you don't use tooltips and need the label to be `display: block;`.
      */
     block?: boolean;
+    /** Adds alternative styling for better contrast on certain backgrounds */
+    onColoredBg?: boolean;
 }
 
 export const Label: React.FC<LabelProps> = ({
@@ -14,11 +16,13 @@ export const Label: React.FC<LabelProps> = ({
     children,
     className,
     htmlFor,
+    onColoredBg,
     ...rest
 }) => (
     <label
         className={classNames('ffe-form-label', className, {
             'ffe-form-label--block': block,
+            'ffe-form-label--on-colored-bg': onColoredBg,
         })}
         htmlFor={htmlFor}
         {...rest}
diff --git a/packages/ffe-form-react/src/RadioButton.tsx b/packages/ffe-form-react/src/RadioButton.tsx
index eca7d355e5..27f08f3e16 100644
--- a/packages/ffe-form-react/src/RadioButton.tsx
+++ b/packages/ffe-form-react/src/RadioButton.tsx
@@ -6,18 +6,25 @@ import { BaseRadioButton, BaseRadioButtonProps } from './BaseRadioButton';
 export interface RadioButtonProps extends BaseRadioButtonProps {
     /** Indicates whether the radio button is rendered inline or as a block */
     inline?: boolean;
+    /** Adds alternative styling for better contrast on certain backgrounds */
+    onColoredBg?: boolean;
 }
 
 export const RadioButton: React.FC<RadioButtonProps> = ({
     className,
     inline,
+    onColoredBg,
     ...rest
 }) => {
     return (
         <BaseRadioButton
             className={classNames(
                 'ffe-radio-button',
-                { 'ffe-radio-button--inline': inline },
+
+                {
+                    'ffe-radio-button--inline': inline,
+                    'ffe-radio-button--on-colored-bg': onColoredBg,
+                },
                 className,
             )}
             {...rest}
diff --git a/packages/ffe-form-react/src/RadioButtonInputGroup.tsx b/packages/ffe-form-react/src/RadioButtonInputGroup.tsx
index 685251df70..7d19f83db8 100644
--- a/packages/ffe-form-react/src/RadioButtonInputGroup.tsx
+++ b/packages/ffe-form-react/src/RadioButtonInputGroup.tsx
@@ -19,6 +19,7 @@ export interface RadioButtonInputGroupProps
         name: string;
         onChange: React.ChangeEventHandler<HTMLInputElement>;
         selectedValue?: boolean | string | number | null;
+        onColoredBg?: boolean;
     }) => React.ReactNode;
     /** Additional class names applied to the fieldset */
     className?: string;
@@ -30,7 +31,10 @@ export interface RadioButtonInputGroupProps
      */
     extraMargin?: boolean;
     /** String or ErrorFieldMessage component with message */
-    fieldMessage?: React.ReactNode;
+    fieldMessage?:
+        | string
+        | React.ReactElement<{ onColoredBg?: boolean }>
+        | null;
     /**
      * Indicates whether the radio buttons inside this radio button group is
      * rendered inline or as a block.
@@ -53,6 +57,8 @@ export interface RadioButtonInputGroupProps
      * set
      * */
     tooltip?: React.ReactNode;
+    /** Adds alternative styling for better contrast on certain backgrounds */
+    onColoredBg?: boolean;
 }
 
 export const RadioButtonInputGroup: React.FC<RadioButtonInputGroupProps> = ({
@@ -67,6 +73,7 @@ export const RadioButtonInputGroup: React.FC<RadioButtonInputGroupProps> = ({
     selectedValue,
     tooltip,
     onChange,
+    onColoredBg,
     ...rest
 }) => {
     if (tooltip && description) {
@@ -81,6 +88,7 @@ export const RadioButtonInputGroup: React.FC<RadioButtonInputGroupProps> = ({
             aria-labelledby={id}
             className={classNames(
                 'ffe-input-group',
+                { 'ffe-input-group--on-colored-bg': onColoredBg },
                 { 'ffe-input-group--no-extra-margin': !extraMargin },
                 { 'ffe-input-group--message': !!fieldMessage },
                 className,
@@ -93,22 +101,22 @@ export const RadioButtonInputGroup: React.FC<RadioButtonInputGroupProps> = ({
                     className={classNames(
                         'ffe-form-label',
                         'ffe-form-label--block',
+                        { 'ffe-form-label--on-colored-bg': onColoredBg },
                     )}
                 >
                     {label}
                     {typeof tooltip === 'string' && (
-                        <Tooltip>{tooltip}</Tooltip>
+                        <Tooltip onColoredBg={onColoredBg}>{tooltip}</Tooltip>
                     )}
                     {React.isValidElement(tooltip) && tooltip}
                 </div>
             )}
 
-            {typeof description === 'string' ? (
-                <div className="ffe-small-text">{description}</div>
-            ) : (
-                description
+            {description && (
+                <div className="ffe-input-group__description ffe-small-text">
+                    {description}
+                </div>
             )}
-
             {children({
                 inline,
                 name,
@@ -116,12 +124,18 @@ export const RadioButtonInputGroup: React.FC<RadioButtonInputGroupProps> = ({
                     onChange?.(e);
                 },
                 selectedValue,
+                onColoredBg,
             })}
 
             {typeof fieldMessage === 'string' ? (
-                <ErrorFieldMessage as="p">{fieldMessage}</ErrorFieldMessage>
+                <ErrorFieldMessage as="p" onColoredBg={onColoredBg}>
+                    {fieldMessage}
+                </ErrorFieldMessage>
             ) : (
-                fieldMessage
+                React.isValidElement(fieldMessage) &&
+                React.cloneElement(fieldMessage, {
+                    onColoredBg,
+                })
             )}
         </fieldset>
     );
diff --git a/packages/ffe-form-react/src/Tooltip.spec.tsx b/packages/ffe-form-react/src/Tooltip.spec.tsx
index 5d9808cefa..d938a92342 100644
--- a/packages/ffe-form-react/src/Tooltip.spec.tsx
+++ b/packages/ffe-form-react/src/Tooltip.spec.tsx
@@ -75,4 +75,13 @@ describe('<Tooltip>', () => {
 
         expect(button.getAttribute('aria-controls')).toBe(tipId);
     });
+
+    it('ads the on colored on-colored-bg modifier', () => {
+        const { container } = renderTooltip({ onColoredBg: true });
+        const tooltip = container.querySelector('.ffe-tooltip');
+        expect(tooltip?.classList.contains('ffe-tooltip')).toBeTruthy();
+        expect(
+            tooltip?.classList.contains('ffe-tooltip--on-colored-bg'),
+        ).toBeTruthy();
+    });
 });
diff --git a/packages/ffe-form-react/src/Tooltip.tsx b/packages/ffe-form-react/src/Tooltip.tsx
index ad82963fde..92ad142e1c 100644
--- a/packages/ffe-form-react/src/Tooltip.tsx
+++ b/packages/ffe-form-react/src/Tooltip.tsx
@@ -15,6 +15,8 @@ export interface TooltipProps
     > {
     containerProps?: React.ComponentPropsWithoutRef<'div'>;
     isOpen?: boolean;
+    /** Adds alternative styling for better contrast on certain backgrounds */
+    onColoredBg?: boolean;
 }
 
 export const Tooltip = React.forwardRef<HTMLButtonElement, TooltipProps>(
@@ -28,6 +30,7 @@ export const Tooltip = React.forwardRef<HTMLButtonElement, TooltipProps>(
             onClick,
             tabIndex,
             containerProps,
+            onColoredBg,
         },
         ref,
     ) => {
@@ -50,6 +53,7 @@ export const Tooltip = React.forwardRef<HTMLButtonElement, TooltipProps>(
                 {...containerProps}
                 className={classNames('ffe-tooltip', {
                     'ffe-tooltip--open': isOpen,
+                    'ffe-tooltip--on-colored-bg': onColoredBg,
                 })}
             >
                 <button
diff --git a/packages/ffe-form-react/src/message/BaseFieldMessage.spec.tsx b/packages/ffe-form-react/src/message/BaseFieldMessage.spec.tsx
index 6710608ef0..44fc3ac626 100644
--- a/packages/ffe-form-react/src/message/BaseFieldMessage.spec.tsx
+++ b/packages/ffe-form-react/src/message/BaseFieldMessage.spec.tsx
@@ -31,4 +31,15 @@ describe('<BaseFieldMessage>', () => {
             alert.classList.contains('ffe-field-message--success'),
         ).toBeTruthy();
     });
+    it('ads the on colored on-colored-bg modifier', () => {
+        renderBassFieldMessage({ type: 'success', onColoredBg: true });
+        const alert = screen.getByRole('alert');
+        expect(alert.classList.contains('ffe-field-message')).toBeTruthy();
+        expect(
+            alert.classList.contains('ffe-field-message--success'),
+        ).toBeTruthy();
+        expect(
+            alert.classList.contains('ffe-field-message--on-colored-bg'),
+        ).toBeTruthy();
+    });
 });
diff --git a/packages/ffe-form-react/src/message/BaseFieldMessage.tsx b/packages/ffe-form-react/src/message/BaseFieldMessage.tsx
index 48509b41e1..12a55153ec 100644
--- a/packages/ffe-form-react/src/message/BaseFieldMessage.tsx
+++ b/packages/ffe-form-react/src/message/BaseFieldMessage.tsx
@@ -7,6 +7,8 @@ export type BaseFieldMessageProps<As extends ElementType = any> =
     ComponentWithoutRefAsPropParams<As> & {
         type: 'success' | 'info' | 'error';
         role: 'status' | 'alert' | 'none';
+        /** Adds alternative styling for better contrast on certain backgrounds */
+        onColoredBg?: boolean;
     };
 
 /**
@@ -20,6 +22,7 @@ export const BaseFieldMessage: React.FC<BaseFieldMessageProps> = props => {
         as: Comp = 'div',
         type,
         role = 'status',
+        onColoredBg,
         ...rest
     } = props;
 
@@ -36,6 +39,7 @@ export const BaseFieldMessage: React.FC<BaseFieldMessageProps> = props => {
         <Comp
             className={classNames(
                 `ffe-field-message`,
+                { 'ffe-field-message--on-colored-bg': onColoredBg },
                 `ffe-field-message--${type}`,
                 className,
             )}