Hacker News Reader

Comment by darekkay | Hacker News Reader

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/

View on HN

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!).

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/

>unreadable for users with a common form of color blindness

or people with taste

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.

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?

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.

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.

What accessibility issues does the streamlit library have?

Loss of keyboard focus, no streamlined way to set tab order, no ability to set a specific ID components for screen readers, and more.

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.

I’d argue we should just be investing in generic tools that solve these problems once. Especially with recent advancements in AI.

This is absolutely critical and I wish the whole industry had your attitude!

Well put!

Radix Colors has a ton of accessibility stuff built in.

https://www.radix-ui.com/colors

(I work at WorkOS and Radix is an open source project of ours.)

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

thanks - looking into it

Stripe published a post on theirs: 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.

> niche

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

Reply on news.ycombinator.com