#fbfbfb — Public Fediverse posts

@scottjenson I just checked it in WebAIM. 1.03:1(!!!!) contrast ratio (#fbfbfb to #f7f7f7). If I’d done this as a young designer, my boss would angrily have told me to do it again. What is going on at Apple?

(WebAIM would pass a UI component around #919191. For such large blocks, I’d say you _might_ be able to get away with somewhere round #dddddd, but not really any paler, and I’d personally be happier with something in the ‘c’ hex value range.)

@scottjenson I just checked it in WebAIM. 1.03:1(!!!!) contrast ratio (#fbfbfb to #f7f7f7). If I’d done this as a young designer, my boss would angrily have told me to do it again. What is going on at Apple?

(WebAIM would pass a UI component around #919191. For such large blocks, I’d say you _might_ be able to get away with somewhere round #dddddd, but not really any paler, and I’d personally be happier with something in the ‘c’ hex value range.)

@scottjenson I just checked it in WebAIM. 1.03:1(!!!!) contrast ratio (#fbfbfb to #f7f7f7). If I’d done this as a young designer, my boss would angrily have told me to do it again. What is going on at Apple?

(WebAIM would pass a UI component around #919191. For such large blocks, I’d say you _might_ be able to get away with somewhere round #dddddd, but not really any paler, and I’d personally be happier with something in the ‘c’ hex value range.)

@scottjenson I just checked it in WebAIM. 1.03:1(!!!!) contrast ratio (#fbfbfb to #f7f7f7). If I’d done this as a young designer, my boss would angrily have told me to do it again. What is going on at Apple?

(WebAIM would pass a UI component around #919191. For such large blocks, I’d say you _might_ be able to get away with somewhere round #dddddd, but not really any paler, and I’d personally be happier with something in the ‘c’ hex value range.)

@scottjenson I just checked it in WebAIM. 1.03:1(!!!!) contrast ratio (#fbfbfb to #f7f7f7). If I’d done this as a young designer, my boss would angrily have told me to do it again. What is going on at Apple?

(WebAIM would pass a UI component around #919191. For such large blocks, I’d say you _might_ be able to get away with somewhere round #dddddd, but not really any paler, and I’d personally be happier with something in the ‘c’ hex value range.)

@naipotato Just in general: Respect the user’s choice, don’t mess around with it just because YOU want your website to look a certain way. It’s generally easy too, here is what I use:

@ media (prefers-color-scheme: light) {
body {
color: black;
background-color: white;
}
blockquote, pre.sourceCode, pre.errors, figure{
background-color: #fbfbfb;
}
}
@ media (prefers-color-scheme: dark) {
body {
color: #cccccc;
background-color: #101010;
}
blockquote, pre.sourceCode, pre.errors, figure{
background-color: #202020;
}
a {
color: cyan;
}
a:visited {
color: #de3cc8;
}
}

Also, don’t specify the font if you don’t have to. Browser-fonts are user-configurable, and you should respect your user’s choice there too!

The web isn’t broken by default, only specify what you have too!

@naipotato Just in general: Respect the user’s choice, don’t mess around with it just because YOU want your website to look a certain way. It’s generally easy too, here is what I use:

@ media (prefers-color-scheme: light) {
body {
color: black;
background-color: white;
}
blockquote, pre.sourceCode, pre.errors, figure{
background-color: #fbfbfb;
}
}
@ media (prefers-color-scheme: dark) {
body {
color: #cccccc;
background-color: #101010;
}
blockquote, pre.sourceCode, pre.errors, figure{
background-color: #202020;
}
a {
color: cyan;
}
a:visited {
color: #de3cc8;
}
}

Also, don’t specify the font if you don’t have to. Browser-fonts are user-configurable, and you should respect your user’s choice there too!

The web isn’t broken by default, only specify what you have too!

@naipotato Just in general: Respect the user’s choice, don’t mess around with it just because YOU want your website to look a certain way. It’s generally easy too, here is what I use:

@ media (prefers-color-scheme: light) {
body {
color: black;
background-color: white;
}
blockquote, pre.sourceCode, pre.errors, figure{
background-color: #fbfbfb;
}
}
@ media (prefers-color-scheme: dark) {
body {
color: #cccccc;
background-color: #101010;
}
blockquote, pre.sourceCode, pre.errors, figure{
background-color: #202020;
}
a {
color: cyan;
}
a:visited {
color: #de3cc8;
}
}

Also, don’t specify the font if you don’t have to. Browser-fonts are user-configurable, and you should respect your user’s choice there too!

The web isn’t broken by default, only specify what you have too!

@naipotato Just in general: Respect the user’s choice, don’t mess around with it just because YOU want your website to look a certain way. It’s generally easy too, here is what I use:

@media (prefers-color-scheme: light) {
body {
color: black;
background-color: white;
}
blockquote, pre.sourceCode, pre.errors, figure{
background-color: #fbfbfb;
}
}
@media (prefers-color-scheme: dark) {
body {
color: #cccccc;
background-color: #101010;
}
blockquote, pre.sourceCode, pre.errors, figure{
background-color: #202020;
}
a {
color: cyan;
}
a:visited {
color: #de3cc8;
}
}

Also, don’t specify the font if you don’t have to. Browser-fonts are user-configurable, and you should respect your user’s choice there too!

The web isn’t broken by default, only specify what you have too!

@zulc22 your pixel was placed at 129,222 with color #fbfbfb. See more at https://fedicanvas.djara.dev