useColorContrast

The useColorContrast hook calculates the contrast ratio between two colors based on the WCAG 2.2 (opens in a new tab) accessibility guidelines. It supports a wide range of modern CSS color formats, including hex, rgb(), rgba(), hsl(), hwb(), lch(), oklch(), and named colors. You can also mix and match these formats, such as using a hex color for the foreground and an rgb() color for the background.

This can help ensure that your color combinations meet accessibility standards by providing an accurate contrast ratio, even when colors include alpha transparency.

Usage

1. Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.

2. Import useColorContrast into your component.

import { useColorContrast } from '@ridgehkr/useful'

Example

import useColorContrast from '@ridgehkr/useful'
 
function ColorContrastExample() {
  const contrast = useColorContrast('#FF0000', 'rgb(0, 255, 0)')
 
  return (
    <div>
      <p>Contrast Ratio: {contrast.toFixed(2)}</p>
    </div>
  )
}

API

Hook Signature

useColorContrast(foreground: string, background: string): number

Parameters

Return Value

Returns a number representing the contrast ratio between the two colors. The range is:

• 1 for identical colors
• 21 for maximum contrast (e.g., black on white)
• If either input is invalid, the hook returns 0.

Supported Color Formats