智慧城市>> ff-brand-colors-generator>> 返回
项目作者： lam-tiffany

项目描述 ：
Generates accessible branded colours required in the FFAI app.
高级语言： JavaScript
项目地址: git://github.com/lam-tiffany/ff-brand-colors-generator.git
创建时间： 2020-12-20T09:39:14Z
项目社区：https://github.com/lam-tiffany/ff-brand-colors-generator
开源协议：
下载


FFAI Brand Colors Generator v1.0

A color modification tool to easily generate non-primary branded colors required in the FFAI app.\
Project URL: https://ffbrandcolors.netlify.app/

Purpose

Just for fun.

Serves as a helper tool for devs while changing / testing brand primary colors. In v1.0, this app does 2 things:

1) Brand colors generator:

  • Preview and copy the hex code of gradient-dark simply by providing a brand-primary-color.
  • Devs can assign a brand-primary-color either from a selection of default colors or manually inputting the hex color.

2) Color contrast checker:

  • Checks the auto-generated gradient-dark against our non-branded color variables (ff-white, ff-light-grey, ff-alice-blue, ff-grey, ff-grey, ff-dark-grey, ff-black) under 4 accessibility standard situations (levels “AA” and “AAA”, font size “small” and “large”).
  • If the color contrast is not ideal, devs can use Sketch color picker to manually pick a lighter/darker shade of the gradient-dark color and check again until it meets the WCAG standards.
  • When devs manually pick a gradient-dark color, the brand-primary-color will be updated in Brand colors generator section.

Future improvements & Next steps

  • Color contrast checker checks Pass/Fail grade of brand-primary-color as well
  • Preview feature: Preview UI elements used in FFAI app with the geneated color combinations
  • Advanced search feature: Find the most readable color for a given situation (levels, font size, backgroundColor)

Credits

Made with TinyColor and React-Color.\
Inspired by LESS Colour Function Calculator and my team’s struggles.