Colors

a11y-color-contrast

Flag text/background color combinations below WCAG AA contrast.

Computes the actual contrast ratio between the text color class and the background color class on the same element and flags combinations below 4.5:1 for normal text or 3:1 for large text. Catches the most common a11y regression AI agents ship: a "subtle" text color that fails Lighthouse the next morning.

Behavior

• Fixable: No.
• Suggestions: Yes — proposes accessible alternatives from your palette.
• Maps to: WCAG 1.4.3 (Contrast Minimum), 1.4.6 (Contrast Enhanced).

Options

["error", {
  "customColors": { "brand-navy": "#1E3A5F" }
}]

Examples

Bad:

<div className="bg-gray-100 text-gray-300" />

Good:

<div className="bg-gray-100 text-gray-900" />

Related rules

• no-arbitrary-colorsDisallow arbitrary color values like bg-[#FF0000] in Tailwind classes.
• dark-mode-coverageRequire a dark: variant for every background color class.
• focus-visible-styleBlock outline-none unless a replacement focus indicator is present.

Use it

Enable a11y-color-contrast in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/a11y-color-contrast': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules