DEV Community

Cover image for Adding a high-contrast theme toggle to a pastel website

Adding a high-contrast theme toggle to a pastel website

Ingo Steinke on December 04, 2023

How can we make a legacy website more accessible? A common problem is the low color contrast of pastel designs, making text hard or impossible to r...
Collapse
 
moopet profile image
Ben Sinclair

Perhaps a silly question, but wouldn't it be better to make the accessible theme the default rather than offer it as an alternative?

Hopefully in the future, everyone's experience across websites will be based on their needs and preferences rather than ours anyway, but in the meantime the best we can do is to make things usable by as many people as possible out the box.

Collapse
 
ingosteinke profile image
Ingo Steinke

That's exactly the dilemma I failed to solve for a long time, as many graphic designers insist on keeping established corporate identity design systems which often don't comply with recommended contrast ratios. If you start with a high-contrast theme by default that doesn't match the brand design, you will violate hundreds of marketing rules instead, so you can guess what's the priority. And if it's text, users could switch the site to reader mode or use a screen reader no matter how the text looks like in the default setting - and then there is the new(?) prefers-contrast which would solve everything in theory, but not many people seem to know how to activate the setting.