stylelint-root-colors

Summary

color and background-color must be specified as a set in the root element.

The root element is :root { } or html { }.

/* 🆖 Do not specify only either `color` or `background-color` in the root element */
:root {
  color: #000;
}

html,
.foo {
  background-color: #fff;
}

/* 🆗 It is good to specify both `color` and `background-color` */
:root {
  background-color: #fff;
  color: #000;
}

/* 🆗 You may use the `background` short hand */
:root {
  background: #fff;
  color: #000;
}

/* 🆗 The `color` and `background-color` are not required */
:root {
}

/* 🆗 Except in the root element, only either `color` or `background-color` may be specified */
.foo {
  color: #000;
}

Why?

Browser text and background colors can be changed at the user's discretion.

In this case, if only either color or background-color is specified in the root element through producer stylesheets, the text will be unreadable in some cases.

In Firefox, you can set text and background colors arbitrarily in the Manage Colors. The screenshot below shows the text in white and the background in black (i.e., dark mode).

See also F24 in Techniques for WCAG 2.2.

Usage

/** @type {import('stylelint').Config} */
export default {
  plugins: ['stylelint-root-colors'],
  rules: {
    'plugin/root-colors': [
      true,
      {
        root: ['.root'],
      },
    ],
  },
};

Rule options

| name | type | description | | ------ | -------------------- | --------------------------------------------------------------------------------------- | | root | string \| string[] | Specifies the selector of the root element. If omitted, it will be [':root', 'html']. |