- This topic has 10 replies, 2 voices, and was last updated 5 years ago by
.
-
Posts
-
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: 100But, on desktop mode i have a problem with Accessibility:
Performance: 100
Accessibility: 94 (I can not do anything)
Best Practices: 100
SEO: 100Why 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-descriptionBut
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.3How to solve this problem?
Customer Support
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-descriptionNO, the problem exists
I have the same result:
Chrome > incognito window > mysite url > (F12)Develpors tools > Lighthouse > Device > Desktop >
Generate report: Accessibility: 94Background 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 chromeThis 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!
- You must be logged in to reply to this topic.
