diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 6b80ddb839..d129374689 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -476,7 +476,5 @@
 // --------------------------------------------------
 
 .item-counter {
-  color: #{$item-md-input-counter-color};
-
   letter-spacing: #{$item-md-input-counter-letter-spacing};
 }
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 315879bea1..46d792fa76 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -539,9 +539,11 @@ ion-ripple-effect {
 .item-counter {
   @include margin-horizontal(auto, null);
 
-  padding-inline-start: 16px;
+  color: #{$background-color-step-550};
 
   white-space: nowrap;
+
+  padding-inline-start: 16px;
 }
 
 // Item: Reduced Motion
diff --git a/core/src/components/item/test/counter/e2e.ts b/core/src/components/item/test/counter/e2e.ts
index 875af2e1bc..b2f9851a09 100644
--- a/core/src/components/item/test/counter/e2e.ts
+++ b/core/src/components/item/test/counter/e2e.ts
@@ -2,15 +2,6 @@ import type { E2EPage } from '@stencil/core/testing';
 import { newE2EPage } from '@stencil/core/testing';
 
 describe('item: counter', () => {
-  it('should match existing visual screenshots', async () => {
-    const page = await newE2EPage({
-      url: '/src/components/item/test/counter?ionic:_testing=true',
-    });
-
-    const compare = await page.compareScreenshot();
-    expect(compare).toMatchScreenshot();
-  });
-
   describe('custom formatter', () => {
     let page: E2EPage;
 
diff --git a/core/src/components/item/test/counter/item.e2e.ts b/core/src/components/item/test/counter/item.e2e.ts
new file mode 100644
index 0000000000..aab8748def
--- /dev/null
+++ b/core/src/components/item/test/counter/item.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: counter', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/counter`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-counter-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2ce0b517d0
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..63b20c14fe
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9677857e49
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7bd5dbe8af
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7c6acb7896
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..eabba28792
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8d5acd6b77
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..99a4f87efa
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b6ee2fbc65
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3e2a445e17
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0e63b51784
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9923b8b88c
Binary files /dev/null and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Safari-linux.png differ