CSS color-contrast() Generator

Generate CSS color-contrast() function to automatically choose optimal text color

Background Color:

Light Color:

Ratio: 3.15:1

Dark Color:

Ratio: 6.66:1

Minimum Contrast Threshold:

Preview Text

Selected color: #ffffff

Generated CSS:

color: color-contrast(#3498db vs #ffffff, #000000 to 4.5);

Note: The color-contrast() function is currently experimental and may require browser flags. This tool simulates the behavior for preview purposes.