Problem/Motivation

There are multiple not enough contrast issues on d.o
It was possible finding some of these issues using Firefox's accessibility tab, because it can analyze the contrast of the text and the full range of colors of the image behind it.

This should be investigated further, here are just a few examples -

On every d.o page -

  • Search placeholder (after clicking on the magnifying glass)
  • Try Drupal button


https://www.drupal.org/industries/government

  • Link to "read success stories" (because of background image)
  • Link in paragraph text (because of grey background)


https://www.drupal.org

  • "Get Involved" link

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
Drupal homepage.png2.48 MBshaal
Drupal for Government page.png2.62 MBshaal

Issue fork bluecheese-3114948

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

shaal created an issue.

tr’s picture

tr commented

Confirmed the two of the above problems with a "fast pass" analysis with Microsoft Accessibility Insights plugin for chrome:

Selector: a[title="Try\ Drupal"]
HTML: <a href="/try-drupal" title="Try Drupal">Try Drupal</a>
Error: Element has insufficient color contrast of 2.29 (foreground color: #ffffff, background color: #7cbc48, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1

Selector: .pane-vid-5781 > .pane-content > .card-link > .pane-style-card.pane-style-light.with-background > .pane-style-card-inner.pane-content-inner > .cta-text > .field-name-field-cta-body.field-type-text-long.field > .field-items > .even.field-item > p > strong
HTML: <strong>transform how they communicate and engage</strong>
Error: Element has insufficient color contrast of 4.34 (foreground color: #0678be, background color: #f5f5f5, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

It didn't flag the "Read success stories" or "Get involved" links, perhaps because they have a secondary, non-color indicator (the box around the text) to distinguish them. It also didn't flag the search box, but that may be because it requires JavaScript to reveal it - that requires more than a "fast pass" analysis.

chikaramike made their first commit to this issue’s fork.