DEV Community

Cover image for How do you deal with a11y?
Franco Scarpa
Franco Scarpa

Posted on

How do you deal with a11y?

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?

Top comments (2)

erinposting profile image
Erin Bensinger • 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!)

francoscarpa profile image
Franco Scarpa

Thanks for your feedback!