HCT color picker

A color picker that keeps color contrast consistent.

With the HCT color picker, you can easily adjust the colors of different elements within your Figma document on the fly.

You can even create new styles to add to your document's palette, which will give you more control and efficiency in your workflow.

It uses Google's HCT logic to ensure that the color contrast remains accessible while preserving your color properties.

How does HCT Color Picker can help me ensure accessibility standards are met?

The color picker uses the HCT color system, which simplifies the process of meeting accessibility standards. Instead of calculating a contrast ratio, HCT measures the difference in tone or lightness between colors.

By selecting colors that have a significant enough difference in tone values, contrast is guaranteed without complex calculations.

This principle works consistently for any pair of colors; Smaller elements require a tone difference of 50 with their background and larger elements require a tone difference of 40 to meet WCAG contrast requirements. HCT keeps the tone consistent throughout hues, making it easier to pair colors. (source)This feature is especially helpful when creating color systems based on a single brand color or ensuring that your visuals are accessible.

With the HCT Color Picker, you can select elements in the document and change their colors in real time, making the process quicker and more efficient. Try it out and see how it can improve your workflow today!

Features:

Select elements in the document and change their colors in real time.

Add new styles to the document's styles palette.

Change the color of the selected elements.