diff --git a/src/assessments/headings/headings-instance-details-column-renderer.tsx b/src/assessments/headings/headings-instance-details-column-renderer.tsx
index b9434d60c55..5a4fd02246e 100644
--- a/src/assessments/headings/headings-instance-details-column-renderer.tsx
+++ b/src/assessments/headings/headings-instance-details-column-renderer.tsx
@@ -14,7 +14,7 @@ export function headingsAssessmentInstanceDetailsColumnRenderer(
     const headingLevel = propertyBag ? propertyBag.headingLevel : null;
     const labelText = headingLevel ? `H${item.instance.propertyBag.headingLevel}` : 'N/A';
     const headingStyle = headingLevel ? HeadingFormatter.headingStyles[headingLevel] : null;
-    const background = headingStyle ? headingStyle.borderColor : '#767676';
+    const background = headingStyle ? headingStyle.outlineColor : '#767676';
     let customClass: string = null;
 
     if (headingLevel == null) {
diff --git a/src/assessments/landmarks/landmarks-instance-details-column-renderer.tsx b/src/assessments/landmarks/landmarks-instance-details-column-renderer.tsx
index f6ef01afdc2..767a0b80cf0 100644
--- a/src/assessments/landmarks/landmarks-instance-details-column-renderer.tsx
+++ b/src/assessments/landmarks/landmarks-instance-details-column-renderer.tsx
@@ -11,7 +11,7 @@ export function landmarksAssessmentInstanceDetailsColumnRenderer(
     item: InstanceTableRow<LandmarksAssessmentProperties>,
 ): JSX.Element {
     const propertyBag = item.instance.propertyBag;
-    const background = LandmarkFormatter.getStyleForLandmarkRole(propertyBag.role).borderColor;
+    const background = LandmarkFormatter.getStyleForLandmarkRole(propertyBag.role).outlineColor;
     let textContent = propertyBag.role;
     if (propertyBag.label != null) {
         textContent += `: ${propertyBag.label}`;
diff --git a/src/assessments/page/frametitle-instance-details-column-renderer.tsx b/src/assessments/page/frametitle-instance-details-column-renderer.tsx
index 2ff52b7ca09..ccfc21c0370 100644
--- a/src/assessments/page/frametitle-instance-details-column-renderer.tsx
+++ b/src/assessments/page/frametitle-instance-details-column-renderer.tsx
@@ -16,7 +16,7 @@ export function frameTitleInstanceDetailsColumnRenderer(
 
     return (
         <AssessmentInstanceDetailsColumn
-            background={frameConfig.borderColor}
+            background={frameConfig.outlineColor}
             labelText={frameConfig.contentText}
             textContent={frameTitle}
         />
diff --git a/src/injected/scanner.d.ts b/src/injected/scanner.d.ts
index f70c086200e..908969fcc1f 100644
--- a/src/injected/scanner.d.ts
+++ b/src/injected/scanner.d.ts
@@ -23,13 +23,6 @@ declare interface AxeNodeResult {
     snippet?: string;
 }
 
-declare interface LandmarkValue {
-    selectors: string[];
-    label: string[];
-    borderColor: string;
-    fontColor: string;
-}
-
 declare function getAxeResults(
     rulesToTest: string[],
     successCallback: (axeResults: AxeResult) => void,
diff --git a/src/injected/styles/injected.scss b/src/injected/styles/injected.scss
index 7d70b0ef0c8..54e8d9055a9 100644
--- a/src/injected/styles/injected.scss
+++ b/src/injected/styles/injected.scss
@@ -255,34 +255,70 @@
         }
     }
 
-    .insights-highlight-container .insights-highlight-box {
-        visibility: visible !important;
-        position: absolute !important;
-        overflow: hidden !important;
-        pointer-events: none !important;
+    .insights-highlight-container {
+        .insights-highlight-box {
+            visibility: visible !important;
+            position: absolute !important;
+            overflow: hidden !important;
+            pointer-events: none !important;
+        }
 
-        @include ms-high-contrast-override {
-            forced-color-adjust: none;
-            outline-color: Highlight !important;
+        // This applies to both the text in highlight boxes and also the text
+        // in highlight circled used for tab/focus visualizers
+        .insights-highlight-text {
+            @include ms-high-contrast-override {
+                // Note that forced-color-adjust: none is required for highlight box labels'
+                // outline/box-shadows to be inherited correctly in HC mode, in addition to being
+                // required for color and background-color
+                forced-color-adjust: none;
+                color: HighlightText !important;
+                background-color: Highlight !important;
+            }
         }
-    }
 
-    .insights-highlight-container .insights-highlight-text {
-        @include ms-high-contrast-override {
-            forced-color-adjust: none;
-            color: HighlightText !important;
-            background-color: Highlight !important;
+        .insights-highlight-box .insights-highlight-text {
+            cursor: default !important;
+            pointer-events: all !important;
+            font-size: 1em !important;
+            padding: 0.3em !important;
+            float: right !important;
+            position: relative !important;
+            text-align: center !important;
+
+            // This results in the highlight box outline appearing to also run down the left edge of
+            // the label
+            outline: inherit !important;
+            outline-offset: inherit !important;
+            box-shadow: inherit !important;
+        }
+
+        .insights-highlight-outline-solid {
+            // Non-HC outline-color is intentionally unset; individual formatters should override it
+            outline-width: 2px !important;
+            outline-style: solid !important;
+            outline-offset: 1px !important;
+            box-shadow: 0 0 0 4px white !important;
+
+            @include ms-high-contrast-override {
+                forced-color-adjust: none;
+                outline-color: Highlight !important;
+                box-shadow: 0 0 0 4px HighlightText !important;
+            }
         }
-    }
 
-    .insights-highlight-container .insights-highlight-box .insights-highlight-text {
-        cursor: default !important;
-        pointer-events: all !important;
-        font-size: 1em !important;
-        padding: 0.3em !important;
-        float: right !important;
-        position: relative !important;
-        text-align: center !important;
+        .insights-highlight-outline-dashed {
+            // Non-HC outline-color is intentionally unset; individual formatters should override it
+            outline-width: 2px !important;
+            outline-style: dashed !important;
+            outline-offset: 1px !important;
+            box-shadow: 0 0 0 4px white !important;
+
+            @include ms-high-contrast-override {
+                forced-color-adjust: none;
+                outline-color: Highlight !important;
+                box-shadow: 0 0 0 4px HighlightText !important;
+            }
+        }
     }
 
     :host {
diff --git a/src/injected/visualization/accessible-names-formatter.ts b/src/injected/visualization/accessible-names-formatter.ts
index 4e9ca7b80fc..88e206a0346 100644
--- a/src/injected/visualization/accessible-names-formatter.ts
+++ b/src/injected/visualization/accessible-names-formatter.ts
@@ -17,7 +17,7 @@ export class AccessibleNamesFormatter implements Formatter {
     }
 
     public static style: HeadingStyleConfiguration = {
-        borderColor: '#8D4DFF',
+        outlineColor: '#8D4DFF',
         fontColor: '#FFFFFF',
     };
 
@@ -48,13 +48,13 @@ export class AccessibleNamesFormatter implements Formatter {
         const config: DrawerConfiguration = {
             textBoxConfig: {
                 fontColor: AccessibleNamesFormatter.style.fontColor,
-                background: AccessibleNamesFormatter.style.borderColor,
+                background: AccessibleNamesFormatter.style.outlineColor,
                 text: accessibleNameToDisplay?.accessibleName,
                 fontWeight: '400',
                 fontSize: '10px',
                 outline: '3px dashed',
             },
-            borderColor: AccessibleNamesFormatter.style.borderColor,
+            outlineColor: AccessibleNamesFormatter.style.outlineColor,
             outlineStyle: 'dashed',
             outlineWidth: '3px',
             showVisualization: true,
diff --git a/src/injected/visualization/base-drawer.ts b/src/injected/visualization/base-drawer.ts
index ee83a9c5738..6e1a90b2cfb 100644
--- a/src/injected/visualization/base-drawer.ts
+++ b/src/injected/visualization/base-drawer.ts
@@ -28,7 +28,7 @@ export abstract class BaseDrawer implements Drawer {
         windowUtils: WindowUtils,
         shadowUtils: ShadowUtils,
         drawerUtils: DrawerUtils,
-        formatter: Formatter = null,
+        formatter: Formatter,
     ) {
         this.dom = dom;
         this.containerClass = containerClass;
diff --git a/src/injected/visualization/formatter.ts b/src/injected/visualization/formatter.ts
index 991aeb44ad4..ebd896b1431 100644
--- a/src/injected/visualization/formatter.ts
+++ b/src/injected/visualization/formatter.ts
@@ -5,9 +5,8 @@ import { DialogRenderer } from '../dialog-renderer';
 import { AxeResultsWithFrameLevel } from '../frameCommunicators/html-element-axe-results-helper';
 
 export interface DrawerConfiguration extends SimpleHighlightDrawerConfiguration {
-    outlineStyle?: string;
-    outlineWidth?: string;
-    borderColor: string;
+    outlineStyle?: 'solid' | 'dashed';
+    outlineColor?: string;
     showVisualization: boolean;
     failureBoxConfig?: FailureBoxConfig;
     toolTip?: string;
@@ -38,7 +37,6 @@ export interface BoxConfig {
     boxWidth?: string;
     fontSize?: string;
     fontWeight?: string;
-    outline?: string;
 }
 
 export interface StrokeConfiguration {
diff --git a/src/injected/visualization/frame-formatter.ts b/src/injected/visualization/frame-formatter.ts
index cf5376a3058..92f7888ea96 100644
--- a/src/injected/visualization/frame-formatter.ts
+++ b/src/injected/visualization/frame-formatter.ts
@@ -6,7 +6,7 @@ import { FailureInstanceFormatter } from './failure-instance-formatter';
 import { DrawerConfiguration } from './formatter';
 
 export interface FrameStyleConfiguration {
-    borderColor: string;
+    outlineColor: string;
     fontColor: string;
     contentText: string;
 }
@@ -14,17 +14,17 @@ export interface FrameStyleConfiguration {
 export class FrameFormatter extends FailureInstanceFormatter {
     public static frameStyles: { [frameType: string]: FrameStyleConfiguration } = {
         frame: {
-            borderColor: '#0066CC',
+            outlineColor: '#0066CC',
             fontColor: '#FFFFFF',
             contentText: 'F',
         },
         iframe: {
-            borderColor: '#00CC00',
+            outlineColor: '#00CC00',
             fontColor: '#FFFFFF',
             contentText: 'I',
         },
         default: {
-            borderColor: '#C00000',
+            outlineColor: '#C00000',
             fontColor: '#FFFFFF',
             contentText: '',
         },
@@ -45,9 +45,9 @@ export class FrameFormatter extends FailureInstanceFormatter {
             textBoxConfig: {
                 fontColor: style.fontColor,
                 text: style.contentText,
-                background: style.borderColor,
+                background: style.outlineColor,
             },
-            borderColor: style.borderColor,
+            outlineColor: style.outlineColor,
             outlineStyle: 'solid',
             showVisualization: true,
             textAlign: 'center',
diff --git a/src/injected/visualization/heading-formatter.ts b/src/injected/visualization/heading-formatter.ts
index 52a7a93948b..0cb1621cf34 100644
--- a/src/injected/visualization/heading-formatter.ts
+++ b/src/injected/visualization/heading-formatter.ts
@@ -7,7 +7,7 @@ import { FailureInstanceFormatter } from './failure-instance-formatter';
 import { DrawerConfiguration } from './formatter';
 
 export interface HeadingStyleConfiguration {
-    borderColor: string;
+    outlineColor: string;
     fontColor: string;
 }
 
@@ -25,31 +25,31 @@ export class HeadingFormatter extends FailureInstanceFormatter {
 
     public static headingStyles: { [level: string]: HeadingStyleConfiguration } = {
         '1': {
-            borderColor: '#0066CC',
+            outlineColor: '#0066CC',
             fontColor: '#FFFFFF',
         },
         '2': {
-            borderColor: '#CC0099',
+            outlineColor: '#CC0099',
             fontColor: '#FFFFFF',
         },
         '3': {
-            borderColor: '#008000',
+            outlineColor: '#008000',
             fontColor: '#FFFFFF',
         },
         '4': {
-            borderColor: '#6600CC',
+            outlineColor: '#6600CC',
             fontColor: '#FFFFFF',
         },
         '5': {
-            borderColor: '#008080',
+            outlineColor: '#008080',
             fontColor: '#FFFFFF',
         },
         '6': {
-            borderColor: '#996633',
+            outlineColor: '#996633',
             fontColor: '#FFFFFF',
         },
         blank: {
-            borderColor: '#C00000',
+            outlineColor: '#C00000',
             fontColor: '#FFFFFF',
         },
     };
@@ -72,9 +72,9 @@ export class HeadingFormatter extends FailureInstanceFormatter {
             textBoxConfig: {
                 fontColor: style.fontColor,
                 text,
-                background: style.borderColor,
+                background: style.outlineColor,
             },
-            borderColor: style.borderColor,
+            outlineColor: style.outlineColor,
             outlineStyle: 'solid',
             showVisualization: true,
             textAlign: 'center',
diff --git a/src/injected/visualization/highlight-box-drawer.ts b/src/injected/visualization/highlight-box-drawer.ts
index 1eabb3bad39..4a9b843713d 100644
--- a/src/injected/visualization/highlight-box-drawer.ts
+++ b/src/injected/visualization/highlight-box-drawer.ts
@@ -22,18 +22,6 @@ export class HighlightBoxDrawer extends BaseDrawer {
     protected dialogRenderer: DialogRenderer;
     private clientUtils: ClientUtils;
 
-    public static defaultConfiguration: DrawerConfiguration = {
-        borderColor: 'rgb(255, 255, 255)',
-        textBoxConfig: {
-            fontColor: 'rgb(255, 255, 255)',
-            background: '#FFFFFF',
-            text: null,
-            boxWidth: '2em',
-        },
-        outlineStyle: 'solid',
-        showVisualization: true,
-    };
-
     constructor(
         dom: Document,
         containerClass: string,
@@ -41,14 +29,12 @@ export class HighlightBoxDrawer extends BaseDrawer {
         shadowUtils: ShadowUtils,
         drawerUtils: DrawerUtils,
         clientUtils: ClientUtils,
-        formatter: Formatter = null,
+        formatter: Formatter,
         private readonly getElementsToHighlight: typeof getTargetElementsFromResult = getTargetElementsFromResult,
     ) {
         super(dom, containerClass, windowUtils, shadowUtils, drawerUtils, formatter);
         this.clientUtils = clientUtils;
-        if (this.formatter) {
-            this.dialogRenderer = this.formatter.getDialogRenderer();
-        }
+        this.dialogRenderer = this.formatter?.getDialogRenderer();
     }
 
     public initialize(config: DrawerInitData<HtmlElementAxeResults>): void {
@@ -74,13 +60,10 @@ export class HighlightBoxDrawer extends BaseDrawer {
         const body = currentDom.body;
         const bodyStyle = this.windowUtils.getComputedStyle(body);
 
-        let drawerConfig = HighlightBoxDrawer.defaultConfiguration;
-        if (this.formatter) {
-            drawerConfig = this.formatter.getDrawerConfiguration(
-                element,
-                data,
-            ) as DrawerConfiguration;
-        }
+        const drawerConfig = this.formatter.getDrawerConfiguration(
+            element,
+            data,
+        ) as DrawerConfiguration;
 
         let elementBoundingClientRect: BoundingRect = element.getBoundingClientRect();
         if (drawerConfig.getBoundingRect) {
@@ -106,10 +89,10 @@ export class HighlightBoxDrawer extends BaseDrawer {
         }
 
         const wrapper = currentDom.createElement('div');
-        wrapper.setAttribute('class', 'insights-highlight-box');
-        wrapper.style.outlineStyle = drawerConfig.outlineStyle;
-        wrapper.style.outlineColor = drawerConfig.borderColor;
-        wrapper.style.outlineWidth = drawerConfig.outlineWidth;
+        wrapper.classList.add('insights-highlight-box');
+        wrapper.classList.add(`insights-highlight-outline-${drawerConfig.outlineStyle ?? 'solid'}`);
+        wrapper.style.outlineColor = drawerConfig.outlineColor;
+
         wrapper.style.top = this.drawerUtils.getContainerTopOffset(offset).toString() + 'px';
         wrapper.style.left = this.drawerUtils.getContainerLeftOffset(offset).toString() + 'px';
         wrapper.style.minWidth =
@@ -178,7 +161,6 @@ export class HighlightBoxDrawer extends BaseDrawer {
         box.style.color = boxConfig.fontColor;
         box.style.fontSize = boxConfig.fontSize;
         box.style.fontWeight = boxConfig.fontWeight;
-        box.style.outline = boxConfig.outline;
         box.style.setProperty('width', boxConfig.boxWidth, 'important');
         box.style.setProperty('cursor', drawerConfig.cursor, 'important');
         box.style.setProperty('text-align', drawerConfig.textAlign, 'important');
diff --git a/src/injected/visualization/highlight-box-formatter.ts b/src/injected/visualization/highlight-box-formatter.ts
index 7b599447831..9ef713a4787 100644
--- a/src/injected/visualization/highlight-box-formatter.ts
+++ b/src/injected/visualization/highlight-box-formatter.ts
@@ -21,7 +21,7 @@ export class HighlightBoxFormatter extends FailureInstanceFormatter {
     ): DrawerConfiguration {
         const drawerConfig: DrawerConfiguration = {
             failureBoxConfig: this.getFailureBoxConfig(data),
-            borderColor: IssuesFormatter.style.borderColor,
+            outlineColor: IssuesFormatter.style.outlineColor,
             outlineStyle: 'solid',
             showVisualization: true,
             textAlign: 'center',
diff --git a/src/injected/visualization/issues-formatter.ts b/src/injected/visualization/issues-formatter.ts
index b9ae1ca2153..acc7f734f17 100644
--- a/src/injected/visualization/issues-formatter.ts
+++ b/src/injected/visualization/issues-formatter.ts
@@ -42,7 +42,7 @@ export class IssuesFormatter implements Formatter {
     }
 
     public static style: HeadingStyleConfiguration = {
-        borderColor: '#E81123',
+        outlineColor: '#E81123',
         fontColor: '#FFFFFF',
     };
 
@@ -52,15 +52,14 @@ export class IssuesFormatter implements Formatter {
     ): DrawerConfiguration {
         const config: DrawerConfiguration = {
             failureBoxConfig: {
-                background: IssuesFormatter.style.borderColor,
+                background: IssuesFormatter.style.outlineColor,
                 fontColor: '#FFFFFF',
                 text: '!',
                 hasDialogView: true,
                 boxWidth: '2em',
             },
-            borderColor: IssuesFormatter.style.borderColor,
+            outlineColor: IssuesFormatter.style.outlineColor,
             toolTip: this.getText(data),
-            outlineStyle: 'solid',
             showVisualization: true,
             textAlign: 'center',
             cursor: 'pointer',
diff --git a/src/injected/visualization/landmark-formatter.ts b/src/injected/visualization/landmark-formatter.ts
index 7c8b9cf2407..db96bac4595 100644
--- a/src/injected/visualization/landmark-formatter.ts
+++ b/src/injected/visualization/landmark-formatter.ts
@@ -18,41 +18,41 @@ interface ElemData {
 export class LandmarkFormatter extends FailureInstanceFormatter {
     private static readonly landmarkStyles: { [role: string]: HeadingStyleConfiguration } = {
         banner: {
-            borderColor: '#d08311',
+            outlineColor: '#d08311',
             fontColor: '#ffffff',
         },
         complementary: {
-            borderColor: '#6b9d1a',
+            outlineColor: '#6b9d1a',
             fontColor: '#ffffff',
         },
         contentinfo: {
-            borderColor: '#00a88c',
+            outlineColor: '#00a88c',
             fontColor: '#ffffff',
         },
         form: {
-            borderColor: '#0298c7',
+            outlineColor: '#0298c7',
             fontColor: '#ffffff',
         },
         main: {
-            borderColor: '#cb2e6d',
+            outlineColor: '#cb2e6d',
             fontColor: '#ffffff',
         },
         navigation: {
-            borderColor: '#9b38e6',
+            outlineColor: '#9b38e6',
             fontColor: '#ffffff',
         },
         region: {
-            borderColor: '#2560e0',
+            outlineColor: '#2560e0',
             fontColor: '#ffffff',
         },
         search: {
-            borderColor: '#d363d8',
+            outlineColor: '#d363d8',
             fontColor: '#ffffff',
         },
     };
 
     private static readonly invalidLandmarkStyle: HeadingStyleConfiguration = {
-        borderColor: '#C00000',
+        outlineColor: '#C00000',
         fontColor: '#FFFFFF',
     };
 
@@ -76,15 +76,13 @@ export class LandmarkFormatter extends FailureInstanceFormatter {
         const drawerConfig: DrawerConfiguration = {
             textBoxConfig: {
                 fontColor: style.fontColor,
-                background: style.borderColor,
+                background: style.outlineColor,
                 text: elemData.label,
                 fontSize: '14pt !important',
                 fontWeight: '600',
-                outline: `3px dashed ${style.borderColor}`,
             },
-            borderColor: style.borderColor,
+            outlineColor: style.outlineColor,
             outlineStyle: 'dashed',
-            outlineWidth: '3px',
             showVisualization: true,
         };
 
diff --git a/src/injected/visualization/table-headers-formatter.ts b/src/injected/visualization/table-headers-formatter.ts
index 6aff7ae2aa3..772d1552a7e 100644
--- a/src/injected/visualization/table-headers-formatter.ts
+++ b/src/injected/visualization/table-headers-formatter.ts
@@ -25,7 +25,7 @@ export class TableHeadersAttributeFormatter extends FailureInstanceFormatter {
         const isHeader = element.matches('th');
 
         const style = {
-            borderColor: isHeader ? this.headerColor : this.cellColor,
+            outlineColor: isHeader ? this.headerColor : this.cellColor,
             fontColor: '#FFFFFF',
         };
 
@@ -35,9 +35,9 @@ export class TableHeadersAttributeFormatter extends FailureInstanceFormatter {
             textBoxConfig: {
                 fontColor: style.fontColor,
                 text,
-                background: style.borderColor,
+                background: style.outlineColor,
             },
-            borderColor: style.borderColor,
+            outlineColor: style.outlineColor,
             outlineStyle: 'solid',
             showVisualization: true,
             textAlign: 'right',
diff --git a/src/tests/end-to-end/tests/popup/__snapshots__/adhoc-panel.test.ts.snap b/src/tests/end-to-end/tests/popup/__snapshots__/adhoc-panel.test.ts.snap
index bd08734e220..c178e08f4c0 100644
--- a/src/tests/end-to-end/tests/popup/__snapshots__/adhoc-panel.test.ts.snap
+++ b/src/tests/end-to-end/tests/popup/__snapshots__/adhoc-panel.test.ts.snap
@@ -19,8 +19,8 @@ exports[`Popup -> Ad-hoc tools should display the pinned target page visualizati
       class="insights-container insights-highlight-container insights-issues"
     >
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title="Failed rules: frame-title"
       >
         <div
@@ -31,8 +31,8 @@ exports[`Popup -> Ad-hoc tools should display the pinned target page visualizati
         </div>
       </div>
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title="Failed rules: frame-title"
       >
         <div
@@ -43,8 +43,8 @@ exports[`Popup -> Ad-hoc tools should display the pinned target page visualizati
         </div>
       </div>
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title="Failed rules: frame-title"
       >
         <div
@@ -55,8 +55,8 @@ exports[`Popup -> Ad-hoc tools should display the pinned target page visualizati
         </div>
       </div>
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title="Failed rules: html-has-lang"
       >
         <div
@@ -109,8 +109,8 @@ exports[`Popup -> Ad-hoc tools should display the pinned target page visualizati
       class="insights-container insights-highlight-container insights-heading"
     >
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(0, 102, 204); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(0, 102, 204); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title=""
       >
         <div
@@ -121,8 +121,8 @@ exports[`Popup -> Ad-hoc tools should display the pinned target page visualizati
         </div>
       </div>
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(0, 102, 204); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(0, 102, 204); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title=""
       >
         <div
@@ -133,8 +133,8 @@ exports[`Popup -> Ad-hoc tools should display the pinned target page visualizati
         </div>
       </div>
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(0, 102, 204); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(0, 102, 204); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title=""
       >
         <div
diff --git a/src/tests/end-to-end/tests/target-page/__snapshots__/visualization-boxes.test.ts.snap b/src/tests/end-to-end/tests/target-page/__snapshots__/visualization-boxes.test.ts.snap
index eae1d96c4d4..6665318951f 100644
--- a/src/tests/end-to-end/tests/target-page/__snapshots__/visualization-boxes.test.ts.snap
+++ b/src/tests/end-to-end/tests/target-page/__snapshots__/visualization-boxes.test.ts.snap
@@ -19,8 +19,8 @@ exports[`Target Page visualization boxes visualization boxes are shown over elem
       class="insights-container insights-highlight-container insights-issues"
     >
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title="Failed rules: color-contrast"
       >
         <div
@@ -31,8 +31,8 @@ exports[`Target Page visualization boxes visualization boxes are shown over elem
         </div>
       </div>
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title="Failed rules: color-contrast"
       >
         <div
@@ -43,8 +43,8 @@ exports[`Target Page visualization boxes visualization boxes are shown over elem
         </div>
       </div>
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title="Failed rules: document-title, html-has-lang"
       >
         <div
@@ -78,8 +78,8 @@ exports[`Target Page visualization boxes visualization boxes are shown over nest
       class="insights-container insights-highlight-container insights-issues"
     >
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title="Failed rules: color-contrast"
       >
         <div
@@ -113,8 +113,8 @@ exports[`Target Page visualization boxes visualization boxes are shown over shad
       class="insights-container insights-highlight-container insights-issues"
     >
       <div
-        class="insights-highlight-box"
-        style="outline-style: solid; outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
+        class="insights-highlight-box insights-highlight-outline-solid"
+        style="outline-color: rgb(232, 17, 35); top: {{ENVIRONMENT_SENSITIVE_POSITION}}px; left: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-width: {{ENVIRONMENT_SENSITIVE_POSITION}}px; min-height: {{ENVIRONMENT_SENSITIVE_POSITION}}px;"
         title="Failed rules: color-contrast"
       >
         <div
diff --git a/src/tests/unit/tests/assessments/frametitle-instance-details-column-renderer.test.tsx b/src/tests/unit/tests/assessments/frametitle-instance-details-column-renderer.test.tsx
index cc75a2f68f3..627be159003 100644
--- a/src/tests/unit/tests/assessments/frametitle-instance-details-column-renderer.test.tsx
+++ b/src/tests/unit/tests/assessments/frametitle-instance-details-column-renderer.test.tsx
@@ -18,7 +18,7 @@ describe('FrameTitleInstanceDetailsColumnRendererTest', () => {
         } as InstanceTableRow<FrameAssessmentProperties>;
         const expected = (
             <AssessmentInstanceDetailsColumn
-                background={FrameFormatter.frameStyles[frameType].borderColor}
+                background={FrameFormatter.frameStyles[frameType].outlineColor}
                 labelText={FrameFormatter.frameStyles[frameType].contentText}
                 textContent={null}
             />
@@ -39,7 +39,7 @@ describe('FrameTitleInstanceDetailsColumnRendererTest', () => {
         } as InstanceTableRow<FrameAssessmentProperties>;
         const expected = (
             <AssessmentInstanceDetailsColumn
-                background={FrameFormatter.frameStyles[frameType].borderColor}
+                background={FrameFormatter.frameStyles[frameType].outlineColor}
                 labelText={FrameFormatter.frameStyles[frameType].contentText}
                 textContent={frameTitle}
             />
@@ -60,7 +60,7 @@ describe('FrameTitleInstanceDetailsColumnRendererTest', () => {
         } as InstanceTableRow<FrameAssessmentProperties>;
         const expected = (
             <AssessmentInstanceDetailsColumn
-                background={FrameFormatter.frameStyles[frameType].borderColor}
+                background={FrameFormatter.frameStyles[frameType].outlineColor}
                 labelText={FrameFormatter.frameStyles[frameType].contentText}
                 textContent={frameTitle}
             />
diff --git a/src/tests/unit/tests/assessments/headings-instance-details-column-renderer.test.tsx b/src/tests/unit/tests/assessments/headings-instance-details-column-renderer.test.tsx
index 06d42901079..5e4de10bf66 100644
--- a/src/tests/unit/tests/assessments/headings-instance-details-column-renderer.test.tsx
+++ b/src/tests/unit/tests/assessments/headings-instance-details-column-renderer.test.tsx
@@ -37,7 +37,7 @@ describe('HeadingsInstanceDetailsColumnRendererTest', () => {
         } as InstanceTableRow<HeadingsAssessmentProperties>;
         const expected = (
             <AssessmentInstanceDetailsColumn
-                background={HeadingFormatter.headingStyles['3'].borderColor}
+                background={HeadingFormatter.headingStyles['3'].outlineColor}
                 labelText={'H3'}
                 textContent={'heading'}
                 customClassName={null}
diff --git a/src/tests/unit/tests/assessments/landmarks-instance-details-column-renderer.test.tsx b/src/tests/unit/tests/assessments/landmarks-instance-details-column-renderer.test.tsx
index 00b5c393481..f7bfd7584c4 100644
--- a/src/tests/unit/tests/assessments/landmarks-instance-details-column-renderer.test.tsx
+++ b/src/tests/unit/tests/assessments/landmarks-instance-details-column-renderer.test.tsx
@@ -20,7 +20,7 @@ describe('LandmarksInstanceDetailsColumnRendererTest', () => {
         } as InstanceTableRow<LandmarksAssessmentProperties>;
         const expected = (
             <AssessmentInstanceDetailsColumn
-                background={LandmarkFormatter.getStyleForLandmarkRole('banner').borderColor}
+                background={LandmarkFormatter.getStyleForLandmarkRole('banner').outlineColor}
                 textContent={'banner: label'}
                 customClassName="radio"
             />
@@ -39,7 +39,7 @@ describe('LandmarksInstanceDetailsColumnRendererTest', () => {
         } as InstanceTableRow<LandmarksAssessmentProperties>;
         const expected = (
             <AssessmentInstanceDetailsColumn
-                background={LandmarkFormatter.getStyleForLandmarkRole('banner').borderColor}
+                background={LandmarkFormatter.getStyleForLandmarkRole('banner').outlineColor}
                 textContent={'banner'}
                 customClassName="radio"
             />
diff --git a/src/tests/unit/tests/injected/visualization/__snapshots__/table-headers-formatter.test.ts.snap b/src/tests/unit/tests/injected/visualization/__snapshots__/table-headers-formatter.test.ts.snap
index 95f72b6a84e..1020411b681 100644
--- a/src/tests/unit/tests/injected/visualization/__snapshots__/table-headers-formatter.test.ts.snap
+++ b/src/tests/unit/tests/injected/visualization/__snapshots__/table-headers-formatter.test.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`TableHeadersAttributeFormatter getDrawerConfiguration - td headers=headers role=null id=id 1`] = `
 {
-  "borderColor": "#6600CC",
   "failureBoxConfig": null,
+  "outlineColor": "#6600CC",
   "outlineStyle": "solid",
   "showVisualization": true,
   "textAlign": "right",
@@ -17,8 +17,8 @@ exports[`TableHeadersAttributeFormatter getDrawerConfiguration - td headers=head
 
 exports[`TableHeadersAttributeFormatter getDrawerConfiguration - td headers=headers role=null id=null 1`] = `
 {
-  "borderColor": "#6600CC",
   "failureBoxConfig": null,
+  "outlineColor": "#6600CC",
   "outlineStyle": "solid",
   "showVisualization": true,
   "textAlign": "right",
@@ -32,8 +32,8 @@ exports[`TableHeadersAttributeFormatter getDrawerConfiguration - td headers=head
 
 exports[`TableHeadersAttributeFormatter getDrawerConfiguration - th headers=headers role=null id=id 1`] = `
 {
-  "borderColor": "#0066CC",
   "failureBoxConfig": null,
+  "outlineColor": "#0066CC",
   "outlineStyle": "solid",
   "showVisualization": true,
   "textAlign": "right",
@@ -47,8 +47,8 @@ exports[`TableHeadersAttributeFormatter getDrawerConfiguration - th headers=head
 
 exports[`TableHeadersAttributeFormatter getDrawerConfiguration - th headers=null role=null id=id 1`] = `
 {
-  "borderColor": "#0066CC",
   "failureBoxConfig": null,
+  "outlineColor": "#0066CC",
   "outlineStyle": "solid",
   "showVisualization": true,
   "textAlign": "right",
diff --git a/src/tests/unit/tests/injected/visualization/accessible-names-formatter.test.ts b/src/tests/unit/tests/injected/visualization/accessible-names-formatter.test.ts
index d3f51de6347..7ea3bce081e 100644
--- a/src/tests/unit/tests/injected/visualization/accessible-names-formatter.test.ts
+++ b/src/tests/unit/tests/injected/visualization/accessible-names-formatter.test.ts
@@ -40,9 +40,8 @@ describe('AccessibleNamesFormatterTests', () => {
     });
 
     function testStyling(Drawerconfig: DrawerConfiguration, accessibleText: string) {
-        expect(Drawerconfig.borderColor).toBe('#8D4DFF');
+        expect(Drawerconfig.outlineColor).toBe('#8D4DFF');
         expect(Drawerconfig.outlineStyle).toBe('dashed');
-        expect(Drawerconfig.outlineWidth).toBe('3px');
         expect(Drawerconfig.showVisualization).toBe(true);
         expect(Drawerconfig.textBoxConfig.fontColor).toBe('#FFFFFF');
         expect(Drawerconfig.textBoxConfig.background).toBe('#8D4DFF');
diff --git a/src/tests/unit/tests/injected/visualization/drawer.test.ts b/src/tests/unit/tests/injected/visualization/drawer.test.ts
index bebcd910a74..96261b34cc0 100644
--- a/src/tests/unit/tests/injected/visualization/drawer.test.ts
+++ b/src/tests/unit/tests/injected/visualization/drawer.test.ts
@@ -274,7 +274,7 @@ describe('Drawer', () => {
             bottom: 2003,
         };
         const configStub: DrawerConfiguration = {
-            borderColor: 'rgb(255, 255, 255)',
+            outlineColor: 'rgb(255, 255, 255)',
             textBoxConfig: {
                 fontColor: 'rgb(255, 255, 255)',
                 background: '#FFFFFF',
@@ -1101,7 +1101,7 @@ describe('Drawer', () => {
         `;
 
         const element1Config: DrawerConfiguration = {
-            borderColor: 'rgb(12, 13, 14)',
+            outlineColor: 'rgb(12, 13, 14)',
             textBoxConfig: {
                 fontColor: 'rgb(100, 200, 0)',
                 text: 'element 1 text',
@@ -1118,14 +1118,14 @@ describe('Drawer', () => {
                 text: 'element 2 text',
                 background: 'rgb(10, 1, 15)',
             },
-            borderColor: 'rgb(10, 1, 15)',
+            outlineColor: 'rgb(12, 13, 14)',
             toolTip: 'element 2 tooltip',
             outlineStyle: 'dashed',
             showVisualization: true,
         };
 
         const element3Config: DrawerConfiguration = {
-            borderColor: 'rgb(12, 13, 14)',
+            outlineColor: 'rgb(12, 13, 14)',
             toolTip: 'element 3 tooltip',
             outlineStyle: 'solid',
             showVisualization: false,
@@ -1137,22 +1137,32 @@ describe('Drawer', () => {
                 text: 'element 4 text',
                 background: 'rgb(12, 13, 14)',
             },
-            borderColor: 'rgb(12, 13, 14)',
+            outlineColor: 'rgb(12, 13, 14)',
             toolTip: 'element 4 tooltip',
             outlineStyle: 'solid',
             showVisualization: true,
         };
 
-        class FormatterStub implements Formatter {
-            public getDrawerConfiguration(el: Node, data): DrawerConfiguration {
-                throw new Error('Not implemented');
+        class ConfigPerIdFormatterStub extends FormatterStub {
+            public constructor(
+                private readonly drawerConfigsById: {
+                    [id in string]: DrawerConfiguration;
+                },
+            ) {
+                super(null);
             }
 
-            public getDialogRenderer(): DialogRenderer {
-                return null;
+            public override getDrawerConfiguration(el: Node, data): DrawerConfiguration {
+                return this.drawerConfigsById[(el as Element).id];
             }
         }
-        const formatterMock = Mock.ofType(FormatterStub);
+
+        const formatterStub = new ConfigPerIdFormatterStub({
+            id1: element1Config,
+            id2: element2Config,
+            id3: element3Config,
+            id4: element4Config,
+        });
 
         windowUtilsMock
             .setup(wu => wu.getComputedStyle(It.isAny()))
@@ -1163,23 +1173,9 @@ describe('Drawer', () => {
 
         const elementResults = createElementResults(['#id1', '#id2', '#id3', '#id4']);
 
-        function addMockForElement(selector: string, config: DrawerConfiguration): void {
-            const elementResult = elementResults.filter(el => el.target[0] === selector)[0];
-            formatterMock
-                .setup(it =>
-                    it.getDrawerConfiguration(fakeDocument.querySelector(selector), elementResult),
-                )
-                .returns(() => config)
-                .verifiable();
-        }
-        addMockForElement('#id1', element1Config);
-        addMockForElement('#id2', element2Config);
-        addMockForElement('#id3', element3Config);
-        addMockForElement('#id4', element4Config);
-
         const testSubject = createDrawerBuilder()
             .setDomAndDrawerUtils(fakeDocument)
-            .setFormatter(formatterMock.object)
+            .setFormatter(formatterStub)
             .setWindowUtils(windowUtilsMock.object)
             .setDrawerUtils(getDrawerUtilsMock(fakeDocument).object)
             .build();
@@ -1188,7 +1184,6 @@ describe('Drawer', () => {
         await testSubject.drawLayout();
 
         expect(testSubject.isOverlayEnabled).toEqual(true);
-        formatterMock.verifyAll();
 
         const overlays = findCurrentDrawerOverlays();
 
@@ -1266,28 +1261,33 @@ describe('Drawer', () => {
 
     function verifyOverlayStyle(
         overlay: { container: HTMLDivElement; label: HTMLDivElement; failureLabel: HTMLDivElement },
-        drawerConfig: DrawerConfiguration = HighlightBoxDrawer.defaultConfiguration,
+        drawerConfig: DrawerConfiguration = FormatterStub.defaultStubDrawerConfiguration,
     ): void {
-        expect(overlay.container.style.outlineStyle).toEqual(drawerConfig.outlineStyle);
-        expect(overlay.container.style.outlineColor).toEqual(drawerConfig.borderColor);
+        expect(overlay.container.className).toEqual(
+            `insights-highlight-box insights-highlight-outline-${drawerConfig.outlineStyle}`,
+        );
+        expect(overlay.container.style.outlineColor).toEqual(drawerConfig.outlineColor);
         expect(overlay.container.style.top).toEqual('5px');
         expect(overlay.container.style.left).toEqual('5px');
         expect(overlay.container.style.minHeight).toEqual('0px');
         expect(overlay.container.style.minWidth).toEqual('0px');
         expect(overlay.container.title).toEqual(drawerConfig.toolTip || '');
-        expect(overlay.label.style.backgroundColor).toEqual(drawerConfig.borderColor);
         expect(overlay.label.style.textAlign).toEqual(drawerConfig.textAlign || '');
         expect(overlay.label.style.cursor).toEqual(drawerConfig.cursor || '');
         if (drawerConfig.textBoxConfig) {
             expect(overlay.label.innerText).toEqual(drawerConfig.textBoxConfig.text || '');
             expect(overlay.label.style.width).toEqual(drawerConfig.textBoxConfig.boxWidth || '');
             expect(overlay.label.style.color).toEqual(drawerConfig.textBoxConfig.fontColor);
+            expect(overlay.label.style.background).toEqual(drawerConfig.textBoxConfig.background);
             expect(overlay.label.className).toEqual('insights-highlight-text text-label');
         }
         if (drawerConfig.failureBoxConfig) {
             expect(overlay.label.innerText).toEqual(drawerConfig.failureBoxConfig.text || '');
             expect(overlay.label.style.width).toEqual(drawerConfig.failureBoxConfig.boxWidth || '');
             expect(overlay.label.style.color).toEqual(drawerConfig.failureBoxConfig.fontColor);
+            expect(overlay.label.style.background).toEqual(
+                drawerConfig.failureBoxConfig.background,
+            );
             expect(overlay.label.className).toEqual('insights-highlight-text failure-label');
         }
     }
@@ -1379,7 +1379,7 @@ describe('Drawer', () => {
     }
 
     function createDrawerBuilder(): DrawerBuilder {
-        return new DrawerBuilder(shadowUtilsMock.object);
+        return new DrawerBuilder(shadowUtilsMock.object).setFormatter(new FormatterStub());
     }
 
     function setupWindow(): void {
@@ -1440,3 +1440,29 @@ describe('Drawer', () => {
             .verifiable(Times.never());
     }
 });
+
+class FormatterStub implements Formatter {
+    public static readonly defaultStubDrawerConfiguration: DrawerConfiguration = {
+        outlineColor: 'rgb(1, 2, 3)',
+        outlineStyle: 'solid',
+        showVisualization: true,
+        textBoxConfig: {
+            fontColor: 'rgb(4, 5, 6)',
+            background: 'rgb(7, 8, 9)',
+            text: null,
+            boxWidth: '2em',
+        },
+    };
+
+    public constructor(
+        public readonly drawerConfiguration: DrawerConfiguration = FormatterStub.defaultStubDrawerConfiguration,
+    ) {}
+
+    public getDrawerConfiguration(el: Node, data): DrawerConfiguration {
+        return this.drawerConfiguration;
+    }
+
+    public getDialogRenderer(): DialogRenderer {
+        return null;
+    }
+}
diff --git a/src/tests/unit/tests/injected/visualization/heading-formatter.test.ts b/src/tests/unit/tests/injected/visualization/heading-formatter.test.ts
index 2f839c7cb4a..1a31a5db063 100644
--- a/src/tests/unit/tests/injected/visualization/heading-formatter.test.ts
+++ b/src/tests/unit/tests/injected/visualization/heading-formatter.test.ts
@@ -230,7 +230,7 @@ describe('HeadingFormatterTests', () => {
         text: string,
     ): void {
         expect(config.showVisualization).toBe(true);
-        expect(config.borderColor).toBe(headingStyle.borderColor);
+        expect(config.outlineColor).toBe(headingStyle.outlineColor);
         expect(config.textBoxConfig.fontColor).toBe(headingStyle.fontColor);
         expect(config.textBoxConfig.text).toBe(text);
     }
diff --git a/src/tests/unit/tests/injected/visualization/highlight-box-formatter.test.ts b/src/tests/unit/tests/injected/visualization/highlight-box-formatter.test.ts
index 3c23c6cae62..c5dd1efd1f7 100644
--- a/src/tests/unit/tests/injected/visualization/highlight-box-formatter.test.ts
+++ b/src/tests/unit/tests/injected/visualization/highlight-box-formatter.test.ts
@@ -17,7 +17,7 @@ describe('HighlightBoxFormatterTests', () => {
 
         expect(config.showVisualization).toBe(true);
         expect(config.failureBoxConfig).toBeNull();
-        expect(config.borderColor).toEqual('#E81123');
+        expect(config.outlineColor).toEqual('#E81123');
         expect(config.textAlign).toEqual('center');
     });
 
diff --git a/src/tests/unit/tests/injected/visualization/issues-formatter.test.ts b/src/tests/unit/tests/injected/visualization/issues-formatter.test.ts
index 6c07a0e81c8..f1d3b90ee18 100644
--- a/src/tests/unit/tests/injected/visualization/issues-formatter.test.ts
+++ b/src/tests/unit/tests/injected/visualization/issues-formatter.test.ts
@@ -78,7 +78,7 @@ describe('IssuesFormatterTests', () => {
         const config = testSubject.getDrawerConfiguration(htmlElement, axeData);
 
         expect(config.showVisualization).toBe(true);
-        expect(config.borderColor).toEqual(issuesStyle.borderColor);
+        expect(config.outlineColor).toEqual(issuesStyle.outlineColor);
         expect(config.failureBoxConfig.fontColor).toEqual(issuesStyle.fontColor);
         expect(config.failureBoxConfig.text).toEqual('!');
         expect(config.failureBoxConfig.boxWidth).toEqual('2em');
diff --git a/src/tests/unit/tests/injected/visualization/landmark-formatter.test.ts b/src/tests/unit/tests/injected/visualization/landmark-formatter.test.ts
index 2ecf95551d4..cfc8844c13d 100644
--- a/src/tests/unit/tests/injected/visualization/landmark-formatter.test.ts
+++ b/src/tests/unit/tests/injected/visualization/landmark-formatter.test.ts
@@ -113,12 +113,10 @@ describe('LandmarkFormatterTests', () => {
         const landmarkStyle = getLandmarkStyle(givenRole);
         expect(config.showVisualization).toBe(true);
         expect(config.outlineStyle).toEqual('dashed');
-        expect(config.outlineWidth).toBe('3px');
-        expect(config.borderColor).toEqual(landmarkStyle.borderColor);
+        expect(config.outlineColor).toEqual(landmarkStyle.outlineColor);
         expect(config.textBoxConfig.fontColor).toEqual(landmarkStyle.fontColor);
         expect(config.textBoxConfig.fontSize).toEqual('14pt !important');
         expect(config.textBoxConfig.fontWeight).toBe('600');
-        expect(config.textBoxConfig.outline).toBe(`3px dashed ${landmarkStyle.borderColor}`);
 
         if (isFailure) {
             expect(config.failureBoxConfig).toEqual(FailureInstanceFormatter.failureBoxConfig);