CSS

Контент, т.е. html имеет приоритет перед внешним видом.

Поэтому CSS должен делать две вещи:

  1. Не искажать html при отключенном файле CSS
  2. Не искажать html теги при включенном файле CSS

Цвет и фон

Проверяйте чтобы фон и текст сочетались.

Проверяйте чтобы фон и текст сочетались при отключенном файле CSS.

Конвертор контрастного цвета JS

Код ниже позволяет автоматически рассчитать для цвета HEX контрастный цвет. Один из таких цветов может быть фоном, а другой текстом. 
function setContrastColor(color) {
    const arr = color.split("");
    const red = +("0x" + arr.slice(1, 3).join(""));
    const green = +("0x" + arr.slice(3, 5).join(""));
    const blue = +("0x" + arr.slice(5).join(""));
    const luma = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
    return luma > 0.5 ? "#000000" : "#ffffff";
}

Пример реализации, где клик по названию цвета делает выбранный цвет фоном, а все тексты на странице получают контрастный цвет в зависимости от цвета фона - черный или белый.

Невидимость элементов

Элемент может быть невидим на экране, но видим для screeneader. Но также возможно сделать элемент невидимым и для экрана и для программы-чтеца.

Хорошая идея состоит в том, чтобы сделать видимым нужный контент для screeaneader. Бонусом (и очень веским) мы получим скорость работы web-приложения. Дело в том, что если элемент не видим, но есть в DOM (opacity: 0), то он доступен для screeneader, а браузер для появления такого элемента использует Repeaint. Если элемент не в DOM (display: none), то это элемент невидим для screeneader, а браузер для появления такого элемента использует Reflow. Пересчет всей страницы (Reflow) - это намного более дорогая по ресурсам операция, чем перерисовка отдельной части DOM (Repeaint).

Проверка на zoom

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

ADAAA и W3C считают, что веб-страница не должна искажаться при zoom 200% и меньше.

back