Contrast Utilities

Termeh provides a set of color helper functions for luminance, contrast, and color harmonization. These functions help you make accessible and visually harmonious UI designs.

Luminance

Calculates the luminance of a color (WCAG standard).

Signature:

@function luminance($color: COLOR): NUMBER;

Example:

$luminance: termeh.luminance(#3498db);

Darkest

Returns the darker color based on luminance.

Signature:

@function darkest($color1: COLOR, $color2: COLOR): COLOR;

Example:

$dark: termeh.darkest(#ff0000, #00ff00);

Lightest

Returns the lighter color based on luminance.

Signature:

@function lightest($color1: COLOR, $color2: COLOR): COLOR;

Example:

$light: termeh.lightest(#ff0000, #00ff00);

Contrast Ratio

Calculates the WCAG contrast ratio between background and foreground colors.

Signature:

@function contrast-ratio($back: COLOR, $color: COLOR): NUMBER;

Example:

$ratio: termeh.contrast-ratio(#ffffff, #333333);

Tone

Determines whether a color is light or dark.

Signature:

@function tone($color: COLOR): "light" | "dark";

Example:

$tone: termeh.tone(#f1c40f);

Contrast

Selects the color with higher contrast relative to a base color.

Signature:

@function contrast($base: COLOR, $color1: COLOR, $color2: COLOR): COLOR;

Example:

$best-contrast: termeh.contrast(#ffffff, #3498db, #e74c3c);

Harmony

Selects the more harmonious color relative to a base color.

Signature:

@function harmony($base: COLOR, $color1: COLOR, $color2: COLOR): COLOR;

Example:

$best-harmony: termeh.harmony(#ffffff, #3498db, #e74c3c);