Auto ✨Contrast Component

Automatically calculates the black/white text color for any background using WCAG luminance formulas

Interactive Color Picker

Select any background color! The text color automatically switches between black and white to maintain optimal contrast and readability.

Auto Color Adjustment

✓ WCAG Compliant

This text adapts for perfect contrast! The component uses the WCAG 2.1 relative luminance formula to determine whether black or white text provides better readability. It starts using: --jgreen_light in the OKLCH color space.
After the fade-in offcourse.

Now, pick a Colour:

AutoContrast Color Test

Works with any HTML tag using the 'tag' prop

--brand_lighter

--brand_light

--brand

--brand_dark

--jorange_light

--jorange

--jorange_dark

--jorange_darker

--jgreen_light

--jgreen

--jgreen_dark

--jgreen_darker

--black

--black_fumes

--whiteDIRTY

--whiteOFF

--white

--text_color

--grey_color_dark

--grey_color

--grey_color_light

--grey_color_lighter

Color Palette

Junglestar's design tokens with real OKLCH colors and automatic contrast

--brand_lighter var(--brand_lighter)

--brand_light var(--brand_light)

--brand var(--brand)

--brand_dark var(--brand_dark)

--jorange_light var(--jorange_light)

--jorange var(--jorange)

--jorange_dark var(--jorange_dark)

--jorange_darker var(--jorange_darker)

--jgreen_light var(--jgreen_light)

--jgreen var(--jgreen)

--jgreen_dark var(--jgreen_dark)

--jgreen_darker var(--jgreen_darker)

--black var(--black)

--black_fumes var(--black_fumes)

--whiteDIRTY var(--whiteDIRTY)

--whiteOFF var(--whiteOFF)

--white var(--white)

--text_color var(--text_color)

--grey_color_dark var(--grey_color_dark)

--grey_color var(--grey_color)

--grey_color_light var(--grey_color_light)

--grey_color_lighter var(--grey_color_lighter)

Quick Start

Using the AutoContrast component is simple:

import AutoContrast from "@components/UI/AutoContrast.astro";

<AutoContrast backgroundColor="#0069cc">
  <h2>Your Content</h2>
  <p>Text automatically contrasts!</p>
</AutoContrast>