Заметка о подсвеченном тексте
В CSS уже довольно много способов выделить на странице что-то, с чем взаимодействует пользователь. Выделенный текст? Держи
Адриан Розелли напоминает, что любые выделения на странице должны соответствовать критериям доступности. Контраст фона выделения и фона под ним — 3:1. Контраст текста поверх фона выделения — 4.5:1.
К сожалению, даже браузер плохо справляется с этими требованиями. Но если вдруг вы решили прикрутить кастомные цвета для выделений — не забудьте проверить, что их вообще кто-нибудь увидит. А то я всё чаще натыкаюсь в интернетах на сайты, где фон выделения такого же цвета, как фон страницы — «брендинговый», самый важный цвет же. В итоге я не понимаю, удалось ли мне выделить вообще хоть что-то, переживаю, а потом убегаю с сайта и не возвращаюсь.
https://adrianroselli.com/2024/05/a-brief-note-on-highlighted-text.html
В CSS уже довольно много способов выделить на странице что-то, с чем взаимодействует пользователь. Выделенный текст? Держи
::selection. Грамматическая ошибка? На тебе ::grammar-error. Поиск по странице? Пока нет, но скоро будет ::search-text.Адриан Розелли напоминает, что любые выделения на странице должны соответствовать критериям доступности. Контраст фона выделения и фона под ним — 3:1. Контраст текста поверх фона выделения — 4.5:1.
К сожалению, даже браузер плохо справляется с этими требованиями. Но если вдруг вы решили прикрутить кастомные цвета для выделений — не забудьте проверить, что их вообще кто-нибудь увидит. А то я всё чаще натыкаюсь в интернетах на сайты, где фон выделения такого же цвета, как фон страницы — «брендинговый», самый важный цвет же. В итоге я не понимаю, удалось ли мне выделить вообще хоть что-то, переживаю, а потом убегаю с сайта и не возвращаюсь.
https://adrianroselli.com/2024/05/a-brief-note-on-highlighted-text.html