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?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (2)
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!)
Thanks for your feedback!