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
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.
Myndex™ Perception Research
Bridge PCA Advanced Perceptual Contrast Algorithim WCAG 2 Compatible APCA Contrast
bridgepca.com
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
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
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
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...
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
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!
inclusivecolors.com
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
❖ 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?
@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. 😄
Frontend Focus Issue 672: December 11, 2024
frontendfoc.us
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...
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.
developer.mozilla.org
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
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 - Accessible color palette creator
Try it now to create your own color palettes!
inclusivecolors.com