WCAG Contrast Util

Helper functions for WCAG contrast criteria.

According to Web Content Accessibility Guidelines (WCAG) 2.1 - #1.4.3 contrast, the intent of these Success Criteria are to provide enough contrast between text and its background so that it can be read by people with moderately low vision. Developer should take care of the colors used in website meet these criteria.

WCAG Contrast Util provides several utils function to calculate these standard. Including contrast ratio, relative luminance, large scale text and also handy utils to transform HEX color, combining multiple translucent color, mapping typography weight keyword and so on.

Demo Page available for quick test.

View full document for more usages- created by TypeDoc

Features

• 🌈 color from #HEX with level-4 color support (3,4,6 and 8 digit)
• 🎨 flatten multiple translucent colors into one color
• 📏 Typography helper for large text
• 💡 Luminance contrast helper with different threshold
• 📅 More features are coming up...

What we got

• Written in TypeScript with docs 📃
• Fully tested ✅
• Ship with tree shakable ES module 📦
• function based api 🤝

Install

npm install wcag-contrast-util

Usage

All-in-one Contrast Function

import { isAA } from 'wcag-contrast-util'

it('check AA and AAA', () => {
  // 6.38
  const A = { color: '#57606A', size: 14 }
  // 5.19
  const B = { color: '#0969DA', size: 14 }

  expect(isAA(A, '#FFF')).toBe(true)
  expect(isAA(B, '#FFF')).toBe(true)
  expect(isAAA(B, '#FFF')).toBe(false)
  expect(isAAA(A, '#FFF')).toBe(false)
  expect(isAAA({ ...A, size: 24 }, '#FFF')).toBe(true)
})