[Resolved] Low contrast of Site Description and Primary Navigation

[Rolandas]

Hi

Thanks for the very fast and good theme, and the great support.

The theme is very fast and I succeeded to achieve great Google Lighthouse scores on Mobile mode
Performance: 100 (sometimes 99 or 98, cheap hosting)
Accessibility: 100
Best Practices: 100
SEO: 100

But, on desktop mode i have a problem with Accessibility:
Performance: 100
Accessibility: 94 (I can not do anything)
Best Practices: 100
SEO: 100

Why Accessibility: 94?

Google Lighthouse > Device > Desktop says:

Contrast
These are opportunities to improve the legibility of your content.
Background and foreground colors do not have a sufficient contrast ratio.
Failing Elements: div.site-description

But
site-description is black and Primary Navigation is white:

.navigation-branding .site-description {
	color: #000;
}

Customizing > Colors > Primary Navigation > Background > #ffffff
black text on a white background this is the maximum contrast!
Versions 3.0.3, 1.12.3

How to solve this problem?

[David]

Hi there,

did you resolve the issue ? I just ran a Lighthouse test and got 100 score for desktop accessibility.

[Rolandas]

NO
I have teh same result:

Chrome > (F12)Develpors tools > Lighthouse > Device > Desktop
Accessibility: 94
Background and foreground colors do not have a sufficient contrast ratio.
Low-contrast text is difficult or impossible for many users to read. Learn more.
Failing Elements: div.site-description

[Rolandas]

NO, the problem exists

I have the same result:
Chrome > incognito window > mysite url > (F12)Develpors tools > Lighthouse > Device > Desktop >
Generate report: Accessibility: 94

Background and foreground colors do not have a sufficient contrast ratio.
Low-contrast text is difficult or impossible for many users to read. Learn more.
Failing Elements: div.site-description

***
I tried different things:
z-index -9999; for body and
z-index 9999; for .insight-navigation elements,
background-color: white! important;
for .insight-navigation elements and for .site-description.
***
I guessed low contrast is because foreground .site-description color: #000; is comparison to body background-color: #949597;, not with Navigation white,
and I change body background-color from #929497 (Contrast Ratio was 6.9:1) to #949597…
but #000 and #949597 (Contrast Ratio now is 7:1, full WCAG full pass!).
***
funny but I reinstalled chrome

[David]

This is what i see when i test the site:

https://www.screencast.com/t/NcnRglmDyZt2

[Rolandas]

This is on desktop mode?

[David]

Yeah … running latest version of Chrome on MacOS. Odd … maybe Googles A11LY contrast checker is not that great.

Try adding this CSS:

.navigation-branding .site-description {
    background: #fff;
}

this adds a definitive background color to that element.

[Rolandas]

I tried, but no changes.

There may be a reason I use Header as navigation and a site tagline is added
Plugin > Snippets > Code

<?php>
// https://docs.generatepress.com/article/navigation-as-a-header/
add_filter( 'generate_site_title_output', function( $output ) {
    $tagline = '<div class="site-description">verslo procesų konsultantas</div>';

    return $output . $tagline;
} );

[David]

The way the text element is added doesn’t matter – Chrome Lighthouse is only measuring the rendered HTML.

I can’t see what the issue is – as other checkers approve the contrast ratio it may be a bug in the Chrome Lighthouse contrast-checker.js. Maybe its comparing the text color to the Body background color which would fail the test.

[Rolandas]

I temporarily set the body background-color to white, but Chrome Lighthouse show the same mistake.
I will check again in a few months.

Thanks for the help

[David]

No problems!

[Author]

Posts