5 ms·

I would love to see such tools have some accessibility DX built-in. The idea is to define the color palette in such a way that we know whether a color combinati

I would love to see such tools have some accessibility DX built-in. The idea is to define the color palette in such a way that we know whether a color combination is accessible just by looking at the color name. For example, using the USWDS design system, I know that blue-30 on gray-80 is accessible (WCAG AA), because the difference between both values is 50+. I once wrote a blog post about this (niche) concept: https://darekkay.com/blog/accessible-color-palette/ https://darekkay.com/blog/accessible-color-palette/

tomrod 3y ago
You identified the concept as niche, but I would argue this should be a first-class priority in web design. We will all be disabled at some point, permanently or temporarily. So many great tools are unusable due to accessibility reasons (like Streamlit!).
- csande17 3y ago
  The concept of color contrast isn't niche, but building your color palette around the WCAG contrast algorithm kind of is. It's useful for checking boxes if you're required to do WCAG audits, but is neither necessary nor sufficient to ensure actual users with disabilities are able to read your text. For example, #F00 text on an #000 background passes WCAG AA, but will be unreadable for users with a common form of color blindness: https://accessibility.psu.edu/color/colorvisiondetails/ https://accessibility.psu.edu/color/colorvisiondetails/
  - dylan604 3y ago
    >unreadable for users with a common form of color blindness or people with taste
  - tdeck 3y ago
    This brings up another interesting point I haven't considered before: how to make things not only functional, but beautiful for folks with different kinds of color vision. I wonder if there's any research into the aesthetics of design for including color blind folks.
    - yobert 3y ago
      Really I'm just surprised they haven't done the math on those color blindness types and just added that to the WCAG algorithm. Maybe someone has already?
  - shados 3y ago
    The wcag color contrast algorithm isn't great (and there is a proposal for a better one), but sufficient color contrast is necessary for a variety of visual conditions. That it's not good enough for some doesn't mean it's not more accessible than not doing it at all though.
    - csande17 3y ago
      A while back, a lot of Big Tech platforms (most notably GitHub) switched their "should we put black or white text on this user-supplied background color" algorithm to use the WCAG contrast formula. Doing so caused a lot of white-on-red badges to flip to black-on-red. Many users reported this was harder to read, even those without the form of color blindness which makes black and red hard to distinguish. Whether making this change was really "more accessible" than doing nothing is therefore pretty debatable, but it definitely helped them pass their WCAG audits.
- outofpaper 3y ago
  What accessibility issues does the streamlit library have?
  - tomrod 3y ago
    Loss of keyboard focus, no streamlined way to set tab order, no ability to set a specific ID components for screen readers, and more.
    - tomrod 3y ago
      EDIT: too late to edit the prior comment. Streamlit is one in particular where several people have requested for accessibility to be added to the roadmap, but it is continually declined. However, given how companies are getting sued for gaps in accessibility on websites, as well as public service providers, its hard to want to keep something in the tech stack that is unintentionally hostile to accessibility patterns and standards.
- rlt 3y ago
  I’d argue we should just be investing in generic tools that solve these problems once. Especially with recent advancements in AI.
- happytiger 3y ago
  This is absolutely critical and I wish the whole industry had your attitude! Well put!
grinich 3y ago
Radix Colors has a ton of accessibility stuff built in. https://www.radix-ui.com/colors https://www.radix-ui.com/colors (I work at WorkOS and Radix is an open source project of ours.)
- darekkay 3y ago
  Thanks, I like the approach! However, the light theme is not fully accessible. I've created an issue on GitHub: https://github.com/radix-ui/colors/issues/41 https://github.com/radix-ui/colors/issues/41
  - grinich 3y ago
    thanks - looking into it
deleted 3y ago
[deleted]
Zaheer 3y ago
Stripe published a post on theirs: https://stripe.com/blog/accessible-color-systems https://stripe.com/blog/accessible-color-systems I'm not aware of any tools though that leverage the concepts they laid out to generate new palettes.
KTibow 3y ago
> niche Material 3, a pretty big spec used by Google, has a color system that works like this

tomrod 3y ago

You identified the concept as niche, but I would argue this should be a first-class priority in web design. We will all be disabled at some point, permanently or temporarily. So many great tools are unusable due to accessibility reasons (like Streamlit!).

csande17 3y ago
The concept of color contrast isn't niche, but building your color palette around the WCAG contrast algorithm kind of is. It's useful for checking boxes if you're required to do WCAG audits, but is neither necessary nor sufficient to ensure actual users with disabilities are able to read your text. For example, #F00 text on an #000 background passes WCAG AA, but will be unreadable for users with a common form of color blindness: https://accessibility.psu.edu/color/colorvisiondetails/ https://accessibility.psu.edu/color/colorvisiondetails/
- dylan604 3y ago
  >unreadable for users with a common form of color blindness or people with taste
- tdeck 3y ago
  This brings up another interesting point I haven't considered before: how to make things not only functional, but beautiful for folks with different kinds of color vision. I wonder if there's any research into the aesthetics of design for including color blind folks.
  - yobert 3y ago
    Really I'm just surprised they haven't done the math on those color blindness types and just added that to the WCAG algorithm. Maybe someone has already?
- shados 3y ago
  The wcag color contrast algorithm isn't great (and there is a proposal for a better one), but sufficient color contrast is necessary for a variety of visual conditions. That it's not good enough for some doesn't mean it's not more accessible than not doing it at all though.
  - csande17 3y ago
    A while back, a lot of Big Tech platforms (most notably GitHub) switched their "should we put black or white text on this user-supplied background color" algorithm to use the WCAG contrast formula. Doing so caused a lot of white-on-red badges to flip to black-on-red. Many users reported this was harder to read, even those without the form of color blindness which makes black and red hard to distinguish. Whether making this change was really "more accessible" than doing nothing is therefore pretty debatable, but it definitely helped them pass their WCAG audits.
outofpaper 3y ago
What accessibility issues does the streamlit library have?
- tomrod 3y ago
  Loss of keyboard focus, no streamlined way to set tab order, no ability to set a specific ID components for screen readers, and more.
  - tomrod 3y ago
    EDIT: too late to edit the prior comment. Streamlit is one in particular where several people have requested for accessibility to be added to the roadmap, but it is continually declined. However, given how companies are getting sued for gaps in accessibility on websites, as well as public service providers, its hard to want to keep something in the tech stack that is unintentionally hostile to accessibility patterns and standards.
rlt 3y ago
I’d argue we should just be investing in generic tools that solve these problems once. Especially with recent advancements in AI.
happytiger 3y ago
This is absolutely critical and I wish the whole industry had your attitude! Well put!

grinich 3y ago

Radix Colors has a ton of accessibility stuff built in. https://www.radix-ui.com/colors https://www.radix-ui.com/colors (I work at WorkOS and Radix is an open source project of ours.)

darekkay 3y ago
Thanks, I like the approach! However, the light theme is not fully accessible. I've created an issue on GitHub: https://github.com/radix-ui/colors/issues/41 https://github.com/radix-ui/colors/issues/41
- grinich 3y ago
  thanks - looking into it

deleted 3y ago

[deleted]

Zaheer 3y ago

Stripe published a post on theirs: https://stripe.com/blog/accessible-color-systems https://stripe.com/blog/accessible-color-systems I'm not aware of any tools though that leverage the concepts they laid out to generate new palettes.

KTibow 3y ago

> niche Material 3, a pretty big spec used by Google, has a color system that works like this