Archived topic
Low contrast of Site Description and Primary Navigation
10 replies · Started by Rolandas on April 2, 2021
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?
Hi there,
did you resolve the issue ? I just ran a Lighthouse test and got 100 score for desktop accessibility.
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
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
This is what i see when i test the site:
This is on desktop mode?
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.
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;
} );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.
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
No problems!
