diff --git a/.yaspeller.json b/.yaspeller.json
index 7f79d3c28a..da81db9537 100644
--- a/.yaspeller.json
+++ b/.yaspeller.json
@@ -106,6 +106,7 @@
     "геометричность",
     "геопозици(и|ей|)",
     "гитхаб(е|а|у)",
+    "глассморфизм",
     "глиф(ы|ов|ами|ам|ах|)",
     "Гонсало",
     "ГПСЧ",
diff --git a/a11y/index.md b/a11y/index.md
index d2a11e21db..01168d099a 100644
--- a/a11y/index.md
+++ b/a11y/index.md
@@ -16,6 +16,7 @@ groups:
     items:
       - css-impact-on-a11y
       - prefers-reduced-motion
+      - prefers-reduced-transparency
       - prefers-contrast
       - forced-colors
       - inverted-colors
diff --git a/a11y/prefers-reduced-transparency/demos/basic-example/index.html b/a11y/prefers-reduced-transparency/demos/basic-example/index.html
new file mode 100644
index 0000000000..5ef50c485f
--- /dev/null
+++ b/a11y/prefers-reduced-transparency/demos/basic-example/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Пример с полупрозрачным фоном для текста — prefers-reduced-transparency — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+</head>
+<style>
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    color-scheme: dark;
+    font-size: 18px;
+  }
+
+  body {
+    min-height: 100vh;
+    padding: 50px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='200' height='200' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(139)'%3E%3Crect width='100%25' height='100%25' fill='rgba(24, 25, 28,1)'/%3E%3Cpath d='M-10 30h60v8h-60zM-10-10h60v8h-60' fill='rgba(16, 243, 175,1)'/%3E%3Cpath d='M-10 10h60v8h-60zM-10-30h60v8h-60z' fill='rgba(244, 152, 173,1)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
+    background-color: #18191C;
+    color: #FFFFFF;
+    font-family: "Roboto", sans-serif;
+  }
+
+  h2 {
+    font-weight: 500;
+    font-size: 1.375rem;
+  }
+
+  article {
+    width: 100%;
+    padding: 55px 40px;
+    color: #FFFFFF;
+    background: #18191C;
+    text-align: center;
+    opacity: 0.9;
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    article {
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 768px) {
+    body {
+      padding: 30px 0;
+    }
+
+    article {
+      padding: 55px 30px;
+    }
+  }
+</style>
+<body>
+  <article>
+    <h2>Люблю полосы и вышивать крестиком</h2>
+  </article>
+</body>
+</html>
diff --git a/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/daycare.png b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/daycare.png
new file mode 100644
index 0000000000..77e5674de4
Binary files /dev/null and b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/daycare.png differ
diff --git a/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/walking.png b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/walking.png
new file mode 100644
index 0000000000..86719c770f
Binary files /dev/null and b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/images/walking.png differ
diff --git a/a11y/prefers-reduced-transparency/demos/card-with-bg-image/index.html b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/index.html
new file mode 100644
index 0000000000..0541a3398b
--- /dev/null
+++ b/a11y/prefers-reduced-transparency/demos/card-with-bg-image/index.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Пример с градиентом и фоновой картинкой — prefers-reduced-transparency — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap">
+</head>
+<style>
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    color-scheme: dark;
+    font-size: 16px;
+  }
+
+  body {
+    min-height: 100vh;
+    padding: 50px;
+    gap: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #18191C;
+    color: #FFFFFF;
+    font-family: "Roboto", sans-serif;
+  }
+
+  h3 {
+    margin-top: 15px;
+    margin-bottom: 10px;
+    font-weight: 500;
+    font-size: 1.25rem;
+  }
+
+  p {
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  code {
+    font-size: 1.125rem;
+    font-family: "Roboto Mono", monospace;
+    color: inherit;
+  }
+
+  code + article {
+    margin: 20px 0 30px;
+  }
+
+  article {
+    display: grid;
+    align-items: end;
+    grid-template-rows: 1fr auto;
+    overflow: clip;
+  }
+
+  article span {
+    display: grid;
+    width: 100%;
+    padding: 25px 20px;
+    color: #FFFFFF;
+    background: linear-gradient(to top, #000000, #0000);
+  }
+
+  img {
+    display: block;
+    width: 480px;
+    max-width: 100%;
+    height: 250px;
+    object-fit: cover;
+  }
+
+  article > * {
+    grid-area: 1 / 1;
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .with-mediaquery span {
+      padding: 0;
+      background: unset;
+    }
+
+    .with-mediaquery article > * {
+      grid-area: unset;
+    }
+  }
+
+  @media (max-width: 768px) {
+    body {
+      padding: 30px;
+    }
+  }
+</style>
+<body>
+  <div>
+    <code>no-preference</code>
+    <article>
+      <img src="./images/daycare.png" alt="">
+      <span>
+        <h3>Ясли для питомцев</h3>
+        <p>Присмотрим за животными, пока вы на работе.</p>
+      </span>
+    </article>
+  </div>
+  <div class="with-mediaquery">
+    <code>reduce</code>
+    <article>
+      <img src="./images/walking.png" alt="">
+      <span>
+        <h3>Прогулки</h3>
+        <p>Выгуляем животных вместо вас.</p>
+      </span>
+    </article>
+  </div>
+</body>
+</html>
diff --git a/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/images/grass.png b/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/images/grass.png
new file mode 100644
index 0000000000..e5fb317b06
Binary files /dev/null and b/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/images/grass.png differ
diff --git a/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/index.html b/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/index.html
new file mode 100644
index 0000000000..cb2c67fb41
--- /dev/null
+++ b/a11y/prefers-reduced-transparency/demos/card-with-glass-effect/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Пример с эффектом матового стекла — prefers-reduced-transparency — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+</head>
+<style>
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    color-scheme: dark;
+    font-size: 20px;
+  }
+
+  body {
+    min-height: 100vh;
+    padding: 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-image: url(./images/grass.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-color: #18191C;
+    font-family: "Roboto", sans-serif;
+  }
+
+  article {
+    width: 65%;
+    padding: 55px 40px;
+    color: #FFFFFF;
+    background-color: #18191C;
+  }
+
+  h2 {
+    margin-bottom: 17px;
+    font-weight: 500;
+    font-size: 1.375rem;
+  }
+
+  p {
+    margin: 7px 0;
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  @media (prefers-reduced-transparency: no-preference) {
+    article {
+      color: #000000;
+      backdrop-filter: blur(15px);
+      background: hsl(none none 100% / 20%);
+    }
+  }
+
+  @media (max-width: 768px) {
+    body {
+      padding: 30px;
+    }
+
+    article {
+      width: 100%;
+      padding: 55px 30px;
+    }
+  }
+</style>
+<body>
+  <article>
+    <h2>Добавь ярких красок</h2>
+    <p>Чтобы жизнь пользователей была красочной, интересной и насыщенной, используй везде эффект стекла. Или не везде?</p>
+  </article>
+</body>
+</html>
diff --git a/a11y/prefers-reduced-transparency/index.md b/a11y/prefers-reduced-transparency/index.md
new file mode 100644
index 0000000000..237b941284
--- /dev/null
+++ b/a11y/prefers-reduced-transparency/index.md
@@ -0,0 +1,172 @@
+---
+title: "`prefers-reduced-transparency`"
+description: "Значение директивы `@media`, которое отслеживает настройки прозрачности."
+authors:
+  - tatianafokina
+contributors:
+  - skorobaeus
+keywords:
+  - a11y
+  - @-правило
+  - media
+  - media-query
+  - accessible glassmorphism
+related:
+  - a11y/prefers-reduced-motion
+  - css/media
+  - a11y/prefers-contrast
+tags:
+  - doka
+---
+
+## Кратко
+
+Одно из значений директивы [`@media`](/css/media/) для проверки пользовательских настроек. Отслеживает отключение или уменьшение прозрачности в операционной системе.
+
+<aside>
+
+🚧 У `prefers-reduced-transparency` пока что не самая впечатляющая поддержка. Следить за поддержкой можете [на Can I Use](https://caniuse.com/?search=prefers-reduced-transparency).
+
+</aside>
+
+## Пример
+
+```css
+article span {
+  background: #18191C;
+  opacity: 0.9;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  article span {
+    opacity: 1;
+  }
+}
+```
+
+<iframe title="Пример с полупрозрачным фоном для текста" src="demos/basic-example/" height="600"></iframe>
+
+## Как пишется
+
+Задайте после `@media` в скобках условие `prefers-reduced-transparency` с одним из значений:
+
+- `no-preference` — прозрачность в системе по умолчанию.
+- `reduce` — прозрачность уменьшена или полностью выключена.
+
+С помощью `prefers-reduced-transparency` можно отменять прозрачность, заданную фону через [`opacity`](/css/opacity/), перемещать текст под блок с фоновыми картинками, паттернами и так далее.
+
+На сайтах часто встречаются карточки с фоновыми картинками и текстом. В примере для первой карточки используем стили без `prefers-reduced-transparency`, для второй устанавливаем специальные CSS-правила на случай отключения прозрачности. Они переносят текст под картинку.
+
+```html
+<div class="with-mediaquery">
+  <code>reduce</code>
+  <article>
+    <img src="./images/walking.png" alt="">
+    <span>
+      <h3>Прогулки</h3>
+      <p>Выгуляем животных вместо вас.</p>
+    </span>
+  </article>
+</div>
+```
+
+```css
+@media (prefers-reduced-transparency: reduce) {
+  .with-mediaquery span {
+    padding: 0;
+    background: unset;
+  }
+
+  .with-mediaquery article > * {
+    grid-area: unset;
+  }
+}
+```
+
+<iframe title="Пример с градиентом и фоновой картинкой" src="demos/card-with-bg-image/" height="840"></iframe>
+
+Если любите глассморфизм, то `prefers-reduced-transparency` тоже спешит на помощь. На этот раз покажем эффект матового стекла только тогда, когда не изменена настройка прозрачности.
+
+```css
+article {
+  color: #FFFFFF;
+  background-color: #18191C;
+}
+
+@media (prefers-reduced-transparency: no-preference) {
+  article {
+    color: #000000;
+    backdrop-filter: blur(15px);
+    background: hsl(none none 100% / 20%);
+  }
+}
+```
+
+<iframe title="Пример с эффектом матового стекла" src="demos/card-with-glass-effect/" height="590"></iframe>
+
+### Тестирование и отладка
+
+Условие `prefers-reduced-transparency` можно тестировать в браузере или отключив прозрачность в системе.
+
+В Chrome эмуляция `prefers-reduced-transparency` находится в дополнительной вкладке «Отрисовка» (Rendering) в инструменте разработчика. Чтобы добраться до неё, откройте список с дополнительными настройками (кнопка с тремя точками рядом с кнопкой закрытия), а потом разверните список «Другие инструменты» (More tools).
+
+<video controls width="640">
+  <source src="video/chrome-devtools.mp4" type="video/mp4">
+  <track
+    label="Russian"
+    kind="subtitles"
+    srclang="ru"
+    src="video/closed-captions.vtt"
+  >
+</video>
+
+В операционных системах настройки прозрачности находятся разделах доступности и специальных возможностей. В некоторых системах прозрачность можно уменьшить, в других полностью отключить.
+
+<details>
+  <summary>Windows 10</summary>
+
+  Настройки > Персонализация > Цвета > Эффекты прозрачности
+
+</details>
+
+<details>
+  <summary>Windows 11</summary>
+
+  Настройки > Универсальный доступ > Визуальные эффекты > Эффекты прозрачности
+
+</details>
+
+<details>
+  <summary>macOS</summary>
+
+  Системные настройки > Универсальный доступ > Дисплей > Уменьшить прозрачность
+
+</details>
+
+<details>
+  <summary>iOS</summary>
+
+  Настройки > Основные > Универсальный доступ > Экран и размер текста > Уменьшить прозрачность
+
+</details>
+
+<details>
+  <summary>Android</summary>
+
+  Настройки > Специальные возможности > Улучшение видимости > Уменьшить прзрачность и размытие
+
+</details>
+
+## Как понять
+
+Прозрачный фон увеличивает когнитивную нагрузку на пользователей и уменьшает уровень читаемости текста. Этой настройкой пользуются:
+
+- Люди с особенностями зрения. Например, с астигматизмом или сниженным зрением.
+- Пользователи с когнитивными особенностями. К примеру, люди с дислекси́ей или синдром дефицита внимания.
+- Люди с мигренями и головными болями.
+
+<aside>
+
+🧠 Когнитивная нагрузка — это нагрузка на рабочую память человека, где хранится информация, которая помогает решать текущие задачи.
+
+</aside>
diff --git a/a11y/prefers-reduced-transparency/video/chrome-devtools.mp4 b/a11y/prefers-reduced-transparency/video/chrome-devtools.mp4
new file mode 100644
index 0000000000..0cb048ff19
Binary files /dev/null and b/a11y/prefers-reduced-transparency/video/chrome-devtools.mp4 differ
diff --git a/a11y/prefers-reduced-transparency/video/closed-captions.vtt b/a11y/prefers-reduced-transparency/video/closed-captions.vtt
new file mode 100644
index 0000000000..b91d62ceae
--- /dev/null
+++ b/a11y/prefers-reduced-transparency/video/closed-captions.vtt
@@ -0,0 +1,38 @@
+WEBVTT
+
+00:00:00.207 --> 00:00:02.712
+(NVDA)
+Настройка инструментов разработчика
+
+00:00:02.713 --> 00:00:05.928
+и управления ими. Меню, кнопка,
+подменю. Меню.
+
+00:00:06.420 --> 00:00:12.393
+Док… поиск, выпол…, открыть
+файл, другие инструменты. Анимация, 1 из 22.
+
+00:00:12.591 --> 00:00:21.744
+(Недоговаривая названия пунктов)
+Отрисовка, 11 из 22.
+
+00:00:21.999 --> 00:00:24.495
+Выдвигающаяся панель, показано.
+
+00:00:25.598 --> 00:00:37.169
+(Недоговаривая названия пунктов)
+
+00:00:37.177 --> 00:00:41.267
+Эмулировать медиафункцию CSS
+prefers-reduced-transparency.
+
+00:00:41.268 --> 00:00:44.985
+Запускает медиафункцию CSS
+prefers-reduced-transparency.
+
+00:00:44.986 --> 00:00:47.328
+Комбобокс, без эмуляции, свёрнуто.
+
+00:00:48.392 --> 00:00:53.769
+Развёрнуто, список.
+prefers-reduced-transparency: reduced, 2 из 2.