Skip to main content

Accessibility

Functions​

contrast()​

contrast(a, b): number

Gets the contrast between the passed in colors.

tip

Swapping color a and b in the parameter list doesn't change the resulting value. The maximum value is 21 (or the contrast between black and white).

Parameters​

β€’ a: ColorToken = "white"

First color to query. The default is white.

β€’ b: ColorToken = "black"

The color to compare against. The default is black.

Returns​

number

Example​

import { contrast } from 'huetiful-js'

console.log(contrast("blue", "red"));
// 21

Defined in​

accessibility.ts:34

deficiency()​

deficiency(color, options): ColorToken

Simulates how a color may be perceived by people with color vision deficiency.

tip

To avoid writing the long types, the expected parameters for the kind of blindness are simply the colors that are hard to perceive for the type of color blindness:

  • 'monochromacy' - An inability to see color, only perceiving shades of gray. The kind is mono.

  • 'tritanopia' - An inability to distinguish the color 'blue'. The kind is 'blue'.

  • 'deuteranopia' - An inability to distinguish the color 'green'.. The kind is 'green'.

  • 'protanopia' - An inability to distinguish the color 'red'. The kind is 'red'.

Parameters​

β€’ color: ColorToken = "cyan"

The color to return its simulated variant. The default is cyan.

β€’ options: DeficiencyOptions = ...

The optional overrides for tweaking the final output.

Returns​

ColorToken

Example​

import { deficiency } from 'huetiful-js'

// Here we are simulating color blindness of tritanomaly or we can't see 'blue'.
// We are passing in our color as an array of channel values in the mode "rgb". The severity is set to 0.5

console.log(deficiency(['rgb', 230, 100, 50, 0.5],{ kind:'blue', severity:0.5 }))
// '#dd663680'

Defined in​

accessibility.ts:70