There is a problem with color contrast in the
The background hsla(15, 75%, 97%, 1) is very close to #FCF4F2, but the latter is used in:
core/modules/system/css/system.theme.css: background-color: #fcf4f2;
core/themes/seven/style.css: background-color: #fcf4f2;
This lighter red #e62600 is just used in a few places in core/themes/seven/style.css
.form-item input.error, .form-item textarea.error, .form-item select.error {
background-color: hsla(15, 75%, 97%, 1);
border-color: #e62600;
border-width: 2px;
box-shadow: 0 5px 5px -5px #b8b8b8 inset;
color: #e62600;
}
This gives us a 4.2 Color Contrast according to http://leaverou.github.io/contrast-ratio/#%23e62600-on-hsla%2815%2C75%25...
In other places in core/modules/system/css/system.theme.css we use the darker color #a51b00 which has sufficient contrast against the light pink.
#a51b00 is more consistent, but might be too dark, but #e62600 is too light.
Comment | File | Size | Author |
---|---|---|---|
#12 | Screen Shot 2014-08-12 at 3.07.04 PM.png | 139.32 KB | mgifford |
#10 | form-error-contrast-2307641-10.patch | 735 bytes | mgifford |
#3 | Screen Shot 2014-07-22 at 3.32.26 PM.png | 204.54 KB | mgifford |
#1 | form-error-contrast-2307641-1.patch | 719 bytes | mgifford |
Screen Shot 2014-07-22 at 10.48.57 AM.png | 161.51 KB | mgifford |
Comments
Comment #1
mgiffordComment #2
Bojhan CreditAttribution: Bojhan commentedWhat the hell is that styling though? That seems completely incorrect.
Comment #3
mgiffordI probably changed to many colors.. That being said, my patch works:
I'm not sure how to improve it though.
Comment #4
mgiffordComment #5
LewisNymanCan we change the background red instead?
Comment #6
mgiffordProbably, but this doesn't seem to have much point does it?
background-color: hsla(15, 75%, 100%, 1);
Suggestions on lightening the pink background a little?
http://leaverou.github.io/contrast-ratio/#hsla%2815%2C%2075%25%2C%20100%...
Comment #7
mgiffordComment #8
LewisNymanAh I see what you mean. Ok, I think it makes sense to change the text colour to match the one we use in messages and status tables. That's exactly what the patch in #1 does.
Thanks!
Comment #10
mgiffordFile moved....
Comment #11
Bojhan CreditAttribution: Bojhan commentedDo you happen to have a before /after ?
Comment #12
mgiffordHere's a Before/After:
Comment #13
Bojhan CreditAttribution: Bojhan commentedCool, thanks!
Comment #14
alexpottCommitted f8c9cf8 and pushed to 8.0.x. Thanks!