Compare commits

...
2 Commits
Author SHA1 Message Date
inherentlee f488a6aa54 remove draft flag
continuous-integration/drone/push Build is passing
2026-06-30 16:28:29 -07:00
inherentlee 8c135a09c7 core css 2026-06-30 16:28:05 -07:00
@@ -6,7 +6,6 @@ image:
tags:
- reference
- software
draft: true
---
What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few [browser defaults](https://browserdefaultstyles.com/){target="_blank" rel="external"} for a more pleasant browsing experience without needing much if any visual testing.
@@ -15,7 +14,7 @@ Want to just see the final stylesheet? [Skip to the end of the page](#result).
## CSS resets
Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended [Josh W. Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/){target="_blank" rel="external"}, which looks largely very solid to me. However, if using that particular reset, I would ***not*** reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually. I would, quite specifically, grab his rules 1 (box-sizing model) and 6 (improve media defaults). I also cover the ruleset from "improve media defaults" later under [the images section](#images), with an additional rule.
Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended [Josh W. Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/){target="_blank" rel="external"}, which looks largely very solid to me. However, if using that particular reset, I would ***not*** reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually.
## color
@@ -40,7 +39,7 @@ body {
### accents
Skip this section and go right to [focus indication](#focus-indication) if you have never had any color vision. If you've previously had color vision, have partial color vision, etc, read on.
To skip reading about accent colors, head right to [focus indication](#focus-indication).
If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. [XKCD has a color sheet based on a wide survey](https://xkcd.com/color/rgb/){target="_blank" rel="external"} that is potentially useful here. Validate that the color contrast is enough with a tool like [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/){target="_blank" rel="external"}. You might color your headers and links.