HNHacker News
TopNewBestAskShowJobs

seanwilson

8,480 karma · joined December 29, 2014

Projects:

https://www.checkbot.io/ - Chrome extension that crawls your website checking it follows SEO/speed/security best practices

https://www.inclusivecolors.com/ - Create Tailwind-style color palettes that are WCAG accessible by design

https://seanwilson.itch.io/wordoid - A fast-paced word spelling web game!

---

Homepage: https://www.seanw.org

Bluesky: https://bsky.app/profile/seanw.org

LinkedIn: https://www.linkedin.com/in/seanw-org/

Twitter: https://twitter.com/seanw_org

Email: sw@seanw.org

SEEKING CONTRACT WORK | UX/UI & web design

Portfolio: https://www.seanw.org/

Location: Edinburgh, UK and remote (I’m used to time zone differences)

---

I help startups with the UX/UI and web design of their products. This includes websites, landing pages, screenshots and copywriting, and I can assist with frontend development where needed. My background as a startup founder and full stack developer helps me create practical design solutions that balance usability, aesthetics, development effort and performance. I work to fixed price quotes when projects are self-contained.

---

The best live example of my work is Checkbot (https://www.checkbot.io/), a browser extension that tests websites for SEO, speed and performance problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), website copy, and website articles on web best practices.

[ Rated 4.9/5, 50K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 20 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more:

https://www.seanw.org

Skills: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, website SEO and speed optimisation.

Note: For larger projects, I usually have my partner assist alongside me in the background to speed things up and I’m working towards starting a design studio with her in the future.

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you within one working day to arrange a call to discuss a quote and how we can work together.

submissionscomments
seanwilson··on Vanilla CSS is all you need
> CSS can be laser-like specific if you want it to. Want to only affect that thing? Use ids, inline styles or learn how to write proper selectors.

You've still go all the normal CSS problems like having to debug complex selectors, jumping between files to debug styling, having to name lots of things you're only going to use once, verbose media queries, verbose styling attributes, and not knowing when it's safe to delete styling because you don't know where it's shared.

And for what benefits? To say we're writing CSS "the right way", when it was designed for styling traditional documents and not for complex UIs?

This also strikes me as a "if everyone learned to do it properly, there wouldn't be a problem" statement. It's ignoring the reality that nobody can agree on the proper way to write CSS, and writing discipled CSS is fatiguing and time consuming. And even if you could get everyone to adopt the same approach, the above issues are still a big deal.

It's a real failing when a language or methodology requires you to invent your own complex discipline to tame it (e.g. C and C++), and get everyone on the team to follow this. At some stage, it's better to scrap everything and try again with what was learned to avoid the mess.

> 90% of CSS issues I heard complaints about boiled down to the complainers not having spent the time necessary to learn the basics. And the other 10% were solved by :has()

I really don't agree, I understand traditional CSS and how to use complex selectors and it's just not a good approach except mostly for styling traditional Markdown-like documents and adding your own utility classes. If laser-like specific selectors is something I want more of the time, I want this as the default and for it to be easy.

Tailwind is a very thin layer above CSS and you can't use it properly without knowing CSS. Coupled with the way you reuse styles in Tailwind by using templates (instead of sharing via classes), it solves most of the problems with CSS in a simple way that people find simple to follow.

Tailwind's major downside is it isn't the "traditional" way (which nobody can agree on anyway for complex UI styling), so Tailwind gets attacked for being the wrong way without its benefits and tradeoffs being examined properly.

seanwilson··on Vanilla CSS is all you need
> It's funny that it skips the entire cascading part of Cascading Style Sheets though. Are there major downsides besides that?

I think cascading is a bad default. It's useful, but only sometimes, and often causes headaches like unintended coupling and confusion about why rules are being overridden. The utility class approach (like Tailwind) makes a lot of issues like this go away. I don't see a good reason why the traditional approach is worth the extra pain or discipline.

seanwilson··on Ask HN: Freelancer? Seeking freelancer? (December 2025)
SEEKING WORK | UX/UI & web design

Portfolio: https://seanw.org/ Live example projects: https://checkbot.io/ https://inclusivecolors.com/

Location: Edinburgh, UK and remote (I’m used to time zone differences and async work)

---

I help startups with the UX/UI and web design of their products. This includes web apps, websites, landing pages, copywriting, and I can assist with frontend development where needed. My background of launching my own products and being a full stack developer helps me create practical designs that balance usability, aesthetics, development effort, and performance. I work to fixed price quotes for self-contained projects.

---

The best live example of my work is Checkbot (https://checkbot.io/), a browser extension that tests websites for SEO/speed/security problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), marketing, website copy, and website articles on web best practices.

[ Rated 4.9/5, 80K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 25 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more: https://seanw.org

Skills: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, Django, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, WCAG accessibility, website SEO/speed optimisation.

Note: For large projects, my partner usually assists me in the background (I’m working on starting a design studio with her in the future)

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you in one working day to arrange a call to discuss a quote and how we can work together!

seanwilson··on Ask HN: Who wants to be hired? (December 2025)
Location: Edinburgh, UK

Remote: Yes (I’m used to time zone differences and async work)

Willing to relocate: No

Technologies: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, Django, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, WCAG accessibility, website SEO/speed optimisation.

Résumé/CV: See https://seanw.org/ for portfolio, and https://checkbot.io/ and https://inclusivecolors.com/ for live example projects

Email: sw@seanw.org

---

SEEKING FREELANCE WORK | UX/UI & web design

I help startups with the UX/UI and web design of their products. This includes web apps, websites, landing pages, copywriting, and I can assist with frontend development where needed. My background of launching my own products and being a full stack developer helps me create practical designs that balance usability, aesthetics, development effort, and performance. I work to fixed price quotes for self-contained projects.

---

The best live example of my work is Checkbot (https://checkbot.io/), a browser extension that tests websites for SEO/speed/security problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), marketing, website copy, and website articles on web best practices.

[ Rated 4.9/5, 80K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 25 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more: https://seanw.org

Note: For large projects, my partner usually assists me in the background (I’m working on starting a design studio with her in the future)

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you in one working day to arrange a call to discuss a quote and how we can work together!

seanwilson··on GitLab discovers widespread NPM supply chain attack
Once you run the JavaScript of the npm library you just installed, if it's Node, what's to stop it accessing environment variables and any file it wants, and sending data to any domain it wants?
seanwilson··on Blasting Yeast with UV Light
For sourdough and breadmaking, I always find it funny how recipes and tips make out like yeast is almost delicate and hard to keep happy when we know yeast is super tough. It can survive drying, cold/freezing, high pressure, having no food for a long time, up to 50C heat, and more.

It's also easy and cheap to run experiments too like mixing salt directly with the yeast and seeing it doesn't make a noticeable difference to breadmaking, yet the myths persist.

seanwilson··on Ask HN: What Are You Working On? (Nov 2025)
That's awesome, thanks!

I'd also keen to hear from people who are interested in accessibility but don't know much about it too. I've tried to explain the WCAG contrast rules in the simplest way I can (interactively, via the live mockup example on the right and contrast indicator icons that appear on the left) but there's quite a lot to cover.

seanwilson··on Ask HN: Who wants to be hired? (November 2025)
SEEKING FREELANCE WORK | UX/UI & web design

Portfolio: https://seanw.org/

Live example projects: https://checkbot.io/ https://inclusivecolors.com/

Location: Edinburgh, UK and remote (I’m used to time zone differences and async work)

---

I help startups with the UX/UI and web design of their products. This includes web apps, websites, landing pages, copywriting, and I can assist with frontend development where needed. My background of launching my own products and being a full stack developer helps me create practical designs that balance usability, aesthetics, development effort, and performance. I work to fixed price quotes for self-contained projects.

---

The best live example of my work is Checkbot (https://checkbot.io/), a browser extension that tests websites for SEO/speed/security problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), marketing, website copy, and website articles on web best practices.

[ Rated 4.9/5, 80K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 25 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more: https://seanw.org

Skills: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, Django, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, WCAG accessibility, website SEO/speed optimisation.

Note: For large projects, my partner usually assists me in the background (I’m working on starting a design studio with her in the future)

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you in one working day to arrange a call to discuss a quote and how we can work together!

seanwilson··on Ask HN: What Are You Working On? (Nov 2025)
A tool for creating custom Tailwind-style color palettes for web and UI design that pass WCAG contrast requirements:

https://www.inclusivecolors.com/

The interface is optimized to let you quickly explore and tweak multiple tints/shades at once so you can customize all colors exactly how you want e.g. try dragging vertically through the saturation curve in one motion to edit all the tints/shades at once, or shift whole curves horizontally by dragging between the dots on a curve.

It uses the HSLuv color space, where (unlike say HSL) the WCAG contrast stays the same when you change the hue and saturation sliders. This makes it much easier to explore accessible colors choices as you know only changes to the lightness slider will impact the contrast. You can also switch from the WCAG2 contrast checker to using APCA, which is meant to correct for inaccuracies in WCAG2, such as it being too forgiving for dark mode color combos.

Note the mobile version is more of a preview and the desktop version has more features.

I probably need to add something like a tutorial as there's a lot going on, but I've added more hints and tooltips recently. Open to feedback on what's initially confusing and what changes might help!

seanwilson··on Valdi – A cross-platform UI framework that delivers native performance
> You write your logic in a common languages and then the UI is an external layer

Isn't reimplementing all your UI widgets, views, layouts and interactions for multiple platforms still a ton of work though? I'm not meaning people using things like React frameworks, but the suggestion of sticking to native only.

seanwilson··on Valdi – A cross-platform UI framework that delivers native performance
> its nearly better to write your business UI 3 times one for each platform.

Anyone have any experience of doing this for a complex and long-life app?

Sounds like a nightmare that would increase friction and decrease development fun by x10 because of the huge overhead and tedium of having to keep your features and tests in sync across platform for every change you want to iterate on, and requiring developers be proficient at multiple stacks.

I get the usual complaints about bad webview implementations, but separate native codebases sounds like a prohibitively enormous tradeoff if most users only perceive the UX as being a little better than a good webview implementation. I feel like I'm missing something that native codebases is suggested as if it's a simple alternative, or this is coming from people that aren't actually involved in this?

seanwilson··on Ask HN: Freelancer? Seeking freelancer?
SEEKING WORK | UX/UI & web design

Portfolio: https://seanw.org/

Live example projects: https://checkbot.io/ https://inclusivecolors.com/

Location: Edinburgh, UK and remote (I’m used to time zone differences and async work)

---

I help startups with the UX/UI and web design of their products. This includes web apps, websites, landing pages, copywriting, and I can assist with frontend development where needed. My background of launching my own products and being a full stack developer helps me create practical designs that balance usability, aesthetics, development effort, and performance. I work to fixed price quotes for self-contained projects.

---

The best live example of my work is Checkbot (https://checkbot.io/), a browser extension that tests websites for SEO/speed/security problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), marketing, website copy, and website articles on web best practices.

[ Rated 4.9/5, 80K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 25 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more: https://seanw.org

Skills: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, Django, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, WCAG accessibility, website SEO/speed optimisation.

Note: For large projects, my partner usually assists me in the background (I’m working on starting a design studio with her in the future)

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you in one working day to arrange a call to discuss a quote and how we can work together!

seanwilson··on Ask HN: What are you working on?
A tool for creating custom Tailwind-style palettes for web and UI design that have WCAG accessible contrast:

https://www.inclusivecolors.com/

It's more aimed at designers right now that have some familiarity with designing color palettes and want to customize everything, but I want to add more hand holding later. Open to feedback!

seanwilson··on Mesh2Motion – Open-source web application to animate 3D models
This is cool! I was confused how to get going at first and didn't realise it was a step-by-step wizard I had to follow, plus I only watched the demo video briefly. I loaded the human then clicked around the main area and couldn't get anything to happen, and almost gave up.

Suggestion to help with this: Instead of starting with a blank slate, start right at the end of the process with the human model loaded and animated, then the user can go "back" and change things once they've seen the kind of results they can get.

seanwilson··on Typst 0.14
> To make sure you got everything right, you can enable the new PDF/UA-1 export. PDF/UA is an international standard that helps to create universally accessible PDF files. When it is enabled, Typst will run additional checks against your document to find accessibility issues and optimize for accessibility rather than compatibility. It will find issues such as missing document titles, wrong heading hierarchies, and missing alternative descriptions.

This sounds great! Are accessible PDFs possible with LaTeX? Last time I looked, it wasn't a standard feature and there didn't seem to be any easy workaround which is a real problem when there's a requirement to produce accessible PDFs.

seanwilson··on Show HN: Scriber Pro – Offline AI transcription for macOS
Reds people choose are usually between dark and light, which doesn't contrast particularly well on anything because for good contrast you need a dark color vs a light color.

Green, yellow, red or whatever hue is fine, as long as it's dark or light enough. Colorblind and non-colorblind people can see how dark or light a color is (luminance), but they might not agree on the hue. That's why WCAG contrast checks require luminance contrast and not hue contrast.

It's best to use a contrast checker because it's not always intuitive how dark or light a color is e.g. yellow and lime are almost as light as white.

seanwilson··on Ask HN: What are you working on? (October 2025)
Cool! Here's a quick link for now with those colors:

https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvci...

I've sorted the colors by luminance/lightness and added a gray swatch for comparison so can explore which color pairs pass WCAG contrast checks.

I haven't really gotten into colorblind safe colors like this yet where the colors mostly differ by hue and not luminance. Colorblind and non-colorblind people should be able to tell colors apart based on luminance difference i.e. luminance contrast. Hue perception is impacted by the several different kinds of color blindness so it's much trickier to find a set of colors that everyone can tell apart. This relates to the WCAG recommendation you don't rely on hue (contrast) to convey essential information (https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.htm...).

The gray swatch above could be called colorblind safe for example because as long as you pick color pairs with enough luminance contrast between them, colorblind and non-colorblind people should be able to tell them apart. You could even vary the hue and saturation of each shade to make it really colorful, as a long as you don't change the luminance values the WCAG contrast between pairings should still pass.

seanwilson··on Ask HN: What are you working on? (October 2025)
The general idea is:

- Drag the hue and saturation curves to customise the tints/shades of a color. Look at the UI mockup as you do this to make sure the tints/shades look good together.

- The color pairings used in the UI mockup all initially pass WCAG contrast checks but this can break if you tweak the lightness curve of a color. The mockup will show warning outlines if this happens. Click on a warning and it'll tell you which color pairs need to have their lightness values moved further apart to fix it.

- Once you're happy, use the export menu to use your colors in your CSS or Figma designs. You can use the mockup as a guide for which color pairs are accessible for body text, headings, button outlines and so on.

Does that make more sense? You really need to be on desktop as well because the mobile UI is more of a demo.

seanwilson··on Ask HN: What are you working on? (October 2025)
Thanks for the feedback! Yeah, I appreciate there's a lot of background here around color palette design, UI design, color spaces, and accessibility so I likely need something like a video or tutorial. Another route is to have the tool start in a less freeform mode that handholds you through the process more.
seanwilson··on Ask HN: What are you working on? (October 2025)
I'm working on a tool for creating custom color palettes for web designs that pass WCAG contrast requirements:

https://www.inclusivecolors.com/

- You can precisely tweak every shade/tint so you can incorporate your own brand colors. No AI or auto generation!

- It helps you build palettes that have simple to follow color contrast guarantees by design e.g. all grade 600 colors have 4.5:1 WCAG contrast (for body text) against all grade 50 colors, such as red-600 vs gray-50, or green-600 vs gray-50.

- There's export options for plain CSS, Tailwind, Figma, and Adobe.

- It uses HSLuv for the color picker, which makes it easier to explore accessible color combinations because only the lightness slider impacts the WCAG contrast. A lot of design tools still use HSL, where the WCAG contrast goes everywhere when you change any slider which makes finding contrasting colors much harder.

- Check out the included example open source palettes and what their hue, saturation and lightness curves look like to get some hints on designing your own palettes.

It's probably more for advanced users right now but I'm hoping to simplify it and add more handholding later.

Really open to any feedback, feature requests, and discussing challenges people have with creating accessible designs. :)

seanwilson··on Ask HN: Freelancer? Seeking freelancer? (October 2025)
SEEKING WORK | UX/UI & web design

Portfolio: https://seanw.org/

Live example projects: https://checkbot.io/ https://inclusivecolors.com/

Location: Edinburgh, UK and remote (I’m used to time zone differences and async work)

---

I help startups with the UX/UI and web design of their products. This includes web apps, websites, landing pages, copywriting, and I can assist with frontend development where needed. My background of launching my own products and being a full stack developer helps me create practical designs that balance usability, aesthetics, development effort, and performance. I work to fixed price quotes for self-contained projects.

---

The best live example of my work is Checkbot (https://checkbot.io/), a browser extension that tests websites for SEO/speed/security problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), marketing, website copy, and website articles on web best practices.

[ Rated 4.9/5, 80K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 25 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more: https://seanw.org

Skills: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, Django, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, WCAG accessibility, website SEO/speed optimisation.

Note: For large projects, my partner usually assists me in the background (I’m working on starting a design studio with her in the future)

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you in one working day to arrange a call to discuss a quote and how we can work together!

seanwilson··on Ask HN: What are you working on? (September 2025)
An editor for creating custom accessible color palettes for web/UI design. :)

https://www.inclusivecolors.com/

It gives you precise control over every shade/tint (no AI or auto generation!) so you can incorporate your own brand colors, and helps you build palettes that have simple to follow color contrast guarantees by design e.g. all grade 600 colors have 4.5:1 WCAG contrast (for body text) against all grade 50 colors, such as red-600 vs gray-50, or green-600 vs gray-50. There's export options for plain CSS, Tailwind, Figma, and Adobe.

I'm really open to feedback on what problems and needs people have for creating accessible designs!

seanwilson··on Ask HN: Freelancer? Seeking freelancer? (September 2025)
SEEKING WORK | UX/UI & web design

Portfolio: https://seanw.org/

Live example projects: https://checkbot.io/ https://inclusivecolors.com/

Location: Edinburgh, UK and remote (I’m used to time zone differences and async work)

---

I help startups with the UX/UI and web design of their products. This includes web apps, websites, landing pages, copywriting, and I can assist with frontend development where needed. My background of launching my own products and being a full stack developer helps me create practical designs that balance usability, aesthetics, development effort, and performance. I work to fixed price quotes for self-contained projects.

---

The best live example of my work is Checkbot (https://checkbot.io/), a browser extension that tests websites for SEO/speed/security problems. The entire project is my own work including coding the extension itself, UX/UI design, website design (the homepage is optimised to load in 0.7 seconds, 0.3MB data transferred), marketing, website copy, and website articles on web best practices.

[ Rated 4.9/5, 80K+ active users, 100s of paying subscribers ]

---

I have 10+ years of experience, including a PhD in software verification and 5+ years working for myself helping over 25 companies including Just Eat, Triumph Motorcycles and Fogbender (YC W22). See my website for testimonials, portfolio and more: https://seanw.org

Skills: Figma, Sketch, TypeScript, JavaScript, Vue, Hugo, Jekyll, WordPress, Django, HTML/CSS, Bootstrap, Tailwind, OCaml, Java, Python, C, analytics, WCAG accessibility, website SEO/speed optimisation.

Note: For large projects, my partner usually assists me in the background (I’m working on starting a design studio with her in the future)

---

Email sw@seanw.org with a short description of 1) your project 2) how you think I can help 3) the business outcome you’re looking for and 4) any deadlines. I can get back to you in one working day to arrange a call to discuss a quote and how we can work together!

seanwilson··on Use of Color (Level a) WCAG 1.4.1 – Accessibility Design Tips
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.htm... says:

> If content is conveyed through the use of colors that differ not only in their hue, but that also have a significant difference in lightness, then this counts as an additional visual distinction, as long as the difference in relative luminance between the colors leads to a contrast ratio of 3:1 or greater. For example, a light green and a dark red differ both by color (hue) and by lightness, so they would pass if the contrast ratio is at least 3:1.

So the greyscale design at the top would pass as long as the header was black, and the links were grey with a 3:1 contrast vs the header, and 4:5 contrast between the links vs the background? The grey would have to be pretty light though.

My understanding is color blindness means some can't judge "hue contrast" but they'll still be able to judge "lightness contrast", and this guideline is more about not relying on hue contrast to convey information.

Similar for the green for online and red for offline example, picking a dark green and a light red (or even white, or even no dot) might also be enough visual distinction.

seanwilson··on What are OKLCH colors?
I'm not following. These examples are using the WCAG2 contrast algorithm which is well known to be flawed for people interested in this stuff, especially for dark themes so there should be lots of bad examples here? APCA is supposed to improve on this (see the example graphic comparing WCAG2 and APCA): https://git.apcacontrast.com/documentation/WhyAPCA.html

> But as @c-blake has rightly pointed out, this doesn't take into account the ratio of visible background pixels to foreground pixels. For example the contrast required for a single fullstop character, ".", is goting to be diffrent from a capital, "B".

So APCA includes more guidance on font weight and font size for more contexts (e.g. headings, body text, shorter text, copyright notices), but it's still going to be an approximation for edge cases like displaying a single fullstop character. If this case is common, you'd want to increase the contrast value instead of going with the minimum passing value, so the contrast algorithms can still help you.

There's a tradeoff with having guidelines that are very accurate (e.g. a contrast algorithm that counts pixels) vs simpler to follow (e.g. recommended font weight and size). People already find WCAG2 hard to follow as it is.

seanwilson··on What are OKLCH colors?
Maybe you've seen this but there's also https://github.com/Myndex/bridge-pca that does the "this color pair passes both APCA and WCAG2?" check in one pass.
seanwilson··on What are OKLCH colors?
Hi Alexei, thanks for your work on HSLuv! I love the simplicity of it, where you can use HSLuv as mostly a drop-in replacement for HSL which most designers are familiar with.

I keep seeing new tutorials on designing accessible palettes that still use HSL, where the WCAG2 contrast breaks and goes all over the place as you vary the hue and saturation. HSLuv makes life so much easier here and lets you focus on exploring colors that you know will pass, using a familiar looking color picker.

seanwilson··on What are OKLCH colors?
> I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally.

Yeah I understand, would you agree this is fairly rare when using APCA though?

I've had the opposite where the brand guide was suggesting we use a light on dark combo that passed WCAG2, yet it failed APCA, and worst of all clearly had poor contrast just by looking at it. Yet, some people will still go with it because WCAG2 gave it the okay haha.

seanwilson··on What are OKLCH colors?
You can pick colors that pass both APCA and WCAG contrast checks though so it's not a problem to use APCA recommendations now.

I find APCA is a little stricter than WCAG for light themes, and APCA is much stricter than WCAG for dark themes, to the point where you really shouldn't use WCAG for dark themes. So most of the time APCA is giving you stricter contrast that easily pass WCAG also.

I keep seeing mentions that APCA will let you finally use e.g. white on orange, or white on vibrant blue that pass APCA but fail on WCAG, but my feeling is there's not a lot of examples like this and most of these pairings only have okay contrast anyway, not great contrast, so it's not ideal to be stuck with WCAG's false negatives but not that big of a deal.

seanwilson··on What are OKLCH colors?
> It also works the other way around, where you can change the lightness value to create various color shades and there is no hue or saturation drift unlike in other color modes.

> In the example above, you can see that the OKLCH colors maintain consistent blueness across all of the shades, while in the HSL example, the lighter shades drift to purple and the darker ones muddy out towards grayish.

I see lots of automatic palette generator projects where the shades of each color are generated with OKLCH by only varying the lightness value on some chosen base color. The problem I find is if you look at popular open source palettes, the way the hand-crafted hue and saturation values vary across the shades for different hues isn't that predictable (the curve of the hue/saturation values over shades aren't straight lines or typical easing curves).

Hawking my own tool (using HSLuv with RGB for now), but you can load and compare the hue and saturation curves as they vary over shades of a color using example palettes from Tailwind 3, USWDS and IBM Carbon, plus tweak each shade to your liking:

https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvci...

So I think OKLCH is a nice starting base for palettes and a quick way to generate a color you need in CSS, but I think designers will always need to tweak the hue and saturation of each shade so it looks just right as there's no single right answer you could encode into the color space.

← PreviousPage 3 of 34Next →