# Contrasting Alpha

### What It Does

The Contrasting Alpha node adjusts a color's transparency until it reaches a target contrast ratio with a background. It uses binary search to find the optimal alpha value that provides the desired contrast level.

### Inputs

| Name       | Description                                                | Type   | Required |
| ---------- | ---------------------------------------------------------- | ------ | -------- |
| Foreground | The color to adjust transparency for                       | Color  | No       |
| Background | The background color to test contrast against              | Color  | No       |
| Algorithm  | Contrast calculation method (APCA is default)              | String | No       |
| Threshold  | Target contrast value to achieve                           | Number | No       |
| Precision  | Number of binary search iterations (higher = more precise) | Number | No       |

### Outputs

| Name     | Description                                    | Type   |
| -------- | ---------------------------------------------- | ------ |
| Alpha    | The calculated alpha value (0-1)               | Number |
| Color    | The resulting color with adjusted transparency | Color  |
| Contrast | The actual contrast ratio achieved             | Number |

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2F5mgg21nv58Hl3oMDpjm5%2FCleanShot%202025-03-19%20at%2022.56.06%402x.png?alt=media&#x26;token=086d1d9a-c55c-4f3b-911e-55fc7ab9d244" alt=""><figcaption></figcaption></figure>

### How to Use It

1. Drag the Contrasting Alpha node into your graph.
2. Connect a foreground color (like `#737272`) and background color (like `#FFF`).
3. Set your desired contrast threshold (default: 60).
4. Adjust precision if needed (default: 5 iterations).
5. The node outputs the color with adjusted alpha, the alpha value, and the resulting contrast.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FaL8RvSEO1bE6FvrUwChh%2FCleanShot%202025-03-19%20at%2022.58.22%402x.png?alt=media&#x26;token=c35e5f8e-c1ad-4d65-a1ae-d41ba75e7df4" alt=""><figcaption></figcaption></figure>

### Tips

* Higher precision values give more accurate results but may increase processing time.
* This node is useful for ensuring text remains readable while maintaining some transparency.

### See Also

* [**Contrast**:](https://documentation.tokens.studio/graph-engine/available-nodes/color/contrast) For measuring contrast between two colors.
* [**Contrasting Color**](https://documentation.tokens.studio/graph-engine/available-nodes/color/contrasting-color): For selecting between two colors based on contrast.
* [**Flatten Alpha**](https://documentation.tokens.studio/graph-engine/available-nodes/color/flatten-alpha): For removing transparency from a color.

### Use Cases

* **Semi-Transparent UI Elements**: Create overlay panels that maintain text readability.
* **Accessible Design**: Ensure text with transparency meets accessibility standards.
* **Dynamic Backgrounds**: Automatically adjust text opacity based on varying background colors.