Sign in

Sean Wilson

@seanw.org
82 followers 34 following 36 posts

I post about web/UI design and dev :) 💻 Design engineer seanw.org 🤖 SEO checker extension checkbot.io 🧠 Word game seanwilson.itch.io/wordoid 🎨 Accessible palette creator inclusivecolors.com 🏴󠁧󠁢󠁳󠁣󠁴󠁿 Edinburgh, Scotland

PostsRepliesMedia
Sean Wilson @seanw.org · 07/05/2026
"Commercial use is prohibited without a written and signed commercial license agreement, except as provided by the W3 cooperative agreement for web content only"? So makers of paid web tools need a license? I'm interested in Bridge PCA but worried this restriction makes it harder for users to adopt.
110
Reposted by Sean Wilson
Myndex @myndex.bsky.social · 06/05/2026
Bridge PCA is rebooted and running at bridgepca.com Bridge PCA uses the APCA contrast engine, but provides a modified output that directly indicates WCAG 2 compliance.
bridgepca.com
Myndex™ Perception Research
Bridge PCA Advanced Perceptual Contrast Algorithim WCAG 2 Compatible APCA Contrast
152
Reposted by Sean Wilson
Lukas Oppermann @lukasoppermann.com · 31/12/2025
Great #tool to generate #accessible #colorScales buff.ly/WnyH49r I built something similar at work, but never got around polishing it enough to open source it. Great to see @seanw.org did. ❤️
buff.ly
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
041
Sean Wilson @seanw.org · 09/12/2025
I found if you import colors from a DTCG file they get added. But if you change the file and import again, new colors aren't added, removed colors aren't removed, but changed existing colors get updated. So the update workflow isn't great for my color tool (inclusivecolors.com) yet. 🤔
000
Reposted by Sean Wilson
Sean Wilson @seanw.org · 28/11/2025
My Chrome extension is 50% off the 1st year for Black Friday! checkbot.io 😄 Checkbot tests 100s of pages at once for SEO, speed & security issues like broken URLs, duplicate titles, bad HTML, insecure pages & 50+ more checks. #buildinpublic #seo #webdev #blackfriday
checkbot.io
Checkbot: SEO, web speed, broken link & security tester for Chrome
Checkbot finds SEO, speed & security problems before your website visitors do. Tests for broken links, duplicate content, invalid HTML/CSS/JavaScript, insecure pages & more. Test 100s of pages at ...
182
Sean Wilson @seanw.org · 28/11/2025
My Chrome extension is 50% off the 1st year for Black Friday! checkbot.io 😄 Checkbot tests 100s of pages at once for SEO, speed & security issues like broken URLs, duplicate titles, bad HTML, insecure pages & 50+ more checks. #buildinpublic #seo #webdev #blackfriday
checkbot.io
Checkbot: SEO, web speed, broken link & security tester for Chrome
Checkbot finds SEO, speed & security problems before your website visitors do. Tests for broken links, duplicate content, invalid HTML/CSS/JavaScript, insecure pages & more. Test 100s of pages at ...
182
Reposted by Sean Wilson
Sean Wilson @seanw.org · 10/12/2024
Thanks! You mean plot the editable HSL curves going left-to-right across the palette/swatches rather than plots going top-to-bottom across a single swatch? If it helps, you can make whatever kinds of gradients you want within a swatch right now. Quick example www.inclusivecolors.com?style_dictio...
Example of sequential, diverging and categorical swatches
131
Sean Wilson @seanw.org · 07/11/2025
inclusivecolors.com is featured in today's sidebar.io newsletter. 😄 Thanks @uxcollective.bsky.social! #designsky #design #webdesign #css #ux #accessibility #a11y #buildinpublic
inclusivecolors.com
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
1101
Sean Wilson @seanw.org · 26/02/2025
Here's an accessible palette creator I made recently if you're looking for more like this. :) You get complete control over every shade, a UI mockup preview, and can check the contrast between any color pair, which I find it really useful for creating branded palettes. www.inclusivecolors.com
inclusivecolors.com
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
010
Sean Wilson @seanw.org · 14/01/2025
I'm curious if there's better ways to build auto contrast checking into browsers, so problems get flagged the moment they appear during dev. 🤔 Frontend devs have to keep on top of security, speed, SEO, UX, mobile etc. and also accessibility. It can feel endless, so things get missed. #a11y
100
Sean Wilson @seanw.org · 13/01/2025
Thanks for the feedback! Yeah, it's tricky, there's 11 colors with 3 sliders each so there's not much room. The mobile UI is mostly there to get people to try the desktop one. Guessing most aren't designing on their phones? A thin contrast level bar or metric would probably fit though.
100
Reposted by Sean Wilson
Sean Wilson @seanw.org · 13/01/2025
Did you try on desktop? Click an element on the mockup to show the current contrast ratio, the target ratio (e.g. 4.5:1 for body text, 3:1 for border), and if it passes. :) The contrast menu at the top lets you compare any color pair. Mobile has limited space but outlines mockup failures. #a11y
Screenshot of InclusiveColors app demoing feature that shows WCAG contrast ratio of UI elements on a mockup.Screenshot of InclusiveColors app demoing feature that shows WCAG contrast ratio of color pairs.
121
Sean Wilson @seanw.org · 13/01/2025
Did you try on desktop? Click an element on the mockup to show the current contrast ratio, the target ratio (e.g. 4.5:1 for body text, 3:1 for border), and if it passes. :) The contrast menu at the top lets you compare any color pair. Mobile has limited space but outlines mockup failures. #a11y
Screenshot of InclusiveColors app demoing feature that shows WCAG contrast ratio of UI elements on a mockup.Screenshot of InclusiveColors app demoing feature that shows WCAG contrast ratio of color pairs.
121
Sean Wilson @seanw.org · 11/01/2025
Added basic mobile support to my color palette creator and lots of little bug fixes. 😄 Please reach out if you have any feature requests or challenging problems with creating your own branded palettes! www.inclusivecolors.com #designsky #a11y #design #webdesign #css #ux #accessibility #buildinpublic
inclusivecolors.com
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
1224
Sean Wilson @seanw.org · 11/01/2025
You might be interested in this color palette editor I've been working on then that lets you use ACPA or WCAG2. You can explore if they agree on which colors contrast e.g. APCA is much stricter about which pairs contrasts in dark mode themes. www.inclusivecolors.com #a11y #accessibility
inclusivecolors.com
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
010
Sean Wilson @seanw.org · 11/01/2025
But if we know WCAG2 is inaccurate because we can see it with our own eyes, and digital accessibility practitioners care about actual accessibility and not box ticking, it makes a lot of sense to use/promote at least BridgePCA if ACPA solves known false positives/negatives from WCAG2.
110
Sean Wilson @seanw.org · 11/01/2025
Yep, I find designers + devs already give up because they find following WCAG2 contrast hard. If APCA's contrast calculation is more accurate, it's a no-brainer to use it, but its extra rules for different types of text, silver/gold level etc. is going to overwhelm people IMO.
010
Sean Wilson @seanw.org · 11/01/2025
I'm not sure what you mean by it not making sense when there's obvious examples of WCAG2 having false positives and false negatives? I'm not so bothered about APCA allowing e.g. some use of orange on white, but for dark themes, WCAG2 is very lax (as in, inaccurate/unhelpful) about what contrasts.
120
Sean Wilson @seanw.org · 11/01/2025
It makes sense APCA is promoted when we know WCAG2 is inaccurate and there isn't another replacement in discussion, unless you know of one? BridgePCA seems a reasonable stopgap. Is there a way to keep track of how/when WCAG2 contrast will be improved? The GitHub discussions I found look inactive. 🤔
120
Sean Wilson @seanw.org · 11/01/2025
All designers should make a small effort to learn a few weeks worth of CSS, and devs should learn some design too e.g. helps designers avoid hard to code designs, helps devs fill in the gaps in responsive design mockups. I can't understand the reasons why anyone would avoid this low hanging fruit? 🤷
010
Sean Wilson @seanw.org · 11/01/2025
When you say "APCA is no longer part of WCAG3" you're just referencing it got removed in Jan 2023 because "Exploratory content that does not gain WG support to proceed to the next stage within 6 months is automatically removed" so this isn't new? It's still in discussion for WCAG3?
110
Sean Wilson @seanw.org · 02/01/2025
"Use long versions of command-line flags": Ha, I wish devs did this always, like in obscure build/CI script steps where you always forget what flags do. For 7, 8, 9, feels like there's a balance not to automate too much because the snippets start to get scary/complex and hard to debug? 🤔
150
Reposted by Sean Wilson
Chris Coyier @chriscoyier.net · 21/12/2024
i redesigned my website is it good or bad chriscoyier.net
461342
Sean Wilson @seanw.org · 22/12/2024
For comments about orange not contrasting well on brown, try the APCA contrast checker (WCAG is inaccurate for dark mode colors): www.myndex.com/BPCA/?BG=2a2... To get the 4.5 WCAG compatible contrast you need for small text, you can shift the orange hue right a little towards yellow?
myndex.com
APCA Contrast Calculator
The APCA Accessible Perceptual Contrast Algorithim BASIC VERSION.
020
Sean Wilson @seanw.org · 21/12/2024
Ah, yes, I meant include a label for screen readers but have it visually hidden. I don't think there's any exceptions for when a field can go without a label. :)
010
Sean Wilson @seanw.org · 21/12/2024
It's fine for forms with a single simple field though? I see this advice often without any exceptions, but almost every website with search uses an input field with no label. I don't see it being a problem in that case myself. It's also so common there, designs that go against this look strange.
110
Sean Wilson @seanw.org · 18/12/2024
@frontendfocus.bsky.social Guessing you know this, but when I see shared links to your homepage and newsletter pages there's no summary image shown, probably because you're missing something like a <meta property="og:image"content="summary-image.png"/> tag. It would make shares stand out more. 😄
010
Reposted by Sean Wilson
Frontend Focus 🚀 @frontendfocus.bsky.social · 18/12/2024
Here's the last issue of Frontend Focus for the year, and it's a round-up of just what went down in 2024: frontendfoc.us/issues/673
Screenshot of email newsletter
1164
Reposted by Sean Wilson
Adham Dannaway @adhamdannaway.bsky.social · 16/12/2024
❖ How to create typography variables in Figma👇 Text styles use variables for: ◆ Font family ◆ Font weight ◆ Font size ◆ Line height Makes it faster & easier to customise typography. From my Practical Ui Figma design system: www.practical-ui.com What do yours look like?
161
Sean Wilson @seanw.org · 18/12/2024
Welcome to Bluesky Adham! I use this approach too of only scaling down e.g. the h1/h2/h3 sizes on mobile widths, and the rest stay the same. Compared to gradually scaling all headings by screen width (like in Bootstrap), this way is predictable, with simpler code, and is easier to mockup in Figma. 😄
110
Sean Wilson @seanw.org · 12/12/2024
The problem HSL has is the "lightness" slider is unintuitive: the "hue" and "saturation" sliders change the real lightness too. This makes picking contrasting color pairs difficult because contrast depends on the lightness ratio. I'm using hsluv.org in my inclusivecolors.com tool because of this.
inclusivecolors.com
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
110
Sean Wilson @seanw.org · 12/12/2024
@frontendfocus.bsky.social Thanks for the mention of my color palette creator inclusivecolors.com in the latest Frontend Focus newsletter frontendfoc.us/issues/672! I wasn't sure where all the extra traffic was coming from at first. 😄
frontendfoc.us
Frontend Focus Issue 672: December 11, 2024
120
Sean Wilson @seanw.org · 12/12/2024
An under discussed challenge is how to make branded and visually pleasing designs that follow WCAG. Many designers know e.g. headings, body text, icons and borders should have good contrast, but give up when they can't find high-contrast options that look good and are on-brand. #accessibility
030
Sean Wilson @seanw.org · 11/12/2024
Making sustainable/green websites has lots of overlap with making fast loading websites, but with emphasis on overall page weight (including below-the-fold) and green web hosting? It's interesting to see standards here evolve! #webdesign #webdev #climatechange developer.mozilla.org/en-US/blog/i...
developer.mozilla.org
Introduction to web sustainability | MDN Blog
What can web designers and developers do to build a more sustainable web? This post explores the environmental impacts of web technologies and looks at some of the ways we can build greener websites.
020
Sean Wilson @seanw.org · 10/12/2024
"I’m currently researching evaluation criteria for websites" - By the way, you might also be interested in my website SEO/speed/security testing guide checkbot.io/guide/ and the Chrome extension checkbot.io that crawls a site to check the suggestions are followed.
checkbot.io
SEO, Speed & Security Best Practices
The Checkbot Web Developer Guide is a comprehensive resource that details 50+ web best practices that boost the SEO, speed and security of your site. Learn why duplicate content issues impact your sea...
000
Sean Wilson @seanw.org · 10/12/2024
Thanks Doug! 🙂 Let me know if you have any feedback because I'm still figuring out how much flexibility people need in creating accessible palettes, and whether a more opinionated and easier to use mode is preferred. I'm hoping to add more tools and WCAG related articles/guides on colors later too.
000
Sean Wilson @seanw.org · 10/12/2024
Hmm, so the sequential swatch was easy enough in my tool but the diverging/categorical ones were more awkward. I might end up with multiple specialized simple color tools rather than one complex general tool. So, let me know if you have any other interesting color needs/problems like this. 😄
000
Sean Wilson @seanw.org · 10/12/2024
Thanks! You mean plot the editable HSL curves going left-to-right across the palette/swatches rather than plots going top-to-bottom across a single swatch? If it helps, you can make whatever kinds of gradients you want within a swatch right now. Quick example www.inclusivecolors.com?style_dictio...
Example of sequential, diverging and categorical swatches
131
Sean Wilson @seanw.org · 09/12/2024
Cool, something like atlassian.design/foundations/...? Do you get problems like saturation in dark mode gets too high? They say "symmetry is a great place to start...may not work for all use cases". This approach sounds more straightforward to automate and manage though.
atlassian.design
Color new - Palette - Foundations - Atlassian Design System
Our color palette is a selection of colors that work together to create consistency in products.
000
Sean Wilson @seanw.org · 09/12/2024
If you can pick the brand colors, it's less hassle with uniform lightnesses. Otherwise, it's fine for the steps/grades to vary in lightness a little (Tailwind does this), as long as the contrasting pairs are predictable. My color tool related to this might be interesting here: inclusivecolors.com
inclusivecolors.com
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
010
Sean Wilson @seanw.org · 09/12/2024
Quick accessible dark mode palette exploration using my inclusivecolors.com tool. 🙂 I'm curious what steps designers follow to make a dark mode palette from an existing light mode palette, and how they keep them both in sync as they tweak colors later? #designsky #a11y #design #webdesign #css #ux
Demo of an accessible dark mode palette with 8 color swatches, shown on a UI mockup. Generated via http://inclusivecolors.com/.
1321
Sean Wilson @seanw.org · 07/12/2024
Thanks Des! 🍕 Read on your feed that you're a voiceover user, and it reminded me of this color picker that reads aloud color descriptions which I thought was cool: react-spectrum.adobe.com/blog/accessi... Curious how useful such a tool is.
react-spectrum.adobe.com
Accessible Color Descriptions for Improved Color Pickers
Recently, we released a suite of color picker components in React Aria and React Spectrum. Since colors are inherently visual, ensuring these components are accessible to users with visual impairments...
110
Sean Wilson @seanw.org · 05/12/2024
Depends on the project? If there's uncertainty in the messaging, copy, content, branding, visuals etc. and multiple stakeholders involved, low-fi designs help keep the feedback focused and avoids confusion. This is less of a problem with 1 stakeholder and established branding for example.
000
Sean Wilson @seanw.org · 05/12/2024
Hello Bluesky! 😄 Just to see how this works, for my first post, here's my side project inclusivecolors.com for creating WCAG accessible color palettes for web/UI design. Feedback very welcome! #accessibility #a11y #wcag #design #graphicdesign #webdev #webdesign #uidesign #css #figma #tailwind #ux
inclusivecolors.com
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
9315