From 37860608d0ee709ea24f1edb976b502b676a9488 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Mon, 11 Apr 2022 16:12:57 -0700 Subject: [PATCH] More on dark stylesheets - More on the APCA being premature - Notes on WebKit's shitty default dark colors needing to be overridden --- assets/p/wk_link.jxl | Bin 0 -> 781 bytes assets/p/wk_link.png | Bin 0 -> 945 bytes content/posts/website-best-practices.gmi | 11 ++++++++++- content/posts/website-best-practices.md | 9 ++++++++- 4 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 assets/p/wk_link.jxl create mode 100644 assets/p/wk_link.png diff --git a/assets/p/wk_link.jxl b/assets/p/wk_link.jxl new file mode 100644 index 0000000000000000000000000000000000000000..24269714a845937af93d3591dd72a3d8ed1e7164 GIT binary patch literal 781 zcmV+o1M>X;3P1u>fq>#d2m}ED_zNppK?IR!46C-adi2JGX?Fd6R z(=}_bnRJ_`ssigI<+}(m%%ozP-XcXpU&y7yl!s@?)hl3MnSA|9@0e)) zkZ}PkL1#nWn}#XPbODZess}&hu31!(FX54+BVQB2BM5+$0`o(tq*Vy}hB|Y^E%AgG zB{)*M&Wx`~iA@1T-vpB|m>4s6k&PET!toszKC}a4rl&w3CFsbak_WFWmUE5R^k%lC zn&cb9yQ={PdIyIT5y+Q)>Moe8Bp5us!xTR*tECWGt*|=Va0x^&{U}l;3?!Q_io??; zR1I>nh2}Nmpm`xt_2CJDmeuEq00uy%oW|brWiS%v7KzjbT!u9IQ6jbPxS}D^JH{_a L)kSHnA~Vz#veRq} literal 0 HcmV?d00001 diff --git a/assets/p/wk_link.png b/assets/p/wk_link.png new file mode 100644 index 0000000000000000000000000000000000000000..1733fb00b2fdc16a03300483671965ebbe975004 GIT binary patch literal 945 zcmV;i15W&jP)$}84tt&1&JIU9ux}b010g!9a{SsXZyrO9`Tzg_^s`zb9t#H6 z9VCEnx%ce<{|F9K9xH8y&;Hr}|0Q9o|K*(Al1KpsnE(T<#CkJD9v+iP9_yuBMUdLP z`2Q##9$2F3sO|s$(S{2WKQbO38WWz${Qr1pp&SWYp;@3H00084NklVH0cQ^b0zgj}xsgc_Bu*zMRwl~1M%rJ|^VzF2(7RwK%!a1*&wI8NZaJk7nO)8E z{Hnp8T+Y+0EV}OGcV`Q@Hard>Tj(0Rs=v0_{J^kpO?IuyPs``^k4C)4IsT}-1{E&3 z2nnj#`Tl80$*!LKStI8xS5)H>5leHGK4k`Wxzf{I+dEt$ z3y(mck_vr*c*xSLLw3FBD+Jju&hc~KRTZBnFNwsE9>l4x&#ccYs%y}do>kcP!M?SP z13__xT0fU?VEeA*tO6&SD5w5>;9t{R@dL=J%NuefXBBW&Ol>pZ?7ktuD6X+!eHzl0 z54y(WtO9V;+)1wWiLM^9ii(hJOO#w|XTpH1!b4e++m@(1NIoMPa9wLIBrD{NstCVh zz_q>#S@KL+%%ureq0-gEe-YZ2VxF!{xUxnrTc)-x(PhDukX##aWsMrT23p&))zPLe zG%yBSS$mn#y1)uGuV2Bo30KHc=F8hs;V`&@UmJ0CR8xo!47nLak>8otwqOCZdl_a# z1FjMmvVB*i~vRzYjK+*^1ob} zaMfj}yP||jXH!<(h%07U^ybrDL1Byv^+_;`1psaUbFS9aVzF2(7K_DV`TcwXZ7@IT TVqSF~00000NkvXXu0mjfE|0=( literal 0 HcmV?d00001 diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index bb78366..e3ac728 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -582,13 +582,22 @@ For more info, read the relevant docs: Dark themes are helpful for readers with migraines, photosensitivity (like me!), or dark environments. +If you include a "theme-color" directive in your document , then recent browsers will automatically switch their default stylesheets to dark-mode. Unfortunately, some older browsers (like Firefox-ESR) don't support this directive, and WebKit's default dark stylesheet has unreadable links: + +=> https://bugs.webkit.org/show_bug.cgi?id=209851 Webkit bug: default link colors should adapt to dark color scheme +=> gemini://seirdy.one/misc/wk_link.png WebKit dark-mode screenshot showing a dark blue link on dark gray background. + +WebKit versions in the wild are often out of date, so a fixed stylesheet would need to be out for many years before I would consider using default dark stylesheets. + When setting colors, especially for a dark background, I recommend checking your page's contrast using Advanced Perceptual Contrast Algorithm (APCA) values. You can do so in an online checker or Chromium's developer tools (you might have to enable them in a menu for experimental preferences. => https://www.myndex.com/APCA/simple Online ACPA Contrast Calculator Blue and purple links on a black background have much worse perceptual contrast than yellow or green links. -Note that the APCA isn't fully mature as of early 2022. Until version 3.0 of the WCAG is ready, pages should also conform to the contrast ratios described in the WCAG 2.2's success criteria 1.4.3 (Contrast: Minimum, level AA) or 1.4.6 (Contrast: Enhanced, level AAA). +Note that the APCA isn't fully mature as of early 2022. Until version 3.0 of the WCAG is ready, pages should also conform to the contrast ratios described in the WCAG 2.2's success criteria 1.4.3 (Contrast: Minimum, level AA) or 1.4.6 (Contrast: Enhanced, level AAA). This site's dark-mode stylesheet is an example of a palette that conforms to both the WCAG 2.2 AAA contrast requirements and APCA recommendations. + +=> https://yatil.net/blog/wcag-3-is-not-ready-yet WCAG 3 is not ready yet CSS filters such as "invert" are expensive to run, so use them sparingly. Simply inverting your page's colors to provide a dark theme could slow it down or cause a user's fans to spin. diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index b433dfe..14cec99 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -606,9 +606,16 @@ In fact, the CSS Working Group is working on a specification for re-coloring web If you do explicitly set colors, please also include a dark theme using a media query: `@media (prefers-color-scheme: dark)`. For more info, read the relevant docs [on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). Dark themes are helpful for readers with migraines, photosensitivity (like me!), or dark environments. +If you include a `theme-color` directive in your document ``, then recent browsers will automatically switch their default stylesheets to dark-mode. Unfortunately, some older browsers (like Firefox-ESR) don't support this directive, and WebKit's default dark stylesheet has [unreadable links](https://bugs.webkit.org/show_bug.cgi?id=209851). WebKit versions in the wild are often out of date, so a fixed stylesheet would need to be out for many years before I would consider using default dark stylesheets. + +
+{{}} +
WebKit's default dark stylesheet uses dark-colored links that are difficult to read.
+
+ When setting colors, especially for a dark background, I recommend checking your page's contrast using Advanced Perceptual Contrast Algorithm (APCA) values. You can do so in an [online checker](https://www.myndex.com/APCA/) (requires JavaScript) or Chromium's developer tools (you might have to enable them in a menu for experimental preferences). Blue and purple links on a black background have much worse perceptual contrast than yellow or green links. -Note that the APCA isn't fully mature as of early 2022. Until version 3.0 of the WCAG is ready, pages should also conform to the contrast ratios described in the WCAG 2.2's success criteria 1.4.3 (Contrast: Minimum, level AA) or 1.4.6 (Contrast: Enhanced, level AAA). +Note that [the APCA isn't fully mature](https://yatil.net/blog/wcag-3-is-not-ready-yet) as of early 2022. Until version 3.0 of the WCAG is ready, pages should also conform to the contrast ratios described in the WCAG 2.2's success criteria 1.4.3 (Contrast: Minimum, level AA) or 1.4.6 (Contrast: Enhanced, level AAA). This site's dark-mode stylesheet is an example of a palette that conforms to both the WCAG 2.2 AAA contrast requirements and APCA recommendations. CSS filters such as `invert` are expensive to run, so use them sparingly. Simply inverting your page's colors to provide a dark theme could slow it down or cause a user's fans to spin.