Accessible Color Contrast is a CLI tool which checks two colors for a high enough contrast in the context of WCAG 2.2's success criteria 1.4.3 AA and 1.4.6 AAA.
npm i -g accessible-color-contrast
...
accessible-color-contrast [flags] [foreground] [background] [flags]
You can also use the CLI with npx, without downloading this package beforehand:
npx accessible-color-contrast [flags] [foreground] [background] [flags]
For the Foreground and Background colors, you are allowed to pass any valid RGB or Hex value. Additionally, you can also use any valid TailwindCSS color class name.
As long as the values are not torn apart, the CLI also reacts very gently to additional blanks within the values.
Do not forget to add quotation marks if you provide the colors via the CLI call.
"rgb(0,0,0)"
" rgb( 0,0 ,0 ) "
"rgb(255, 255, 255)"
"#000"
" #ffffff "
"zinc-50"
"zinc-950 "
If you decide to pass no colors, miss one color, or provide a wrong format, the CLI will ask you for the specific color at runtime.
At this point, you should not add any quotation marks to your values.
Any amount of provided colors, which is larger than two, will be ignored.
As an optional flag, you can either use
-s
or
--suppress
This suppresses the tabular output, and only logs the color contrast and the success criteria fulfillments.
npx accessible-color-contrast -s "rgb(0,0,0)" "#ffffff"
npx accessible-color-contrast "rgb(255, 255, 255)" "zinc-50" -s
npx accessible-color-contrast "rgb(255, 255, 255)" "zinc-50" --suppress
npx accessible-color-contrast "zinc-50" "zinc-950"
npx accessible-color-contrast -s
npx accessible-color-contrast