@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
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. ๐ค
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
Example of sequential, diverging and categorical swatches
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
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
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
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.
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.
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.
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
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
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.
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. ๐ค
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?
"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? ๐ค
i redesigned my website is it good or bad
chriscoyier.net
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. :)
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 <meta property="og:image"content="summary-image.png"/> tag. It would make shares stand out more. ๐
Screenshot of email newsletter
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?
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. ๐
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.
@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. ๐