wcag-color
Advanced tools
Weekly downloads
Changelog
Readme
According to the WHO an estimated 1.3 billion people live with some form of visual impairment. This includes people who are legally blind and people with less than 20/20 vision.
This library helps you achieve the accessibility standards for color contrast outlined in the WCAG 2.0 specification.
npm install wcag-color
ratio
takes two colors, a foreground color, and background color, and returns a contrast ratio. ratio
accepts most color formats:
#0088ff
), shorthand (#08f
) and without hash (08f
)rgb(255, 255, 255)
hsl(210, 100%, 40%)
ratio(foreground: string, background: string) => number
import { ratio } from 'wcag-color'
ratio('hsl(210, 100%, 40%)', '#ffffff') // 5.57
score
takes two colors and returns a score value. Read more below.
score(foreground: string, background: string) => 'Fail' | 'AA Large' | 'AA' | 'AAA'
import { score } from 'wcag-color'
score('hsl(210, 100%, 40%)', '#ffffff') // AA
scoreFromRatio
takes a ratio and returns a score value.
scoreFromRatio(ratio: number) => 'Fail' | 'AA Large' | 'AA' | 'AAA'
import { scoreFromRatio } from 'wcag-color'
scoreFromRatio(7.5) // AAA
best
takes two colors and a background color and returns the color which is
best suited, from a contrast perspective, for that background color.
best(firstColor: string, secondColor: string, background: string) => string
import { best } from 'wcag-color'
best('#ffffff', '#000000', '#ffffff') // #000000
3.0
3.0
.4.5
.7.0
. Valuable for texts that will be read for a longer period of time.FAQs
Color constrast helpers to achieve the WCAG 2.0 standard
The npm package wcag-color receives a total of 403 weekly downloads. As such, wcag-color popularity was classified as not popular.
We found that wcag-color demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.