Ignite UI for Angular
Components Get Started

color

#

function adaptive-contrast public view code open_in_new

Returns a CSS runtime calculated relative color(black or white) for a given color.

Example
.my-component {
   --bg: #09f;
   background: var(--bg);
   color: adaptive-contrast(var(--bg)); // hsl(from color(from var(--bg) var(--y-contrast)) h 0 l)
 }
Parameters
Name Type Default Description
$color *
Color
- The base color used in the calculation.
#

function text-contrast public view code open_in_new

Returns a contrast color for a passed color.

warning Deprecated

Use adaptive-contrast instead.

Example
.my-component {
   background: #09f;
   color: text-contrast(#09f);
 }
Parameters
Name Type Default Description
$background *
Color
- The background color used to return a contrast/forground color for.
$foreground
Color | List<Color>
#fff A list of foreground colors that can be used with the provided background.
$contrast
AAA | AA | A
AAA The contrast level according to WCAG 2.0 standards.
Requires
See
External links
#

function to-hsl public view code open_in_new

Retruns a comma separated list of hue, saturation, and lightness values for a given color.

warning Deprecated

Not needed anymore and will be removed in the future.

Example

Turn #000 into an HSL list of values

$hsl-list: to-hsl(#000); // (0deg, 0%, 0%);
Parameters
Name Type Default Description
$color *
Color
- The color to be converted to an HSL list of values.
#

function luminance public view code open_in_new

Calculates the luminance for a given color.

Example
$white: luminance(#fff); // 1
$blue: luminance(#09f); // 0.3
$black: luminance(#000); // 0
Parameters
Name Type Default Description
$color *
Color
- The color to calculate luminance for.
External links
#

mixin configure-colors public view code open_in_new

Configures the color module.

Example
.enhanced-accessibility {
   @include configure-colors(true);
 }
Parameters
Name Type Default Description
$enhanced-accessibility
Boolean
null Enables features like color blind brushes for chart themes.
See
#

mixin adaptive-contrast public view code open_in_new

Sets up CSS custom properties for WCAG contrast calculations. These properties are used to determine the appropriate text contrast color based on WCAG accessibility guidelines.

Example

Using the mixin with default AA level

.my-component {
  @include adaptive-contrast();
}
Example

Using the mixin with AAA level

.my-component {
  @include adaptive-contrast('aaa');
}
Example

Generated CSS custom properties

:root {
  --ig-wcag-a: 0.31;    // Level A threshold
  --ig-wcag-aa: 0.185;   // Level AA threshold
  --ig-wcag-aaa: 0.178;  // Level AAA threshold
  --ig-contrast-level: var(--ig-wcag-aa);
  --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1);
  --y-contrast: xyz-d65 var(--y) var(--y) var(--y);
}
Parameters
Name Type Default Description
$level
String
'aa' WCAG contrast level ('a', 'aa', or 'aaa')

Search Documentation