DEV Community

loading...
Cover image for How do you deal with a11y?

How do you deal with a11y?

Franco Scarpa
BD in CS 🎓 Azure Developer at Nebula 🖥 Web Developer 🌐 Blogger ✍🏻 Always Learning 📚 Minimalism and Performance ⚙️ Lover of JAMStack and Eleventy ❤️
・1 min read

One thing I’ve always found difficult when developing my website was the color choice. I both love personal branding and make a website accessible to everyone. However, these two elements are in clear contrast between them. I find it impossible to make a website accessible while using the colors you love the most. So far, I’ve dealt with accessibility by choosing a color palette that ensured adequate contrast, by I’ve never liked it really much. Now I decided to use my favorite colors, which don’t respect a11y perfectly. The solution I plan to use consists of a button to provide a high contrast version of my website, as you can find on many other websites. However, I’d like to hear from you: how do you deal with color a11y on your website?

Discussion (2)

Collapse
erinb223 profile image
Erin Bensinger (she/her) • Edited

Excellent question! This is something I struggled with with my personal brand, too. I ultimately decided that contrast and accessibility is an important part of my personal values, so I needed to account for them. The way that I reconciled that was taking a few of my darker brand colors, saturating/darkening them until they met 7:1 contrast on a white background, and making some notes in my design system about which colors to use when conveying crucial information. For example, the darkest pink in my color palette was #B78689, and I adjusted it to #9C5E5F for use as text on buttons.

The color's not a perfect match with my original palette, and it's not my favorite color ever, but it's more accessible, which is ultimately more important to me (and to some of my readers, I'm sure!)

Collapse
francoscarpa profile image
Franco Scarpa Author

Thanks for your feedback!

Forem Open with the Forem app