Contrasting Color

What It Does

The Contrasting Color node evaluates two colors against a background and selects the one with better contrast. It uses contrast algorithms like APCA to determine which color has higher visibility against the specified background.

Inputs

Name	Description	Type	Required
A	First color option	Color	No
B	Second color option	Color	No
Background	The background color to test contrast against	Color	No
Algorithm	Contrast calculation method (APCA is default)	String	No
Threshold	Minimum contrast value considered sufficient (default: 60)	Number	No

Outputs

Name	Description	Type
Color	The color with the higher contrast ratio	Color
Sufficient	Whether the contrast meets the threshold requirement	Yes/No
Contrast	The contrast ratio value of the selected color	Number

How to Use It

1. Drag the Contrasting Color node into your graph.

2. Connect two color options to the "A" and "B" inputs.

3. Set the "Background" to the surface color where these colors will appear.

4. Adjust the "Threshold" to your desired minimum contrast level (60 is default).

5. The node outputs the color with better contrast, whether it's sufficient, and the contrast value.

Tips

• Use this node to automatically select the most readable text color.

• The threshold value depends on your accessibility requirements (higher values mean better contrast).

See Also

• Contrast: For calculating contrast between two colors without selection.
• Contrasting Alpha: For finding an opacity that provides sufficient contrast.

Use Cases

• Adaptive Text Colors: Automatically switch between light and dark text based on background color.

• Accessible UI Elements: Select the most readable color for interactive elements.

• Dynamic Theming: Choose optimal colors that maintain readability across different backgrounds.