Colorblindness accessibility
Hey everyone, it seems impossible to have a specific set of foreground/background colors pass AA and AAA contrast checks for all types of colorblindness. Any ideas on how to make a specific set of foreground/background colors as accessible as possible for different types of colorblindness or any suggestions on that.
3 Replies
One idea coming to my mind would be to provide different foreground/background colors depending on the type of colorblindness which will impact the whole site theme. But would like to hear other suggestions
I don't really make changes unless needed. I have gotten in the habit of just hitting those AA/AAA ratings then checking the different types to see how it looks and changing only if needed.
https://polypane.app/blog/developing-for-color-blindness-with-polypane/ makes this really easy. I'm sure you can find alternatives but honestly PolyPane makes checking so many things very fast when developing.
The big one I can think of that you need to be more aware of is https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
It will have more impact along with prefers-color https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
@b1mind thank you, I will read those