Compare commits
2
Commits
7ede08fd43
...
f488a6aa54
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f488a6aa54 | ||
|
|
8c135a09c7 |
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user