contrast #32

New Issue

hucste · 2021-10-06T12:23:38Z

hucste commented

2021-10-06 12:23:38 +00:00

hi, actually, contrast is not good for deficient, visually impaired.

yellow logo on white page
colors link on dark theme.

I suggest a slight touch-up, as:

(view on Firefox, dillo and netsurf)

same view for dark theme:

The CSS code:

<style>

#title {
	background-color: #8c8c8c;
    text-align: center;
    font-size:3em;
    font-weight:bold;
    margin:0.75em auto;
    text-shadow: 1px 1px 2px black;
}

#bsd {
    color: red;
    border-bottom: 1px solid red;
}
#open {
    font-style: italic;
    color: yellow;
    border-bottom: 1px solid red;
}

#banner {
    border-top: .2em double black;
    border-bottom: .2em double black;
    padding: .5em;
    margin-bottom: 2em;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

.puffies {
    margin: auto;
    text-align: center;
}

a {
    color: black;
    text-decoration: none;
}

.permalink {
    color: #009;
    text-decoration: none;
}
.permalink::before { content: "↗ "; }
.permalink:hover { color: plum; }

h1 {
    font-size: 1.5em;
    line-height: 0.9em;
}

p {
    text-align: justify;
    text-justify: auto;
}

html, body {
    font-size: 1.1em;
    font-family:serif;
    background-color: #fff;
}

body {
    margin: 1em auto;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    max-width: 1080px;
    border: 1px solid #111;
    background-color: #eee;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    line-height: 1.5;
}

main {
    column-count: 2;
    column-gap: 2em;
}

img {
    max-width: 100%;
    height: auto;
    margin: auto;
    border: 3px solid black;
    padding: .25em;
}

ul {
    padding-left: .5em;
}

blockquote {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 2.2rem;
}

blockquote:before,
blockquote:after {
    position: absolute;
    font-size: 4rem;
    color: rgba(128,128,128,0.5);
}

blockquote:before {
    content: open-quote;
    left: -1rem;
    top: -1.5rem;
}

blockquote:after {
    content: close-quote;
    text-align: right;
    width: 100%;
}

cite {
    font-size: smaller;
    text-align: right;
    width: 100%;
    display: block;
}

@media print {
    body { background-color:white; max-width:100%;}
    main { column-count:1; }
}

@media screen and (max-width:800px) {
    main { column-count: 1; }
}
@media (prefers-color-scheme: dark) {
    
    body { color: #e6e6e6; background-color: #111; }
    html { background-color: black; }
    img { border-color: #eee; }
    
    #banner { border-color: #eee; }
    #title { background-color: transparent; }
    
    .permalink { color: #500; }
    .permalink:hover { color: #200; }
}
        </style>

Remarks:

It seems, I've problem with dark theme managed by Chrome (on Devuan); CSS classes and ids seems not correctly managed or not at all! Quid?

hi, actually, contrast is not good for deficient, visually impaired. - yellow logo on white page - colors link on dark theme. I suggest a slight touch-up, as: ![](https://imgur.com/DkeKbc1.pnghttps://) (view on Firefox, dillo and netsurf) same view for dark theme: ![](https://imgur.com/LonWH5Y.pnghttps://) The CSS code: ``` <style> #title { background-color: #8c8c8c; text-align: center; font-size:3em; font-weight:bold; margin:0.75em auto; text-shadow: 1px 1px 2px black; } #bsd { color: red; border-bottom: 1px solid red; } #open { font-style: italic; color: yellow; border-bottom: 1px solid red; } #banner { border-top: .2em double black; border-bottom: .2em double black; padding: .5em; margin-bottom: 2em; text-align: center; display: flex; justify-content: space-between; } .puffies { margin: auto; text-align: center; } a { color: black; text-decoration: none; } .permalink { color: #009; text-decoration: none; } .permalink::before { content: "↗ "; } .permalink:hover { color: plum; } h1 { font-size: 1.5em; line-height: 0.9em; } p { text-align: justify; text-justify: auto; } html, body { font-size: 1.1em; font-family:serif; background-color: #fff; } body { margin: 1em auto; padding-left: 30px; padding-right: 30px; padding-bottom: 30px; max-width: 1080px; border: 1px solid #111; background-color: #eee; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); line-height: 1.5; } main { column-count: 2; column-gap: 2em; } img { max-width: 100%; height: auto; margin: auto; border: 3px solid black; padding: .25em; } ul { padding-left: .5em; } blockquote { position: relative; padding-top: 1rem; padding-bottom: 2.2rem; } blockquote:before, blockquote:after { position: absolute; font-size: 4rem; color: rgba(128,128,128,0.5); } blockquote:before { content: open-quote; left: -1rem; top: -1.5rem; } blockquote:after { content: close-quote; text-align: right; width: 100%; } cite { font-size: smaller; text-align: right; width: 100%; display: block; } @media print { body { background-color:white; max-width:100%;} main { column-count:1; } } @media screen and (max-width:800px) { main { column-count: 1; } } @media (prefers-color-scheme: dark) { body { color: #e6e6e6; background-color: #111; } html { background-color: black; } img { border-color: #eee; } #banner { border-color: #eee; } #title { background-color: transparent; } .permalink { color: #500; } .permalink:hover { color: #200; } } </style> ``` --- Remarks: It seems, I've problem with dark theme managed by Chrome (on Devuan); CSS classes and ids seems not correctly managed or not at all! Quid?

solene commented

2021-10-06 20:10:26 +00:00

I changed the dark theme as suggested by someone, it's less dark. Is it ok for the link color?

I merged a pull request adding a shadow for the title too, but I'm still not super happy about the result.

I changed the dark theme as suggested by someone, it's less dark. Is it ok for the link color? I merged a pull request adding a shadow for the title too, but I'm still not super happy about the result.

hucste commented

2021-10-06 21:42:24 +00:00

I changed the dark theme as suggested by someone, it's less dark. Is it ok for the link color?

bof-bof, I dont see really diff. (but, I read the CSS code, and I saw).

I merged a pull request adding a shadow for the title too, but I'm still not super happy about the result.

It's normal; it's "beurk!".
you have darkened the text of Open, and the shadow you applied is not straightforward, so it looks sloppy on the black text!

It's your choice but not good. I clearly prefer the style I proposed, which gives it a clear and straightforward look.

See this screenshot to compare:

the first one is luminous; the second is not and moreover slobbery.

> I changed the dark theme as suggested by someone, it's less dark. Is it ok for the link color? bof-bof, I dont see really diff. (but, I read the CSS code, and I saw). > I merged a pull request adding a shadow for the title too, but I'm still not super happy about the result. It's normal; it's "beurk!". you have darkened the text of Open, and the shadow you applied is not straightforward, so it looks sloppy on the black text! It's your choice but not good. I clearly prefer the style I proposed, which gives it a clear and straightforward look. See this screenshot to compare: ![](https://imgur.com/i8mUW9fl.png) - the first one is luminous; the second is not and moreover slobbery.

vinishor commented

2021-10-13 20:19:43 +00:00

Hello,
Some enhancements for the title have been released today and the shadow around the title is better now (my opinion).

There is something I might suggest you to add in your next PR : a diff between the original file and your changes.
It would be clearer, but also easier to see the differences. Sometimes, a random screenshot without context isn't really useful.

Hello, Some enhancements for the title have been released today and the shadow around the title is better now (my opinion). There is something I might suggest you to add in your next PR : a diff between the original file and your changes. It would be clearer, but also easier to see the differences. Sometimes, a random screenshot without context isn't really useful.

solene closed this issue

2021-11-11 17:02:29 +00:00

Sign in to join this conversation.