diff --git a/.github/workflows/playwright-test.yml b/.github/workflows/playwright-test.yml
index 343ec850..702d84b7 100644
--- a/.github/workflows/playwright-test.yml
+++ b/.github/workflows/playwright-test.yml
@@ -1,7 +1,5 @@
 name : Playwright E2E Test
-on:
-  pull_request:
-    branches: ['main']
+on: workflow_dispatch
 
 jobs:
   playwright-e2e-test:
diff --git a/app/components/CommentCard.tsx b/app/components/CommentCard.tsx
index c0db482d..8c166b68 100644
--- a/app/components/CommentCard.tsx
+++ b/app/components/CommentCard.tsx
@@ -106,7 +106,7 @@ export default function CommentCard({
         <button
           className={`flex items-center mr-4 bg-inherit rounded-md px-2 py-2 border ${
             isLiked ? "text-blue-500 fonr-bold" : ""
-          }`}
+          } comment-like-button`}
           onClick={() => (onCommentVote(commentId, "like"), setIsCommentLikeButtonPushed(true))}
           disabled={isCommentLikeButtonPushed || isLiked}
         >
@@ -118,7 +118,7 @@ export default function CommentCard({
         <button
           className={`flex items-center bg-inherit rounded-md px-2 py-2 border ${
             isDisliked ? "text-red-500 font-bold" : ""
-          }`}
+          } comment-dislike-button`}
           onClick={() => (onCommentVote(commentId, "dislike"), setIsCommentDislikeButtonPushed(true))}
           disabled={isCommentDislikeButtonPushed || isDisliked}
         >
diff --git a/app/components/ThemeSwitcher.tsx b/app/components/ThemeSwitcher.tsx
index acbd336e..3c20c093 100644
--- a/app/components/ThemeSwitcher.tsx
+++ b/app/components/ThemeSwitcher.tsx
@@ -1,12 +1,10 @@
 import { useEffect, useState } from "react";
 
 export default function ThemeSwitcher() {
-
-
-  const [nowTheme, setNowTheme] = useState<string>()
+  const [nowTheme, setNowTheme] = useState<string>();
 
   useEffect(() => {
-    if (window.localStorage.getItem("theme") === null){
+    if (window.localStorage.getItem("theme") === null) {
       const initialTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       window.localStorage.setItem("theme", initialTheme);
     }
@@ -17,18 +15,33 @@ export default function ThemeSwitcher() {
 
   const toggleTheme = () => {
     const newTheme = nowTheme == "dark" ? "light" : "dark";
-    console.log(newTheme);
     window.localStorage.setItem("theme", newTheme);
     setNowTheme(newTheme);
     document.querySelector("html")?.setAttribute("data-theme", newTheme);
   };
 
   return (
-    <label className="flex cursor-pointer gap-2">
-        {}
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
-      <input type="checkbox" checked={nowTheme == "dark"} onChange={toggleTheme} className="toggle theme-controller"/>
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-    </label>
+    <div className="flex items-center gap-2">
+      <label htmlFor="theme-switcher">
+        <span className="sr-only">テーマ切り替え</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="5" />
+          <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+        </svg>
+      </label>
+      <input
+        type="checkbox"
+        id="theme-switcher"
+        checked={nowTheme == "dark"}
+        onChange={toggleTheme}
+        className="toggle theme-controller"
+      />
+      <label htmlFor="theme-switcher">
+        <span className="sr-only">ダークモード</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+      </label>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/app/routes/_layout.tsx b/app/routes/_layout.tsx
index 698bc4ca..14c93691 100644
--- a/app/routes/_layout.tsx
+++ b/app/routes/_layout.tsx
@@ -56,7 +56,7 @@ export default function Component() {
       to={item.to}
       className={({ isActive }) =>
         `flex flex-col items-center justify-center text-base-content ${
-          isActive ? "text-blue-500 font-bold" : ""
+          isActive ? "text-info font-bold" : ""
         }`
       }
     >
diff --git a/package-lock.json b/package-lock.json
index 3686968a..2f6f3c4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,6 @@
     "": {
       "name": "healthy-person-emulator-dotorg",
       "dependencies": {
-        "@axe-core/playwright": "^4.8.5",
         "@estruyf/github-actions-reporter": "^1.6.0",
         "@marsidev/react-turnstile": "^0.5.3",
         "@prisma/client": "^5.12.0",
@@ -16,6 +15,7 @@
         "@supabase/supabase-js": "^2.40.0",
         "@uiw/react-md-editor": "^4.0.4",
         "@vercel/speed-insights": "^1.0.10",
+        "chalk": "^5.3.0",
         "clsx": "^2.1.0",
         "crypto-js": "^4.2.0",
         "csv-parse": "^5.5.5",
@@ -31,6 +31,7 @@
         "remix-utils": "^7.5.0"
       },
       "devDependencies": {
+        "@axe-core/playwright": "^4.9.0",
         "@playwright/test": "^1.42.1",
         "@remix-run/dev": "^2.8.1",
         "@types/marked": "^6.0.0",
@@ -113,20 +114,22 @@
       }
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.8.5",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.5.tgz",
-      "integrity": "sha512-GFdXXAEn9uk0Vyzgl2eEP+VwvgGzas0YSnacoJ/0U237G83zWZ1PhbP/RDymm0cqevoA+xRjMo+ONzh9Q711nw==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz",
+      "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==",
+      "dev": true,
       "dependencies": {
-        "axe-core": "~4.8.4"
+        "axe-core": "~4.9.0"
       },
       "peerDependencies": {
         "playwright-core": ">= 1.0.0"
       }
     },
     "node_modules/@axe-core/playwright/node_modules/axe-core": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.4.tgz",
-      "integrity": "sha512-CZLSKisu/bhJ2awW4kJndluz2HLZYIHh5Uy1+ZwDRkJi69811xgIXXfdU9HSLX0Th+ILrHj8qfL/5wzamsFtQg==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz",
+      "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -1740,6 +1743,22 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@remix-run/dev/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/@remix-run/express": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/@remix-run/express/-/express-2.8.1.tgz",
@@ -2665,6 +2684,22 @@
         "outdent": "^0.8.0"
       }
     },
+    "node_modules/@vanilla-extract/css/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/@vanilla-extract/integration": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@vanilla-extract/integration/-/integration-6.5.0.tgz",
@@ -3501,16 +3536,11 @@
       }
     },
     "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "engines": {
-        "node": ">=10"
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },
       "funding": {
         "url": "https://github.com/chalk/chalk?sponsor=1"
@@ -5045,6 +5075,22 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/eslint/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/eslint/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -8759,6 +8805,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/log-symbols/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -14201,6 +14263,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ora/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/outdent": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz",
diff --git a/package.json b/package.json
index 8adcd279..3acfe9e2 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@axe-core/playwright": "^4.8.5",
     "@estruyf/github-actions-reporter": "^1.6.0",
     "@marsidev/react-turnstile": "^0.5.3",
     "@prisma/client": "^5.12.0",
@@ -23,6 +22,7 @@
     "@supabase/supabase-js": "^2.40.0",
     "@uiw/react-md-editor": "^4.0.4",
     "@vercel/speed-insights": "^1.0.10",
+    "chalk": "^5.3.0",
     "clsx": "^2.1.0",
     "crypto-js": "^4.2.0",
     "csv-parse": "^5.5.5",
@@ -38,6 +38,7 @@
     "remix-utils": "^7.5.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.9.0",
     "@playwright/test": "^1.42.1",
     "@remix-run/dev": "^2.8.1",
     "@types/marked": "^6.0.0",
diff --git a/playwright.config.ts b/playwright.config.ts
index 73cce9ab..adc7cacf 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,23 +1,22 @@
 import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
-  testDir: './tests',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: [
-    ['list'],
-    ['@estruyf/github-actions-reporter']
-  ],
-  use: {
-    trace: 'on-first-retry',
-  },
+ testDir: './tests',
+ fullyParallel: true,
+ forbidOnly: !!process.env.CI,
+ retries: process.env.CI ? 2 : 0,
+ workers: process.env.CI ? 1 : undefined,
+ reporter: process.env.CI
+   ? [['list'], ['@estruyf/github-actions-reporter']]
+   : [['html']],
+ use: {
+   trace: 'on-first-retry',
+ },
 
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-  ],
-});
+ projects: [
+   {
+     name: 'chromium',
+     use: { ...devices['Desktop Chrome'] },
+   },
+ ],
+});
\ No newline at end of file
diff --git a/tests/axeTest.spec.ts b/tests/axeTest.spec.ts
new file mode 100644
index 00000000..9adba0ab
--- /dev/null
+++ b/tests/axeTest.spec.ts
@@ -0,0 +1,100 @@
+import { test, expect, Page } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+const testURL = process.env.TEST_URL || 'http://localhost:5173';
+
+import chalk from 'chalk';
+
+async function getAxeResults(page: Page) {
+ await page.getByLabel('ダークモード').uncheck();
+ const [accessibilityScanResultsLightMode] = await Promise.all([
+   new AxeBuilder({ page }).analyze(),
+ ]);
+ const violationsLightMode = accessibilityScanResultsLightMode.violations.filter(
+   (x) => x.impact === 'critical' || x.impact === 'serious'
+ );
+
+ console.log(chalk.bold('Light Mode Accessibility Results:'));
+ if (violationsLightMode.length === 0) {
+   console.log(chalk.green('No critical or serious violations found in light mode.'));
+ } else {
+   console.log(chalk.red(`Found ${violationsLightMode.length} critical or serious violations in light mode:`));
+   violationsLightMode.forEach((violation, index) => {
+     console.log(chalk.red(`${index + 1}. ${violation.description}`));
+   });
+ }
+
+ console.log('');
+
+ await page.getByLabel('ダークモード').check();
+ const [accessibilityScanResultsDarkMode] = await Promise.all([
+   new AxeBuilder({ page }).analyze(),
+ ]);
+ const violationsDarkMode = accessibilityScanResultsDarkMode.violations.filter(
+   (x) => x.impact === 'critical' || x.impact === 'serious'
+ );
+
+ console.log(chalk.bold('Dark Mode Accessibility Results:'));
+ if (violationsDarkMode.length === 0) {
+   console.log(chalk.green('No critical or serious violations found in dark mode.'));
+ } else {
+   console.log(chalk.red(`Found ${violationsDarkMode.length} critical or serious violations in dark mode:`));
+   violationsDarkMode.forEach((violation, index) => {
+     console.log(chalk.red(`${index + 1}. ${violation.description}`));
+   });
+ }
+
+ expect(violationsLightMode).toEqual([]);
+ expect(violationsDarkMode).toEqual([]);
+}
+
+test.describe('自動アクセシビリティチェック', () => {
+  /*
+  ランダムページは実質トップページと同じなので省略
+  */
+  test('トップページ', async ({ page }) => {
+    await page.goto(testURL);
+    await getAxeResults(page);
+  })
+  test('フィードページ', async ({ page }) => {
+    await page.goto(`${testURL}/feed?p=2`);
+    await getAxeResults(page);
+  })
+  test('投稿ページ', async ({ page }) => {
+    await page.goto(`${testURL}/post`);
+    await getAxeResults(page);
+  })
+  test('検索ページ', async ({ page }) => {
+    await page.goto(`${testURL}/search`);
+    await getAxeResults(page);
+  })
+  test('サポートページ', async ({ page }) => {
+    await page.goto(`${testURL}/support`);
+    await getAxeResults(page);
+  })
+  test('サイト説明ページ', async ({ page }) => {
+    await page.goto(`${testURL}/readme`);
+    await getAxeResults(page);
+  })
+  test('ログインページ', async ({ page }) => {
+    await page.goto(`${testURL}/login`);
+    await getAxeResults(page);
+  })
+  test('サインアップページ', async ({ page }) => {
+    await page.goto(`${testURL}/signup`);
+    await getAxeResults(page);
+  })
+  test('パスワード紛失ページ', async ({ page }) => {
+    await page.goto(`${testURL}/forgotPassword`);
+    await getAxeResults(page);
+  })
+  test('メール送信完了ページ', async ({ page }) => {
+    await page.goto(`${testURL}/email`);
+    await getAxeResults(page);
+  })
+  test('パスワードリセットページ', async ({ page }) => {
+    await page.goto(`${testURL}/resetPassword`);
+    await getAxeResults(page);
+  })
+
+});
\ No newline at end of file
diff --git a/tests/writeTest.spec.ts b/tests/writeTest.spec.ts
index 98c06c3d..ec516914 100644
--- a/tests/writeTest.spec.ts
+++ b/tests/writeTest.spec.ts
@@ -137,8 +137,9 @@ test.describe("ユーザーはログインして記事を編集できる", () =>
 
 test("ユーザーは記事に対していいね・よくないねをすることができる", async ({ page }) => {
   await gotoTestPostPage(page);
-  await page.getByRole('button', { name: 'Like 0', exact: true }).click();
-  await page.getByRole('button', { name: 'Dislike 0', exact: true }).click();
+
+  await page.locator(".post-like-button").click();
+  await page.locator(".post-dislike-button").click();
   await expect(page).toHaveTitle(/プログラムテスト/);
 });
 
@@ -147,7 +148,7 @@ test("ユーザーは記事にコメントし、コメントに対していい
   await page.getByLabel('コメント').fill('Test Comment');
   await page.getByRole('button', { name: 'コメント' }).click();
   await expect(page).toHaveTitle(/プログラムテスト/);
-  await page.getByRole('button', { name: 'Like 0', exact: true }).click();
-  await page.getByRole('button', { name: 'Dislike 0', exact: true }).click();
+  await page.locator(".comment-like-button").click();
+  await page.locator(".comment-dislike-button").click();
   await expect(page).toHaveTitle(/プログラムテスト/);
 });
\ No newline at end of file