Contrasting color [Colord]

contrasting.ts

import { Plugin } from 'colord'

declare module 'colord/colord' {
  interface Colord {
    contrasting(): Colord
  }
}

const plugin: Plugin = (ColordClass) => {
  ColordClass.prototype.contrasting = function () {
    const isLight = this.isLight()

    let color = this
    while(color.contrast(this) < 4.5) color = isLight ? color.darken(0.4) : color.lighten(0.4)

    return color
  }
}

export default plugin

example.ts

import { Colord, colord, extend } from 'colord'

import a11yPlugin from 'colord/plugins/a11y'
import contrastingPlugin from './contrasting'

extend([a11yPlugin, contrastingPlugin])

colord('#ebfde8').contrasting().toHex()

while(color.contrast(this) < 4.5) color = isLight ? color.darken(0.4) : color.lighten(0.4)

@artalar Thanks. I have updated

Infinite loop when passing red color 🤔

My page got broken using this plugin. Maybe it needs a way to break the infinite loop? 😅