ColorBlindSim is a progressive web application that lets you simulate color blindness. Check it out!
ColorBlindSim requires a fairly recent browser to work. It has been tested to work in the most recent versions of:
- Chrome (desktop and mobile)
- Firefox (desktop and mobile)
- Safari (desktop and mobile)
- Edge (desktop)
- Samsung Internet (mobile)
If you find any bugs please file an issue.
If you want to build ColorBlindSim yourself you need to have Node.js and npm installed. The build steps have only been tested on Linux, though macOS should work just fine. Windows probably won't work (due to syntax being used in npm scripts), but I'm open for pull requests.
If you meet the requirements you can run the following commands from the top-level directory of this repository:
npm install
npm run build
Alternatively you can spin up a development server which features live reloads:
npm run watch
# use watch:https if you want to run an HTTPS server
ColorBlindSim is built using the following tools:
- Preact for rendering
- Unistore for state management
- Parcel for bundling
- Babel for new JavaScript features and JSX
- Sass to ease writing CSS
Some configuration can be found in the config directory, but some configuration files need to be at the top directory of the project for automatic discovery. These files are:
.babelrc: configuration for Babel.editorconfig: configuration for text editors and IDEs, EditorConfig standard.nvmrc: used by nvm to determine which Node.js version to use.prettierrc: configuration for prettier, the automatic code formatter being used for this project
The color conversion code is based on skratchdot/color-blind, which itself is based on code by mudcu.be.