Контрастность и цвета

Контрастность и цвета элементов на веб-странице напрямую влияют на восприятие интерфейса пользователем и соответствие стандартам доступности. Puppeteer предоставляет инструменты для проверки визуальных характеристик страниц, что позволяет автоматизировать тестирование цветовой схемы, контрастности текста и фона, а также корректности отображения стилей.

Получение стилей элементов

Для анализа цветов необходимо извлекать стили элементов. Puppeteer позволяет это делать через метод evaluate, который выполняет код внутри контекста браузера: 

const color = await page.$eval(&
    const style = window.getComputedStyle(el);
    return {
        color: style.color,
        backgroundColor: style.backgroundColor
    };
});
console.log(color); // { color: 'rgb(34, 34, 34)', backgroundColor: 'rgb(255, 255, 255)' }

window.getComputedStyle возвращает все вычисленные стили элемента, включая цвета текста, фона, границ и теней. Это позволяет проводить точный аудит визуального отображения элементов.

Проверка контрастности текста

Контрастность текста и фона важна для доступности, особенно для людей с нарушениями зрения. Для вычисления контрастности можно использовать формулу WCAG:

[ L = 0.2126 R + 0.7152 G + 0.0722 B]

где (R, G, B) — линейные компоненты цвета, преобразованные из sRGB. Контрастность рассчитывается как отношение яркости:

[ = , L_1 > L_2]

Пример проверки контрастности с использованием Puppeteer и Node.js: 

function rgbToLuminance(rgb) {
    const [r, g, b] = rgb.match(/\d+/g).map(x => x / 255).map(v => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrastRatio(foreground, background) {
    const L1 = rgbToLuminance(foreground);
    const L2 = rgbToLuminance(background);
    return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
}

const ratio = contrastRatio('rgb(34, 34, 34)', 'rgb(255, 255, 255)');
console.log(ratio); // 12.63

Значения контрастности для нормального текста должны быть не менее 4.5:1, а для крупного текста — 3:1, что соответствует стандартам WCAG 2.1.

Проверка динамических изменений цветов

Puppeteer позволяет отслеживать изменение стилей при взаимодействии с элементами. Например, изменение цвета кнопки при наведении: 

await page.hover('button#submit');
const hoverColor = await page.$eval('button#submit', el => getComputedStyle(el).backgroundColor);
console.log(hoverColor);

Такой подход важен для тестирования визуальных состояний: hover, active, focus, disabled. Автоматическая проверка этих состояний предотвращает ошибки в пользовательском интерфейсе.

Скриншоты и визуальное сравнение

Для комплексного тестирования контрастности и цветов используется визуальная регрессия. Puppeteer позволяет делать скриншоты отдельных элементов или всей страницы: 

await page.screenshot({ path: 'screenshot.png', fullPage: true });
await page.$('header').then(el => el.screenshot({ path: 'header.png' }));

Эти изображения можно использовать с инструментами сравнения, например pixelmatch или jest-image-snapshot, для обнаружения неожиданных изменений цветовой схемы.

Работа с CSS-переменными и темами

Современные приложения используют CSS-переменные для управления цветами интерфейса. Puppeteer позволяет получать значения переменных напрямую: 

const primaryColor = await page.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue('--primary-color'));
console.log(primaryColor);

Это упрощает тестирование смены тем (light/dark mode) и гарантирует, что все элементы корректно используют заданные цвета.

Подходы к автоматизации тестирования контрастности

  1. Сбор данных цветов: извлечение стилей текста, фона, границ, теней.
  2. Расчёт контрастности: использование формул WCAG для точной оценки.
  3. Состояния элементов: hover, active, focus, disabled.
  4. Визуальное сравнение: скриншоты и проверка с эталонными изображениями.
  5. Темизация и CSS-переменные: проверка соответствия цветовой палитры выбранной теме.

Применение этих методов позволяет выявлять проблемы с контрастностью ещё на этапе автоматического тестирования, повышая качество интерфейса и соответствие стандартам доступности.

Оглавление