diff --git a/.changeset/rare-lions-sneeze.md b/.changeset/rare-lions-sneeze.md
new file mode 100644
index 000000000..3a90b7727
--- /dev/null
+++ b/.changeset/rare-lions-sneeze.md
@@ -0,0 +1,9 @@
+---
+'@web/dev-server': patch
+'@web/dev-server-core': patch
+'@web/dev-server-rollup': patch
+'@web/test-runner': patch
+'@web/test-runner-core': patch
+---
+
+Replace chalk with nanocolors
diff --git a/package.json b/package.json
index 206b7d734..ffb427a89 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "husky": "^7.0.1",
     "lint-staged": "^11.1.1",
     "mocha": "^8.2.1",
+    "nanocolors": "^0.1.6",
     "prettier": "^2.3.2",
     "prettier-plugin-package": "^1.3.0",
     "rimraf": "^3.0.2",
diff --git a/packages/dev-server-core/src/test-helpers.ts b/packages/dev-server-core/src/test-helpers.ts
index 3d5c866e2..6cfa4ed21 100644
--- a/packages/dev-server-core/src/test-helpers.ts
+++ b/packages/dev-server-core/src/test-helpers.ts
@@ -1,6 +1,6 @@
 import portfinder from 'portfinder';
 import { expect } from 'chai';
-import chalk from 'chalk';
+import { green, red, yellow } from 'nanocolors';
 import fetch, { RequestInit } from 'node-fetch';
 
 import { DevServer } from './server/DevServer';
@@ -66,9 +66,7 @@ export async function fetchText(url: string, init?: RequestInit) {
 
 export function expectIncludes(text: string, expected: string) {
   if (!text.includes(expected)) {
-    throw new Error(
-      chalk.red(`Expected "${chalk.yellow(expected)}" in string: \n\n${chalk.green(text)}`),
-    );
+    throw new Error(red(`Expected "${yellow(expected)}" in string: \n\n${green(text)}`));
   }
 }
 
diff --git a/packages/dev-server-rollup/package.json b/packages/dev-server-rollup/package.json
index 8035cacb9..e23bc21ea 100644
--- a/packages/dev-server-rollup/package.json
+++ b/packages/dev-server-rollup/package.json
@@ -48,7 +48,7 @@
   ],
   "dependencies": {
     "@web/dev-server-core": "^0.3.3",
-    "chalk": "^4.1.0",
+    "nanocolors": "^0.1.6",
     "parse5": "^6.0.1",
     "rollup": "^2.56.2",
     "whatwg-url": "^9.0.0"
diff --git a/packages/dev-server-rollup/src/rollupAdapter.ts b/packages/dev-server-rollup/src/rollupAdapter.ts
index 0bc24090f..34a736ddd 100644
--- a/packages/dev-server-rollup/src/rollupAdapter.ts
+++ b/packages/dev-server-rollup/src/rollupAdapter.ts
@@ -19,7 +19,7 @@ import {
 import { parse as parseHtml, serialize as serializeHtml } from 'parse5';
 import { CustomPluginOptions, Plugin as RollupPlugin, TransformPluginContext } from 'rollup';
 import { InputOptions } from 'rollup';
-import { red, cyanBright } from 'chalk';
+import { red, cyan } from 'nanocolors';
 
 import { toBrowserPath, isAbsoluteFilePath, isOutsideRootDir } from './utils';
 import { createRollupPluginContextAdapter } from './createRollupPluginContextAdapter';
@@ -172,7 +172,7 @@ export function rollupAdapter(
             !['/', './', '../'].some(prefix => resolvableImport.startsWith(prefix)) &&
             adapterOptions.throwOnUnresolvedImport
           ) {
-            const errorMessage = red(`Could not resolve import ${cyanBright(`"${source}"`)}.`);
+            const errorMessage = red(`Could not resolve import ${cyan(`"${source}"`)}.`);
             if (
               typeof code === 'string' &&
               typeof column === 'number' &&
@@ -222,7 +222,7 @@ export function rollupAdapter(
           if (dirUpStrings.length === 0 || dirUpStrings.some(str => !['..', ''].includes(str))) {
             // we expect the relative part to consist of only ../ or ..\\
             const errorMessage =
-              red(`\n\nResolved ${cyanBright(source)} to ${cyanBright(resolvedImportPath)}.\n\n`) +
+              red(`\n\nResolved ${cyan(source)} to ${cyan(resolvedImportPath)}.\n\n`) +
               red(
                 'This path could not be converted to a browser path. Please file an issue with a reproduction.',
               );
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 5ea3b01a6..ed0fea538 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -62,12 +62,12 @@
     "@web/dev-server-core": "^0.3.15",
     "@web/dev-server-rollup": "^0.3.9",
     "camelcase": "^6.2.0",
-    "chalk": "^4.1.0",
     "command-line-args": "^5.1.1",
     "command-line-usage": "^6.1.1",
     "debounce": "^1.2.0",
     "deepmerge": "^4.2.2",
     "ip": "^1.1.5",
+    "nanocolors": "^0.1.6",
     "open": "^8.0.2",
     "portfinder": "^1.0.28"
   },
diff --git a/packages/dev-server/src/logger/DevServerLogger.ts b/packages/dev-server/src/logger/DevServerLogger.ts
index cd8331a79..856c965f6 100644
--- a/packages/dev-server/src/logger/DevServerLogger.ts
+++ b/packages/dev-server/src/logger/DevServerLogger.ts
@@ -1,7 +1,7 @@
 import { Logger, PluginSyntaxError } from '@web/dev-server-core';
 import { codeFrameColumns } from '@babel/code-frame';
 import path from 'path';
-import chalk from 'chalk';
+import { red, cyan } from 'nanocolors';
 
 export class DevServerLogger implements Logger {
   private debugLogging: boolean;
@@ -48,9 +48,7 @@ export class DevServerLogger implements Logger {
     const result = codeFrameColumns(code, { start: { line, column } }, { highlightCode: false });
 
     const relativePath = path.relative(process.cwd(), filePath);
-    console.error(
-      chalk.red(`Error while transforming ${chalk.cyanBright(relativePath)}: ${message}\n`),
-    );
+    console.error(red(`Error while transforming ${cyan(relativePath)}: ${message}\n`));
     console.error(highlightedResult);
     console.error('');
 
diff --git a/packages/dev-server/src/logger/logStartMessage.ts b/packages/dev-server/src/logger/logStartMessage.ts
index efc7275ec..dd20a8b8f 100644
--- a/packages/dev-server/src/logger/logStartMessage.ts
+++ b/packages/dev-server/src/logger/logStartMessage.ts
@@ -1,7 +1,7 @@
 import { DevServerConfig } from '../config/DevServerConfig';
 import { Logger } from '@web/dev-server-core';
 import ip from 'ip';
-import chalk from 'chalk';
+import { bold, cyan, white } from 'nanocolors';
 
 const createAddress = (config: DevServerConfig, host: string, path: string) =>
   `http${config.http2 ? 's' : ''}://${host}:${config.port}${path}`;
@@ -10,9 +10,7 @@ function logNetworkAddress(config: DevServerConfig, logger: Logger, openPath: st
   try {
     const address = ip.address();
     if (typeof address === 'string') {
-      logger.log(
-        `${chalk.white('Network:')}  ${chalk.cyanBright(createAddress(config, address, openPath))}`,
-      );
+      logger.log(`${white('Network:')}  ${cyan(createAddress(config, address, openPath))}`);
     }
   } catch {
     //
@@ -26,14 +24,12 @@ export function logStartMessage(config: DevServerConfig, logger: Logger) {
     openPath = `/${openPath}`;
   }
 
-  logger.log(chalk.bold('Web Dev Server started...'));
+  logger.log(bold('Web Dev Server started...'));
   logger.log('');
 
   logger.group();
-  logger.log(`${chalk.white('Root dir:')} ${chalk.cyanBright(config.rootDir)}`);
-  logger.log(
-    `${chalk.white('Local:')}    ${chalk.cyanBright(createAddress(config, prettyHost, openPath))}`,
-  );
+  logger.log(`${white('Root dir:')} ${cyan(config.rootDir)}`);
+  logger.log(`${white('Local:')}    ${cyan(createAddress(config, prettyHost, openPath))}`);
   logNetworkAddress(config, logger, openPath);
   logger.groupEnd();
   logger.log('');
diff --git a/packages/test-runner-core/package.json b/packages/test-runner-core/package.json
index dc6230c09..78966a480 100644
--- a/packages/test-runner-core/package.json
+++ b/packages/test-runner-core/package.json
@@ -59,7 +59,6 @@
     "@types/istanbul-reports": "^3.0.0",
     "@web/browser-logs": "^0.2.1",
     "@web/dev-server-core": "^0.3.12",
-    "chalk": "^4.1.0",
     "chokidar": "^3.4.3",
     "cli-cursor": "^3.1.0",
     "co-body": "^6.1.0",
@@ -72,6 +71,7 @@
     "istanbul-lib-report": "^3.0.0",
     "istanbul-reports": "^3.0.2",
     "log-update": "^4.0.0",
+    "nanocolors": "^0.1.6",
     "nanoid": "^3.1.25",
     "open": "^8.0.2",
     "picomatch": "^2.2.2",
diff --git a/packages/test-runner-core/src/cli/TestRunnerCli.ts b/packages/test-runner-core/src/cli/TestRunnerCli.ts
index cad9399c9..633bcfe45 100644
--- a/packages/test-runner-core/src/cli/TestRunnerCli.ts
+++ b/packages/test-runner-core/src/cli/TestRunnerCli.ts
@@ -1,6 +1,6 @@
 import { codeFrameColumns } from '@babel/code-frame';
 import path from 'path';
-import chalk from 'chalk';
+import { bold, cyan, red } from 'nanocolors';
 import openBrowser from 'open';
 
 import { writeCoverageReport } from './writeCoverageReport';
@@ -85,7 +85,7 @@ export class TestRunnerCli {
     }
 
     if (this.config.staticLogging || !this.terminal.isInteractive) {
-      this.logger.log(chalk.bold(`Running ${this.runner.testFiles.length} test files...\n`));
+      this.logger.log(bold(`Running ${this.runner.testFiles.length} test files...\n`));
     }
 
     if (this.config.open) {
@@ -316,7 +316,7 @@ export class TestRunnerCli {
     if (this.config.watch) {
       if (this.runner.focusedTestFile) {
         reports.push(
-          `Focused on test file: ${chalk.cyanBright(
+          `Focused on test file: ${cyan(
             path.relative(process.cwd(), this.runner.focusedTestFile),
           )}\n`,
         );
@@ -359,9 +359,7 @@ export class TestRunnerCli {
         const { message, code, line, column } = error;
         const result = codeFrameColumns(code, { start: { line, column } }, { highlightCode: true });
         const relativePath = path.relative(process.cwd(), filePath);
-        report.push(
-          chalk.red(`Error while transforming ${chalk.cyanBright(relativePath)}: ${message}`),
-        );
+        report.push(red(`Error while transforming ${cyan(relativePath)}: ${message}`));
         report.push(result);
         report.push('');
       }
diff --git a/packages/test-runner-core/src/cli/getManualDebugMenu.ts b/packages/test-runner-core/src/cli/getManualDebugMenu.ts
index 9d14ae624..b9dda9b2a 100644
--- a/packages/test-runner-core/src/cli/getManualDebugMenu.ts
+++ b/packages/test-runner-core/src/cli/getManualDebugMenu.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { cyan, gray } from 'nanocolors';
 import ip from 'ip';
 
 import { TestRunnerCoreConfig } from '../config/TestRunnerCoreConfig';
@@ -13,10 +13,10 @@ export function getManualDebugMenu(config: TestRunnerCoreConfig): string[] {
     "Advanced functionalities such commands for changing viewport and screenshots don't work there.",
     'Use the regular debug option to debug in a controlled browser.',
     ' ',
-    `Local address:   ${chalk.cyanBright(localAddress)}`,
-    `Network address: ${chalk.cyanBright(networkAddress)}`,
+    `Local address:   ${cyan(localAddress)}`,
+    `Network address: ${cyan(networkAddress)}`,
     ' ',
-    `${chalk.gray('Press')} D ${chalk.gray('to open the browser.')}`,
-    `${chalk.gray('Press')} ${config.manual ? 'Q' : 'ESC'} ${chalk.gray('to exit manual debug.')}`,
+    `${gray('Press')} D ${gray('to open the browser.')}`,
+    `${gray('Press')} ${config.manual ? 'Q' : 'ESC'} ${gray('to exit manual debug.')}`,
   ].filter(_ => !!_);
 }
diff --git a/packages/test-runner-core/src/cli/getSelectFilesMenu.ts b/packages/test-runner-core/src/cli/getSelectFilesMenu.ts
index 0477794d6..70ff26db8 100644
--- a/packages/test-runner-core/src/cli/getSelectFilesMenu.ts
+++ b/packages/test-runner-core/src/cli/getSelectFilesMenu.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { cyan, red } from 'nanocolors';
 import { relative } from 'path';
 
 export function getSelectFilesMenu(succeededFiles: string[], failedFiles: string[]) {
@@ -6,9 +6,10 @@ export function getSelectFilesMenu(succeededFiles: string[], failedFiles: string
   const minWidth = maxI.toString().length + 1;
 
   function formatTestFile(file: string, i: number, offset: number, failed: boolean) {
-    return `[${i + offset}]${' '.repeat(
-      Math.max(0, minWidth - (i + offset).toString().length),
-    )}${chalk[failed ? 'red' : 'cyan'](relative(process.cwd(), file))}`;
+    const relativePath = relative(process.cwd(), file);
+    return `[${i + offset}]${' '.repeat(Math.max(0, minWidth - (i + offset).toString().length))}${
+      failed ? red(relativePath) : cyan(relativePath)
+    }`;
   }
 
   const entries: string[] = [
diff --git a/packages/test-runner-core/src/cli/getWatchCommands.ts b/packages/test-runner-core/src/cli/getWatchCommands.ts
index b9750e14d..ea586aaae 100644
--- a/packages/test-runner-core/src/cli/getWatchCommands.ts
+++ b/packages/test-runner-core/src/cli/getWatchCommands.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { gray } from 'nanocolors';
 
 export function getWatchCommands(
   coverage: boolean,
@@ -7,23 +7,21 @@ export function getWatchCommands(
 ): string[] {
   if (focusedTest) {
     return [
-      `${chalk.gray('Press')} F ${chalk.gray('to focus another test file.')}`,
-      `${chalk.gray('Press')} D ${chalk.gray('to debug in the browser.')}`,
-      coverage ? `${chalk.gray('Press')} C ${chalk.gray('to view coverage details.')}` : '',
-      `${chalk.gray('Press')} Q ${chalk.gray('to exit watch mode.')}`,
-      `${chalk.gray('Press')} Enter ${chalk.gray('to re-run this test file.')}`,
-      `${chalk.gray('Press')} ESC ${chalk.gray('to exit focus mode')}`,
+      `${gray('Press')} F ${gray('to focus another test file.')}`,
+      `${gray('Press')} D ${gray('to debug in the browser.')}`,
+      coverage ? `${gray('Press')} C ${gray('to view coverage details.')}` : '',
+      `${gray('Press')} Q ${gray('to exit watch mode.')}`,
+      `${gray('Press')} Enter ${gray('to re-run this test file.')}`,
+      `${gray('Press')} ESC ${gray('to exit focus mode')}`,
     ].filter(_ => !!_);
   }
 
   return [
-    testFiles.length > 1
-      ? `${chalk.gray('Press')} F ${chalk.gray('to focus on a test file.')}`
-      : '',
-    `${chalk.gray('Press')} D ${chalk.gray('to debug in the browser.')}`,
-    `${chalk.gray('Press')} M ${chalk.gray('to debug manually in a custom browser.')}`,
-    coverage ? `${chalk.gray('Press')} C ${chalk.gray('to view coverage details.')}` : '',
-    `${chalk.gray('Press')} Q ${chalk.gray('to quit watch mode.')}`,
-    `${chalk.gray('Press')} Enter ${chalk.gray('to re-run all tests.')}`,
+    testFiles.length > 1 ? `${gray('Press')} F ${gray('to focus on a test file.')}` : '',
+    `${gray('Press')} D ${gray('to debug in the browser.')}`,
+    `${gray('Press')} M ${gray('to debug manually in a custom browser.')}`,
+    coverage ? `${gray('Press')} C ${gray('to view coverage details.')}` : '',
+    `${gray('Press')} Q ${gray('to quit watch mode.')}`,
+    `${gray('Press')} Enter ${gray('to re-run all tests.')}`,
   ].filter(_ => !!_);
 }
diff --git a/packages/test-runner/package.json b/packages/test-runner/package.json
index d23a1acd9..118ec5c36 100644
--- a/packages/test-runner/package.json
+++ b/packages/test-runner/package.json
@@ -81,12 +81,12 @@
     "@web/test-runner-core": "^0.10.20",
     "@web/test-runner-mocha": "^0.7.4",
     "camelcase": "^6.2.0",
-    "chalk": "^4.1.0",
     "command-line-args": "^5.1.1",
     "command-line-usage": "^6.1.1",
     "convert-source-map": "^1.7.0",
     "diff": "^5.0.0",
     "globby": "^11.0.1",
+    "nanocolors": "^0.1.6",
     "portfinder": "^1.0.28",
     "source-map": "^0.7.3"
   },
diff --git a/packages/test-runner/src/reporter/getCodeCoverage.ts b/packages/test-runner/src/reporter/getCodeCoverage.ts
index 19e766c8f..f07dcc09a 100644
--- a/packages/test-runner/src/reporter/getCodeCoverage.ts
+++ b/packages/test-runner/src/reporter/getCodeCoverage.ts
@@ -1,6 +1,6 @@
 import { CoverageThresholdConfig, TestCoverage, CoverageConfig } from '@web/test-runner-core';
 import path from 'path';
-import chalk from 'chalk';
+import { bold, green, red, underline } from 'nanocolors';
 
 const coverageTypes: (keyof CoverageThresholdConfig)[] = [
   'lines',
@@ -20,20 +20,17 @@ export function getCodeCoverage(
   const avgCoverage = Math.round((coverageSum * 100) / 4) / 100;
 
   if (!Number.isNaN(avgCoverage)) {
-    entries.push(
-      `Code coverage: ${chalk.bold(
-        chalk[testCoverage.passed ? 'green' : 'red'](`${avgCoverage} %`),
-      )}`,
-    );
+    const percent = `${avgCoverage} %`;
+    entries.push(`Code coverage: ${bold(testCoverage.passed ? green(percent) : red(percent))}`);
   }
 
   if (!testCoverage.passed && coverageConfig.threshold) {
     coverageTypes.forEach(type => {
       if (testCoverage.summary[type].pct < coverageConfig.threshold![type]) {
         entries.push(
-          `Coverage for ${chalk.bold(type)} failed with ${chalk.bold(
-            chalk.red(`${testCoverage.summary[type].pct} %`),
-          )} compared to configured ${chalk.bold(`${coverageConfig.threshold![type]} %`)}`,
+          `Coverage for ${bold(type)} failed with ${bold(
+            red(`${testCoverage.summary[type].pct} %`),
+          )} compared to configured ${bold(`${coverageConfig.threshold![type]} %`)}`,
         );
       }
     });
@@ -41,7 +38,7 @@ export function getCodeCoverage(
 
   if (!watch && coverageConfig.report && coverageConfig.reporters?.includes('lcov')) {
     entries.push(
-      `View full coverage report at ${chalk.underline(
+      `View full coverage report at ${underline(
         path.join(coverageConfig.reportDir ?? '', 'lcov-report', 'index.html'),
       )}`,
     );
diff --git a/packages/test-runner/src/reporter/getTestProgress.ts b/packages/test-runner/src/reporter/getTestProgress.ts
index 66575ce01..676071fef 100644
--- a/packages/test-runner/src/reporter/getTestProgress.ts
+++ b/packages/test-runner/src/reporter/getTestProgress.ts
@@ -6,7 +6,7 @@ import {
   CoverageConfig,
   BrowserLauncher,
 } from '@web/test-runner-core';
-import chalk from 'chalk';
+import { bold, gray, green, red } from 'nanocolors';
 
 import { getPassedFailedSkippedCount } from './utils/getPassedFailedSkippedCount';
 import { getCodeCoverage } from './getCodeCoverage';
@@ -38,9 +38,9 @@ function getProgressReport(
 ) {
   const failedText = `${failedTests} failed`;
   const testResults =
-    `${chalk.green(`${passedTests} passed`)}` +
-    `, ${failedTests !== 0 ? chalk.red(failedText) : failedText}` +
-    (skippedTests !== 0 ? `, ${chalk.gray(`${skippedTests} skipped`)}` : '');
+    `${green(`${passedTests} passed`)}` +
+    `, ${failedTests !== 0 ? red(failedText) : failedText}` +
+    (skippedTests !== 0 ? `, ${gray(`${skippedTests} skipped`)}` : '');
   const progressBar = `${renderProgressBar(
     finishedFiles,
     activeFiles,
@@ -144,9 +144,9 @@ export function getTestProgressReport(config: TestRunnerCoreConfig, args: TestPr
 
   if (testRun !== -1 && unfinishedSessions.length === 0) {
     if (coverage && !testCoverage) {
-      entries.push(chalk.bold('Calculating code coverage...'));
+      entries.push(bold('Calculating code coverage...'));
     } else if (config.watch) {
-      entries.push(chalk.bold(`Finished running tests, watching for file changes...`));
+      entries.push(bold(`Finished running tests, watching for file changes...`));
     } else {
       const durationInSec = (Date.now() - startTime) / 1000;
       const duration = Math.trunc(durationInSec * 10) / 10;
@@ -154,31 +154,25 @@ export function getTestProgressReport(config: TestRunnerCoreConfig, args: TestPr
       if (failed) {
         if (coverage && !testCoverage?.passed) {
           entries.push(
-            chalk.bold(
-              chalk.red(
-                `Finished running tests in ${duration}s, failed to meet coverage threshold.`,
-              ),
-            ),
+            bold(red(`Finished running tests in ${duration}s, failed to meet coverage threshold.`)),
           );
         } else if (failedTestCount > 0) {
           entries.push(
-            chalk.bold(
-              chalk.red(
-                `Finished running tests in ${duration}s with ${failedTestCount} failed tests.`,
-              ),
+            bold(
+              red(`Finished running tests in ${duration}s with ${failedTestCount} failed tests.`),
             ),
           );
         } else if (finishedFiles.size > 0) {
-          entries.push(chalk.bold(chalk.red(`Error while running tests.`)));
+          entries.push(bold(red(`Error while running tests.`)));
         } else {
-          entries.push(chalk.bold(chalk.red(`Failed to run any tests.`)));
+          entries.push(bold(red(`Failed to run any tests.`)));
         }
       } else {
-        entries.push(chalk.bold(`Finished running tests in ${duration}s, all tests passed! 🎉`));
+        entries.push(bold(`Finished running tests in ${duration}s, all tests passed! 🎉`));
       }
     }
   } else {
-    entries.push(chalk.bold('Running tests...'));
+    entries.push(bold('Running tests...'));
   }
 
   entries.push('');
diff --git a/packages/test-runner/src/reporter/renderProgressBar.ts b/packages/test-runner/src/reporter/renderProgressBar.ts
index 2862febe7..f47d1d8a2 100644
--- a/packages/test-runner/src/reporter/renderProgressBar.ts
+++ b/packages/test-runner/src/reporter/renderProgressBar.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import { gray, white } from 'nanocolors';
 
 const PROGRESS_BLOCKS = [' ', '▏', '▎', '▍', '▌', '▋', '▊', '▉', '█'];
 const PROGRESS_WIDTH = 30;
@@ -21,7 +21,7 @@ export function renderProgressBar(finished: number, active: number, total: numbe
   const progressBlocks = createProgressBlocks(finished + active, total);
   const finishedBlockCount = Math.floor((PROGRESS_WIDTH * finished) / total);
 
-  const finishedBlocks = chalk.white(progressBlocks.slice(0, finishedBlockCount));
-  const scheduledBlocks = chalk.grey(progressBlocks.slice(finishedBlockCount));
+  const finishedBlocks = white(progressBlocks.slice(0, finishedBlockCount));
+  const scheduledBlocks = gray(progressBlocks.slice(finishedBlockCount));
   return `|${finishedBlocks}${scheduledBlocks}|`;
 }
diff --git a/packages/test-runner/src/reporter/reportRequest404s.ts b/packages/test-runner/src/reporter/reportRequest404s.ts
index ca054f5eb..965c7fdd3 100644
--- a/packages/test-runner/src/reporter/reportRequest404s.ts
+++ b/packages/test-runner/src/reporter/reportRequest404s.ts
@@ -1,5 +1,5 @@
 import { TestSession, Logger } from '@web/test-runner-core';
-import chalk from 'chalk';
+import { bold, gray } from 'nanocolors';
 
 export function reportRequest404s(logger: Logger, sessions: TestSession[]) {
   const common404s: string[] = [];
@@ -32,7 +32,7 @@ export function reportRequest404s(logger: Logger, sessions: TestSession[]) {
     logger.group();
     logger.group();
     for (const request404 of common404s) {
-      logger.log(`${chalk.bold(chalk.gray('-'))} ${request404}`);
+      logger.log(`${bold(gray('-'))} ${request404}`);
     }
     logger.groupEnd();
     logger.groupEnd();
@@ -43,7 +43,7 @@ export function reportRequest404s(logger: Logger, sessions: TestSession[]) {
     logger.group();
     logger.group();
     for (const request404 of request404s) {
-      logger.log(`${chalk.bold(chalk.gray('-'))} ${request404}`);
+      logger.log(`${bold(gray('-'))} ${request404}`);
     }
     logger.groupEnd();
     logger.groupEnd();
diff --git a/packages/test-runner/src/reporter/reportTestFileErrors.ts b/packages/test-runner/src/reporter/reportTestFileErrors.ts
index cb6dd42a2..9bda7a634 100644
--- a/packages/test-runner/src/reporter/reportTestFileErrors.ts
+++ b/packages/test-runner/src/reporter/reportTestFileErrors.ts
@@ -1,5 +1,5 @@
 import { TestSession, TestResultError, Logger } from '@web/test-runner-core';
-import chalk from 'chalk';
+import { gray, red } from 'nanocolors';
 
 import { getFailedOnBrowsers } from './utils/getFailedOnBrowsers';
 
@@ -47,12 +47,12 @@ export function reportTestFileErrors(
 
     if (report.error.stack) {
       // there was a stack trace, take the first line and decorate it with an icon and which browsers it failed on
-      logger.log(` ❌ ${chalk.red(errorMsg)} ${failedOn}`);
+      logger.log(` ❌ ${red(errorMsg)} ${failedOn}`);
 
       // if there was more to the stack trace, print it
       logger.group();
       logger.group();
-      logger.log(chalk.gray(report.error.stack));
+      logger.log(gray(report.error.stack));
       logger.groupEnd();
       logger.groupEnd();
     } else {
diff --git a/packages/test-runner/src/reporter/reportTestFileResults.ts b/packages/test-runner/src/reporter/reportTestFileResults.ts
index df234df51..c8a936588 100644
--- a/packages/test-runner/src/reporter/reportTestFileResults.ts
+++ b/packages/test-runner/src/reporter/reportTestFileResults.ts
@@ -1,5 +1,5 @@
 import { TestSession } from '@web/test-runner-core';
-import chalk from 'chalk';
+import { bold, cyan } from 'nanocolors';
 import { relative } from 'path';
 
 import { reportTestsErrors } from './reportTestsErrors';
@@ -28,7 +28,7 @@ export function reportTestFileResults(
   if (logger.buffer.length > 0) {
     logger.buffer.unshift({
       method: 'log',
-      args: [`${chalk.bold(chalk.cyanBright(relative(process.cwd(), testFile)))}:\n`],
+      args: [`${bold(cyan(relative(process.cwd(), testFile)))}:\n`],
     });
   }
 }
diff --git a/packages/test-runner/src/reporter/reportTestsErrors.ts b/packages/test-runner/src/reporter/reportTestsErrors.ts
index b2c313c1f..b7aa2e437 100644
--- a/packages/test-runner/src/reporter/reportTestsErrors.ts
+++ b/packages/test-runner/src/reporter/reportTestsErrors.ts
@@ -1,5 +1,5 @@
 import { TestResultError, TestSession, Logger } from '@web/test-runner-core';
-import chalk from 'chalk';
+import { gray, green, red } from 'nanocolors';
 import * as diff from 'diff';
 
 import { getFailedOnBrowsers } from './utils/getFailedOnBrowsers';
@@ -8,10 +8,10 @@ import { getFlattenedTestResults } from './utils/getFlattenedTestResults';
 function renderDiff(actual: string, expected: string) {
   function cleanUp(line: string) {
     if (line[0] === '+') {
-      return chalk.green(line);
+      return green(line);
     }
     if (line[0] === '-') {
-      return chalk.red(line);
+      return red(line);
     }
     if (line.match(/@@/)) {
       return null;
@@ -30,7 +30,7 @@ function renderDiff(actual: string, expected: string) {
     .filter(l => !!l)
     .join('\n');
 
-  return `${chalk.green('+ expected')} ${chalk.red('- actual')}\n\n${diffMsg}`;
+  return `${green('+ expected')} ${red('- actual')}\n\n${diffMsg}`;
 }
 
 export function formatError(error: TestResultError) {
@@ -38,7 +38,7 @@ export function formatError(error: TestResultError) {
   const { name, message = 'Unknown error' } = error;
   const errorMsg = name ? `${name}: ${message}` : message;
   const showDiff = typeof error.expected === 'string' && typeof error.actual === 'string';
-  strings.push(chalk.red(errorMsg));
+  strings.push(red(errorMsg));
 
   if (showDiff) {
     strings.push(`${renderDiff(error.actual!, error.expected!)}\n`);
@@ -50,14 +50,14 @@ export function formatError(error: TestResultError) {
         .split('\n')
         .map(s => s.trim())
         .join('\n');
-      strings.push(chalk.gray(dedented));
+      strings.push(gray(dedented));
     } else {
-      strings.push(chalk.gray(error.stack));
+      strings.push(gray(error.stack));
     }
   }
 
   if (!error.expected && !error.stack) {
-    strings.push(chalk.red(error.message || 'Unknown error'));
+    strings.push(red(error.message || 'Unknown error'));
   }
 
   return strings.join('\n');
diff --git a/packages/test-runner/src/startTestRunner.ts b/packages/test-runner/src/startTestRunner.ts
index 840894c3b..d4bac47e3 100644
--- a/packages/test-runner/src/startTestRunner.ts
+++ b/packages/test-runner/src/startTestRunner.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-inner-declarations */
 import { TestRunner, TestRunnerCli } from '@web/test-runner-core';
-import chalk from 'chalk';
+import { red } from 'nanocolors';
 
 import { TestRunnerConfig } from './config/TestRunnerConfig';
 import { mergeConfigs } from './config/mergeConfigs';
@@ -90,7 +90,7 @@ export async function startTestRunner(options: StartTestRunnerParams = {}) {
     return runner;
   } catch (error) {
     if (error instanceof TestRunnerStartError) {
-      console.error(`\n${chalk.red('Error:')} ${error.message}\n`);
+      console.error(`\n${red('Error:')} ${error.message}\n`);
     } else {
       console.error(error);
     }
diff --git a/scripts/runWorkspacesScripts.mjs b/scripts/runWorkspacesScripts.mjs
index 722d26c9d..ceb261d44 100644
--- a/scripts/runWorkspacesScripts.mjs
+++ b/scripts/runWorkspacesScripts.mjs
@@ -2,7 +2,7 @@ import fs from 'fs';
 import { join, dirname, basename } from 'path';
 import { fileURLToPath } from 'url';
 import concurrently from 'concurrently';
-import chalk from 'chalk';
+import { green, red, yellow } from 'nanocolors';
 
 export function runWorkspacesScripts({ script, concurrency, filteredPackages = [] }) {
   const moduleDir = dirname(fileURLToPath(import.meta.url));
@@ -39,8 +39,8 @@ export function runWorkspacesScripts({ script, concurrency, filteredPackages = [
   concurrently(commands, { maxProcesses: concurrency })
     .then(() => {
       console.log(
-        chalk.green(
-          `Successfully executed command ${chalk.yellow(script)} for packages: ${chalk.yellow(
+        green(
+          `Successfully executed command ${yellow(script)} for packages: ${yellow(
             commands.map(c => c.name).join(', '),
           )}`,
         ),
@@ -54,8 +54,8 @@ export function runWorkspacesScripts({ script, concurrency, filteredPackages = [
         const count = error.filter(error => error !== 0).length;
         console.log('');
         console.log(
-          chalk.red(
-            `Failed to execute command ${chalk.yellow(
+          red(
+            `Failed to execute command ${yellow(
               script,
             )} for ${count} packages. But we don't know which ones, because concurrently doesn't say.`,
           ),
diff --git a/yarn.lock b/yarn.lock
index 5143f048f..b3a41bc5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8145,6 +8145,11 @@ mustache@^2.3.2:
   resolved "https://registry.yarnpkg.com/mustache/-/mustache-2.3.2.tgz#a6d4d9c3f91d13359ab889a812954f9230a3d0c5"
   integrity sha512-KpMNwdQsYz3O/SBS1qJ/o3sqUJ5wSb8gb0pul8CO0S56b9Y2ALm8zCfsjPXsqGFfoNBkDwZuZIAjhsZI03gYVQ==
 
+nanocolors@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.1.6.tgz#bc2350d3edfdbfadd7ac018c855ae7c13905a6ad"
+  integrity sha512-2pvTw6vYRaBLGir2xR7MxaJtyWkrn+C53EpW8yPotG+pdAwBvt0Xwk4VJ6VHLY0aLthVZPvDfm9TdZvrvAm5UQ==
+
 nanoid@3.1.20:
   version "3.1.20"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"