Options
All
  • Public
  • Public/Protected
  • All
Menu

WCAG Contrast Util - v0.1.6

Index

Interfaces Contrast

Interfaces Typography

Type Aliases Color

Type Aliases Contrast

Type Aliases Luminance

Type Aliases Typography

Variables Color

Variables Typography

Functions Color

Functions Contrast

Functions Luminance

Functions Other

Functions Typography

Color Type Aliases

A_V

A_V: number

B_V

B_V: number

G_V

G_V: number

HEX

HEX: string

Hex String, can be 3,4,6,8 format with or without '#'

RGBA

RGBA: [R_V, G_V, B_V, A_V]

R_V

R_V: number

SolidRGB

SolidRGB: [R_V, G_V, B_V]

Contrast Type Aliases

CheckerFunction

CheckerFunction: ((text: TextNodeParam, background: string) => boolean)

Type declaration

CriterionThreshold

CriterionThreshold: { t1: number; t2: number }

Type declaration

  • t1: number

    Normal text threshold

  • t2: number

    Large Text threshold

Luminance Type Aliases

ColorWeight

ColorWeight: number

Channel weight in RGB system, 0 ~ 1 float value.

Typography Type Aliases

FontSizeUnit

FontSizeUnit: "px" | "pt"

FontWeight

FontWeight: number | string | undefined

RelativeFontWeight

RelativeFontWeight: "bolder" | "lighter"

Color Variables

Const HEXReg

HEXReg: RegExp = ...

Hex code for 3,4,6,8 format with or without '#'

Typography Variables

Const fontRelativeWeights

fontRelativeWeights: readonly [100, 400, 700, 900] = ...

Relative weight considered from "lighter" or "bolder" value in CSS

Const fontWeightLUT

fontWeightLUT: Record<string, number> = ...

Map given text weight variants to number weight

see

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping

Color Functions

flattenColors

  • Merge multiple colors into one color

    example
    const RED_C22_30 = [0.8, 0.133, 0.13, 0.3]
    const GREEN_3B6_40 = [0.2, 0.733, 0.4, 0.4]

    flattenColors(
      RED_C22_30,
      GREEN_3B6_40,
      RED_C22_30,
      fromHEX('#000') // black background
    ) // [ 0.3968, 0.262, 0.1688, 1 ]

    Parameters

    • Rest ...args: (SolidRGB | RGBA)[]

      list of RGBA color, in layer descending order, last element is treated as background

    Returns RGBA

    merged RGBA color, if no input, will return [0,0,0,0]

fromHEX

  • fromHEX(hex: string): RGBA

  • Get each channel weight value from HEX code

    Parameters

    • hex: string

      HEX color string, can omit '#' and support all 3-digit 4-digit, 6-digit, 8-digit color LV4 version.

    Returns RGBA

    Array of [R, G, B, A] value from 0 to 1

mergeColor

  • Merge color on top of other color

    Parameters

    Returns RGBA

    RGBA merge with alpha channel precomputed. AKA fake transparent.

purifyHEX

  • purifyHEX(hex: string, fallback?: string): string

  • Purify given hex color to 8-digit hex color for further processing

    example
    purifyHEX("#c29") // cc2299ff
    purifyHEX("2222") // 22222222
    purifyHEX("#FC39C5") // FC39C5ff
    purifyHEX("12") // ffffffff

    Parameters

    • hex: string

      Hex String, can be 3,4,6,8 format with or without '#'

    • fallback: string = 'ffffffff'

      = 'ffffffff', fallback string if fail to process string. Not guarantee against illegal character

    Returns string

    8 digit hex color pad with alpha ff if not provide. letter case not guarantee. '#' is not included. If the length is not 3,4,6,8 fallback will be returned

Contrast Functions

getContrastRatio

  • getContrastRatio(c1: string, c2: string): number

  • Get luminance contrast ratio for given color set

    Parameters

    • c1: string
    • c2: string

    Returns number

    contrast value between 1 to 21 range

isAA

  • check given context pass AA-level

    Parameters

    • text: TextNodeParam

      text node given all information

    • background: string

      background color

    Returns boolean

    pass boolean

isAAA

  • check given context pass AAA-level

    Parameters

    • text: TextNodeParam

      text node given all information

    • background: string

      background color

    Returns boolean

    pass boolean

isPassCriteria

Luminance Functions

standardizeWeight

  • standardizeWeight(c: number): number

toRelativeLuminance

  • toRelativeLuminance(r: number, g: number, b: number, _a?: number): number

  • Calculate sRGB color into perceptual luminance

    see

    https://www.w3.org/TR/WCAG21/#dfn-relative-luminance

    example
    toRelativeLuminance(1, 1 ,1) // 1.0, white color
    toRelativeLuminance(0, 1, 1) // 0.7152 + 0.0722, green + blue
    toRelativeLuminance(0.1, 0.1, 0.1, 0.75) // 0.1, alpha channel is ignored

    Parameters

    • r: number

      sRGB red value in 0~1

    • g: number

      sRGB green value in 0~1

    • b: number

      sRGB blue value in 0~1

    • Optional _a: number

      alpha chanel value, will be ignored

    Returns number

Other Functions

isBold

  • isBold(weight?: number): boolean

toHEX

Typography Functions

getFontWeight

getRelativeWeight

isLarge

  • isLarge(size: number, bold?: boolean, unit?: FontSizeUnit): boolean

  • query the large flag with given size, bold, unit

    see

    isLargeText for reading weight instead

    example
    isLarge(14) // false, 14px font is not considered as large text
    isLarge(14, true, 'pt') // true, 14pt with bold text is one of the criteria

    Parameters

    • size: number

      number of the font size

    • bold: boolean = false

      indicate the font is bold (over 700)

    • unit: FontSizeUnit = 'px'

      unit of the font size, 'pt' or 'px', default to 'px'

    Returns boolean

isLargeText

  • Query the large text flag with given size, weight(text), unit and inherit weight. This is higher-order function for isLarge.

    note

    Will be refactor ASAP

    Parameters

    Returns boolean

Generated using TypeDoc