Color Shift

Color Shift extracts a two-color pair from a photo and shows it in a live text specimen. You can adjust the colors, compare WCAG 2 and APCA contrast scores, and copy or download a Markdown record. Photos come from Unsplash, or you can import your own image locally.

Run locally

Use Node.js 20.9 or later. Clone the repository, then run:

npm ci

Create .env.local in the project root with your Unsplash API access key:

UNSPLASH_ACCESS_KEY=your_access_key

The key stays on the server. It is required for Unsplash photos; personal-photo import runs locally in the browser. Start the app with npm run dev and open localhost:3000.

Commands

Command	Purpose
npm run dev	Development server
npm run build	Production build
npm start	Serve a production build
npm run lint	ESLint
npm test	Deterministic Node tests in tests/*.test.cjs

For browser regression suites and their preview setup, see tests/README.md. They use a production preview and Playwright with Chrome. Physical-device results and the next testing template are in tests/device-browser-log.md.

Deployment

The web app is available at www.colorshiftapp.com. Set UNSPLASH_ACCESS_KEY as a server-side environment variable in the deployment environment, then run the production build and server commands above. The GitHub Actions workflow checks lint, generated types, TypeScript, build, and deterministic tests on pull requests and pushes to main.