Contrast
What It Does
The Contrast node calculates the contrast ratio between two colors. It provides a numeric value representing the contrast level, with higher numbers indicating greater contrast between the colors.
Inputs
| Name | Description | Type | Required |
|---|---|---|---|
| A | First color to compare | Color | No |
| B | Second color to compare | Color | No |
| Algorithm | Contrast calculation method (APCA is default) | String | No |
| Absolute | Whether to return the absolute value of the contrast | Yes/No | No |
Outputs
| Name | Description | Type |
|---|---|---|
| Value | The calculated contrast ratio between the two colors | Number |
How to Use It
- Drag the Contrast node into your graph.
- Connect two colors to the "A" and "B" inputs (defaults are black and white).
- Optionally choose the algorithm method and whether to use absolute value.
- The output will be a numeric value representing the contrast ratio.
Tips
- Higher contrast values generally indicate better readability when using text.
- The APCA algorithm provides perceptually accurate contrast measurements.
See Also
- Contrasting: For finding a color with sufficient contrast against a background.
- Contrasting Alpha: For adjusting opacity to achieve a target contrast.
Use Cases
- Accessibility Verification: Check if text and background color combinations meet WCAG standards.
- Readability Testing: Evaluate if UI elements have sufficient contrast for clear visibility.
- Color Pair Evaluation: Compare different color combinations to find optimal contrast ratios.