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

Проверка контраста цветов является важной частью обеспечения доступности веб-приложений для пользователей с различными нарушениями зрения. Существует несколько стандартов и рекомендаций по минимальным значениям контрастности между текстом и фоном, чтобы информация оставалась читаемой для большинства пользователей, включая людей с дальтонизмом или ослабленным зрением.

Стандарты контраста

Наиболее распространённым стандартом для проверки контраста является рекомендация Web Content Accessibility Guidelines (WCAG) 2.1, которая определяет минимальное отношение контраста для текста и фона.

  • Для обычного текста минимальное отношение контраста должно быть не менее 4.5:1.
  • Для крупного текста (размер шрифта 18 пунктов или больше) минимальное отношение контраста должно быть не менее 3:1.
  • Для элементов пользовательского интерфейса, таких как кнопки или ссылки, минимальное отношение контраста также должно быть не менее 3:1.

Эти стандарты помогают убедиться в том, что веб-страницы доступны для людей с различными нарушениями зрения.

Использование WebdriverIO для проверки контраста

WebdriverIO, будучи популярным инструментом для автоматизации тестирования интерфейсов, имеет возможности для реализации проверки контраста между цветами на веб-странице. Процесс состоит из нескольких шагов:

  1. Получение цвета элемента. Сначала необходимо получить цвет текста и фон элемента, который требуется проверить. В WebdriverIO это можно сделать с помощью метода getCSSProperty(), который позволяет извлекать различные свойства CSS, включая цвет.

  2. Преобразование цвета в формат, пригодный для анализа контраста. Цвета, полученные с помощью getCSSProperty(), обычно представлены в формате rgb или rgba, который необходимо преобразовать в формат HEX для дальнейшей обработки. Для этого можно использовать JavaScript функции для конвертации RGB в HEX.

  3. Расчёт контрастности. Расчёт контраста между двумя цветами основывается на формуле, предложенной WCAG. Эта формула вычисляет контрастность между фоновым и текстовым цветом, принимая в учёт яркость каждого из них.

Формула контрастности WCAG:

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

где (L) — яркость цвета, а (R), (G) и (B) — компоненты красного, зелёного и синего соответственно.

Для контрастности используется следующее соотношение:

[ = ]

где (L_1) и (L_2) — это яркости более яркого и более тёмного цветов.

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

Вот пример, как можно использовать WebdriverIO для тестирования контраста:

const { expect } = require('chai');

function rgbToHex(rgb) {
    const result = rgb.match(/^rgb\((\d+), (\d+), (\d+)\)$/);
    return `#${((1 << 24) + (parseInt(result[1]) << 16) + (parseInt(result[2]) << 8) + parseInt(result[3])).toString(16).slice(1)}`;
}

function luminance(rgb) {
    const color = rgbToHex(rgb);
    const r = parseInt(color.substr(1, 2), 16) / 255;
    const g = parseInt(color.substr(3, 2), 16) / 255;
    const b = parseInt(color.substr(5, 2), 16) / 255;
    const a = [r, g, b].map(c => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)));
    return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
}

function contrastRatio(rgb1, rgb2) {
    const l1 = luminance(rgb1) + 0.05;
    const l2 = luminance(rgb2) + 0.05;
    return l1 > l2 ? l1 / l2 : l2 / l1;
}

describe('Контрастность цветов на странице', () => {
    it('должен проверять контрастность текста и фона', async () => {
        const textColor = await $('#textElement').getCSSProperty('color');
        const backgroundColor = await $('#textElement').getCSSProperty('background-color');
        
        const ratio = contrastRatio(textColor.value, backgroundColor.value);
        
        expect(ratio).to.be.greaterThan(4.5);  // Проверка для обычного текста
    });
});

Преимущества автоматизации проверки контраста

Автоматизация проверки контраста цветов с использованием WebdriverIO даёт несколько ключевых преимуществ:

  1. Повторяемость. Тесты можно запускать на разных этапах разработки, что позволяет гарантировать, что приложение будет доступным и соответствовать стандартам WCAG на протяжении всего жизненного цикла.

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

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

Рекомендации для улучшения контраста

  1. Использование цветов с хорошим контрастом. Применение чётких и контрастных цветов между текстом и фоном улучшает доступность веб-приложений, особенно для пользователей с ослабленным зрением.

  2. Применение альтернативных цветовых схем. С помощью медиазапросов можно предоставлять альтернативные цветовые схемы для пользователей, которые используют устройства с ограниченным восприятием цвета, например, для пользователей с дальтонизмом.

  3. Использование инструмента для проверки контраста. В дополнение к автоматизированным тестам, можно использовать сторонние инструменты для анализа контраста (например, Color Contrast Analyzer или встроенные инструменты в браузерах), чтобы вручную проверять сложные участки интерфейса.

Заключение

Контрастность цветов является критически важным аспектом доступности веб-приложений. Автоматизация проверки контраста с использованием WebdriverIO позволяет значительно упростить этот процесс, обеспечивая соответствие стандартам WCAG и улучшая удобство пользования для широкого круга пользователей.

Оглавление