Colors Contrast Ratio Tester

Demo

Here is a working live: https://colors-ratio-tester-hobbytowo.netlify.com/

Description

Single page application to show text and background colors combinations and check if contrast ratio is in accordance with WCAG.

Project setup

npm install

Compiles and hot-reloads for development

npm run start

Compiles and minifies for production

npm run build

Built with

• React
• SASS + BEM

Features

• Change hue, saturation and lightness values on the ranges
• Check contrast ratio with WCAG accessibility
• Reverse background and text colors
• Random background and text colors

Sources

• Data from w3.org - "Visual Audio Contrast"
• Data from w3.org - "Relative luminance"
• Icons from Font Awesome
• Font from Google Fonts
• ColorPicker from React Color

Inspiration

• Colorable

License

• MIT © Weronika Kędziora