--- title: "CSS that picks its own readable text color" publication: "Frontend Focus" issue: 747 published_at: "2026-06-24" canonical_url: "https://frontendfoc.us/issues/747" --- Plus Grid Lanes' accessibility pitfalls, Mozilla's plan to curb the bots, and Quake gets a CSS port. Together with [![Tiger Data logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_282/e_make_transparent/co_white,e_outline:30/px1u7kjyvz7xnbm6ytir.png)](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) πŸš€ **Frontend** Focus #​747 β€” June 24, 2026 | [Read on the web](https://frontendfoc.us/issues/747) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/g8kuyjhhkl9o8cmpbaqx.jpg)](https://una.im/modern-css-theming/) [Modern CSS Theming with `light-dark()`, `contrast-color()`, and Style Queries](https://una.im/modern-css-theming/) β€” Get dark mode, automatic readable text, and per-component palettes, all from a single brand color with no JavaScript. Una combines `light-dark()`, the new `contrast-color()`, and style queries into one adaptive system, now Baseline across browsers. Una Kravets [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/02df574f.png)](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) [Your Loading Spinner Is a Slow Query in Disguise](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) β€” Behind it is an analytics query your database can't answer fast enough. TimescaleDB extends Postgres so dashboards query live data at scale. Hypertables, 95% compression, continuous aggregates. No second database. [Get $1000 credit to start](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter). Tiger Data (creators of TimescaleDB) sponsor πŸ”’ [PACT: Anonymous Credentials for the Web](https://hacks.mozilla.org/2026/06/pact-anonymous-credentials-for-the-web/) β€” Mozilla shares the technical details behind their PACT proposal β€” a privacy-preserving way to curb bot abuse. It aims to let sites rate-limit bots via cryptography, without the need to track users or tie access to your device. Dennis Jackson [Astro 7.0 Now Available](https://astro.build/blog/astro-7/) β€” The popular framework for content-driven sites goes all-in on speed: a new Rust-powered compiler, a Rust Markdown/MDX pipeline, and Vite 8's Rolldown bundler combine for builds 15–61% faster. Phillips, Stoppa, Kane (Astro) ✨ Astro's [Starlight framework](https://starlight.astro.build/) for building documentation sites on top of Astro has also just been updated to support Astro 7.0. 🟠 IN BRIEF - ⚑️ [Vite 8.1 is out now](https://vite.dev/blog/announcing-vite8-1), adding support for external CSS imports and plugin-level file dependencies in Lightning CSS. - 🐍 What's better than a normal HTML range slider? [A wavy/wiggly slider.](https://css-tip.com/wiggly-range-slider/) - πŸ–ΌοΈ A favicon is just an image, but what if...you could [store something inside one](https://www.timwehrle.de/blog/i-stored-a-website-in-a-favicon/). _Like the contents of a website perhaps_? - 🧐 Wes Bos shares a wild idea over on X β€” in the future might we just [stream in our user interfaces over video](https://x.com/wesbos/status/2067635204055789877)? πŸ“™ Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1782298034/uer7kofnbjrqja3oegkg.png)](https://matuzo.at/blog/2026/grid-lanes-accessibility) [Your Grid Lanes Will Likely Fail WCAG 2.4.3](https://matuzo.at/blog/2026/grid-lanes-accessibility) β€” A warning on the accessibility pitfalls of the new Grid Lanes feature. Manuel notes that it inherently breaks tab order, and while `flow-tolerance` can help, its default value is too low and even a high value is no silver bullet. Manuel Matuzovic [Animating the <`dialog`> Element Using View Transitions](https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/) β€” Rik quickly explains how to animate the <`dialog`> element using the View Transition API, takes a look at the Invoker Commands API, and shares some tips to improve the default behavior of the <`dialog`> modal. Rik Schennink [Front-End Devs Are Shipping Real iOS and Android Apps. Join Them](https://try.expo.dev/frontendfocus) β€” The same React you already write, now on real phones. Expo runs the builds, store submissions, and updates. Expo sponsor [Can Your AI Pass the Accessibility Test?](https://www.aaron-gustafson.com/notebook/can-your-ai-pass-the-accessibility-test/) β€” Aaron, along with Jessie Lorenz and Carie Fisher, recently gave a talk at Microsoft Build highlighting where coding agents fall short in regards to accessibility: _"Out of the box, most coding agents are pretty terrible when it comes to accessibility."_ Aaron Gustafson [Improving Card Patterns with Anchor Positioning](https://thatemil.com/blog/clickable-surface-expansion-using-anchor-position/) β€” Shares a pattern using CSS anchor positioning to solve some of the problems often found with clickable card surfaces. Emil BjΓΆrklund [Which Copyleft Licence is Suitable for an SVG?](https://shkspr.mobi/blog/2026/06/which-copyleft-licence-is-suitable-for-an-svg/) β€” Possibly more complex than you’d think, as SVGs are less β€˜images’ and more β€˜software’. Terence Eden [There’s No Need to Include `navigation` in Your Navigation Labels](https://www.tempertemper.net/blog/theres-no-need-to-include-navigation-in-your-navigation-labels) Martin Underhill [Do Websites Need to Function Exactly the Same on Every Platform?](https://www.bram.us/2026/06/21/do-websites-need-to-function-exactly-the-same-on-every-platform/) Bramus Van Damme [Ending Responsive Images](https://cloudfour.com/thinks/ending-responsive-images/) Jason Grigsby 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/clxriaymtrgilf7ape20.jpg)](https://netil.medium.com/billboard-js-4-0-release-canvas-rendering-mode-94-3-faster-overall-in-benchmark-894b18798ffe) [billboard.js 4.0: A JavaScript Chart Library Based on D3](https://netil.medium.com/billboard-js-4-0-release-canvas-rendering-mode-94-3-faster-overall-in-benchmark-894b18798ffe) β€” At nine years old, billboard.js now has a new, opt-in canvas-based rendering mode (SVG remains the default), smaller bundles, and better performance on large datasets. There are [hundreds of demos](https://naver.github.io/billboard.js/demo/) ranging from [donut charts](https://naver.github.io/billboard.js/demo/#Chart.DonutChart) and [funnel charts](https://naver.github.io/billboard.js/demo/#Chart.FunnelChart) to [overlapping bar charts](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarOverlap) and [radar charts](https://naver.github.io/billboard.js/demo/#RadarChartOptions.RadarAxis). Jae Sung Park (NAVER) [Kage: Shadow a Website for Offline Viewing](https://kage.tamnd.com/) β€” A tool that clones a web site and serves it up for offline viewing. The difference vs a normal _"Save As"_ is it handles JS-rendered sites by saving the DOM from a headless browser. Duc-Tam Nguyen [Render Clerk's Sign-In Components Flush, Without the Card Wrapper](https://go.clerk.com/f6TclvW) β€” The new elevation appearance option drops the card background, border, and shadow so your sign-in fits any layout. Clerk sponsor [Wely: A Lightweight Web Component Framework](https://litepacks.github.io/welyjs/) β€” A unified toolkit for building components without a heavy framework. One CLI handles scaffolding, styling, testing, and bundling, and the output is portable native Web Components with a runtime of ~13 KB (Lit internally, plus Tailwind). litepacks [Wirewiki: A Resource to Explore Infrastructure for Any Domain](https://www.wirewiki.com/) β€” Has a simple UI to do all sorts of common lookups including info on hosting, DNS, SPF, A, CNAME, TXT records, MX records, and lots more. Ruurtjan Pul [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1782293426/j2byxsvnkzo1vsbc2hxg.png)](https://precise-type.com/) [Precise Type: A Type Scale Tool to Craft Precise Typography](https://precise-type.com/) β€” A full-featured type scale tool to interactively customize modular or metric-based type scales. Also includes info on the models behind font size, line height, and letter spacing. Exports to CSS and CSV. Adonis Raul Raduca [Able Player v5.0.0 Released](https://www.joedolson.com/2026/06/able-player-v5-0-0-released/) β€” An accessible, cross-browser HTML5 media player (audio and video) designed to enhance the usability of audiovisual content for all users, including those with disabilities. [Homepage.](https://ableplayer.github.io/ableplayer/) Joe Dolson 🎨 [Palette Inspiration: Color Palettes Extracted from Famous Art](https://paletteinspiration.com/) β€” Want a palette inspired by a masterpiece (like [these Picassos](https://paletteinspiration.com/pablo-picasso-palettes/))? Search and explore palettes built from 23,000+ works of art in different styles and genres. Palette Inspiration πŸ“° Classifieds 🦊 Need to turn Word docs into PDFs in your app? [Step-by-step DOCX-to-PDF walkthrough](https://developer-api.foxit.com/developer-blogs/api-guides-tutorials/docx-to-pdf-api/?utm_source=draftdev&utm_medium=newsletter&utm_campaign=frontendfocus_20260624) with working Python and cURL code. πŸ‘€ ...and finally [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1782299314/i2ahzsfszkpqoyhmvzaj.png)](https://cssquake.com/) [πŸ‘Ή cssQuake: A Port Powered by PolyCSS](https://cssquake.com/) β€” We featured [PolyCSS](https://polycss.com) a few issues ago, and now someone has put it to work to create a CSS-powered Quake. The world is rendered as real HTML/CSS 3D geometry, without a WebGL or canvas renderer. Impressive stuff. You can [see the repo here](https://github.com/LayoutitStudio/cssQuake). Agustin Capeletto [taken](https://sinceyouarrived.world/taken) β€” This page reveals what your browser shares the moment you arrive on a site. No login, no form, no permissions. An interesting overview of the data points that are just offered up by default. Rise Up Labs πŸ“¬ **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://bsky.app/profile/brandrick.bsky.social) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)