Contrib.social

[WAVE Accessibility] Multiple reported contrast issues

Open on Drupal.org →
Created on 11 October 2023, 12 months ago
Updated 12 October 2023, 12 months ago

Problem/Motivation

Test Case executed: Primary Navigation
WAVE reported: Very low contrast

Code:

<a href="/" class="nav-link text-uppercase is-active" data-drupal-link-system-path="&lt;front&gt;" style="color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);">Home</a>

Test Case: Google Translate
WAVE reported: Very low contrast

Code: 

<div class="skiptranslate goog-te-gadget" dir="ltr" style="color: rgb(102, 102, 102); background-color: rgb(0, 0, 0);">
<div id=":0.targetLanguage">

Test Case executed: Gallery
WAVE reported: Very low contrast

Code:

<a href="/" class="btn btn-lg btn-outline-light" style="color: rgb(235, 235, 235); background-color: rgb(255, 255, 255);">Gallery</a>

Steps to reproduce

1. View home page
2. View Location page with gallery

Proposed resolution

These styles are overridden by others on the select item, but we can add some other CSS so that WAVE understands what's going on.
Also "WAVE does not identify contrast issues in text with CSS transparency" so we need to use another tool like Color Contrast Analyzer to check the contrast there.

🐛 Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

🇺🇸United States froboy Chicago, IL

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024