#инструмент дня

Как сделать текст поверх картинки читаемым?

Те, кто смотрит сериалы с субтитрами, уже давно знает ответ: белый текст с темно-серой тенью.

Но в дизайне это работает не всегда. Не попадает в стиль. Тогда на помощь приходит оверлей: некий полупрозрачный слой сверху, который затеняет или осветляет изображение, выделяя текст на фоне с достаточным контрастом, соответствующим стандартам доступности WCAG.

Как подобрать цвет оверлея и прозрачность? Очень просто, воспользоваться вот этим инструментом: https://codepen.io/yaphi1/pen/oNbEqGV

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

#css #tool #a11y