There is a problem with color contrast in the
Improper color contrast screen capture

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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mgifford’s picture

Status: Active » Needs review
FileSize
719 bytes
Bojhan’s picture

What the hell is that styling though? That seems completely incorrect.

mgifford’s picture

I probably changed to many colors.. That being said, my patch works:

Screen shot with the patch

I'm not sure how to improve it though.

mgifford’s picture

Issue tags: +TwinCities
LewisNyman’s picture

Issue tags: +frontend, +CSS

Can we change the background red instead?

mgifford’s picture

Probably, 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%...

mgifford’s picture

Issue tags: -TwinCities +TCDrupal 2014
LewisNyman’s picture

Status: Needs review » Reviewed & tested by the community

Ah 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!

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 1: form-error-contrast-2307641-1.patch, failed testing.

mgifford’s picture

Status: Needs work » Needs review
FileSize
735 bytes

File moved....

Bojhan’s picture

Do you happen to have a before /after ?

mgifford’s picture

Here's a Before/After:
Screenshots with patch.

Bojhan’s picture

Status: Needs review » Reviewed & tested by the community

Cool, thanks!

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed f8c9cf8 and pushed to 8.0.x. Thanks!

  • alexpott committed f8c9cf8 on 8.0.x
    Issue #2307641 by mgifford: Fixed Color Contrast Insufficient with Error...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.