Sean Wilson
@seanw.org
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
π» Design engineer seanw.org
π€ SEO checker extension checkbot.io
π§ Word game seanwilson.itch.io/wordoid
π¨ Accessible palette creator inclusivecolors.com
π΄σ §σ ’σ ³σ £σ ΄σ Ώ Edinburgh, Scotland
Pinned
Sean Wilson
@seanw.org
Β· Dec 5
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
inclusivecolors.com
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
Reposted by Sean Wilson
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. β€οΈ
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
buff.ly
December 31, 2025 at 5:26 PM
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. β€οΈ
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. π€
December 9, 2025 at 12:59 PM
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. π€
Reposted by Sean Wilson
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: 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 ...
checkbot.io
November 28, 2025 at 3:05 PM
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
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: 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 ...
checkbot.io
November 28, 2025 at 3:05 PM
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
Reposted by Sean Wilson
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...
December 10, 2024 at 12:10 AM
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...
inclusivecolors.com is featured in today's sidebar.io newsletter. π Thanks @uxcollective.bsky.social!
#designsky #design #webdesign #css #ux #accessibility #a11y #buildinpublic
#designsky #design #webdesign #css #ux #accessibility #a11y #buildinpublic
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
www.inclusivecolors.com
November 7, 2025 at 11:41 PM
inclusivecolors.com is featured in today's sidebar.io newsletter. π Thanks @uxcollective.bsky.social!
#designsky #design #webdesign #css #ux #accessibility #a11y #buildinpublic
#designsky #design #webdesign #css #ux #accessibility #a11y #buildinpublic
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
www.inclusivecolors.com
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
www.inclusivecolors.com
February 26, 2025 at 4:29 PM
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
www.inclusivecolors.com
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
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
January 14, 2025 at 8:02 AM
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
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
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.
January 13, 2025 at 7:03 AM
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.
Reposted by Sean Wilson
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
#a11y
January 13, 2025 at 2:38 AM
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
#a11y
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
#a11y
January 13, 2025 at 2:38 AM
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
#a11y
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 - Accessible color palette creator
Try it now to create your own color palettes!
www.inclusivecolors.com
January 11, 2025 at 2:26 PM
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
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
www.inclusivecolors.com #a11y #accessibility
InclusiveColors - Accessible color palette creator
Try it now to create your own color palettes!
www.inclusivecolors.com
January 11, 2025 at 2:15 PM
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
www.inclusivecolors.com #a11y #accessibility
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.
January 11, 2025 at 2:07 PM
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.
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.
January 11, 2025 at 1:58 PM
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.
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.
January 11, 2025 at 1:47 PM
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.
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. π€
Is there a way to keep track of how/when WCAG2 contrast will be improved? The GitHub discussions I found look inactive. π€
January 11, 2025 at 1:06 PM
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. π€
Is there a way to keep track of how/when WCAG2 contrast will be improved? The GitHub discussions I found look inactive. π€
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? π€·
January 11, 2025 at 7:52 AM
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? π€·
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?
January 11, 2025 at 7:41 AM
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?
"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? π€
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? π€
January 2, 2025 at 7:38 PM
"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? π€
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? π€
Reposted by Sean Wilson
December 21, 2024 at 5:10 PM
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?
APCA Contrast Calculator
The APCA Accessible Perceptual Contrast Algorithim BASIC VERSION.
www.myndex.com
December 22, 2024 at 2:53 PM
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?
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. :)
December 21, 2024 at 12:46 PM
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. :)
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.
December 21, 2024 at 12:00 PM
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.
@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 tag. It would make shares stand out more. π
December 18, 2024 at 7:02 PM
@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 tag. It would make shares stand out more. π