Color Preview

Preview color combinations on your site, but only if they have enough contrast to be WCAG accessible.

Shows headlines and body text with bold, italic, and underline formatting.

Demo

See the colorpreview demo.

Screenshot of the demo

I pulled the hex codes below from an https://unsplash.com image using https://dtrejo.com/colorslice's "generate" button, plus a couple handpicked colors to get a wider range of color.

---

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.