react-a11y-inspector/src/components/issues/ContrastCheck.js

An advanced React accessibility inspection tool with real-time monitoring, screen reader simulation, and customizable rules.

import tinycolor from 'tinycolor2';

export const checkContrast = () => {
  const issues = [];
  document.querySelectorAll('*').forEach((el) => {
    const style = getComputedStyle(el);
    const fgColor = tinycolor(style.color);
    const bgColor = tinycolor(style.backgroundColor);

    const contrast = tinycolor.readability(bgColor, fgColor);
    if (contrast < 4.5) {
      issues.push({
        type: 'Low Contrast',
        message: `Text in ${el.tagName} has low contrast (ratio: ${contrast.toFixed(2)}).`,
        severity: 'Critical',
        element: el,
      });
    }
  });
  return issues;
};